|
| 1 | +# 1. Installation and Setup |
| 2 | + |
| 3 | +At this point you should have an Angular 2 app made by the angular-cli with angularfire2 module added. If not, please go through the installation process [here](https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md). Also, before you move forward please take a look at the [Angular Docs](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) to understand the basic concept. |
| 4 | + |
| 5 | +### 0. Prerequisites |
| 6 | + |
| 7 | +Before you can have your shiny and fast precompiled app make sure you have the followings installed: |
| 8 | +- @angular/compiler-cli |
| 9 | +- rollup (with its plugins) |
| 10 | +- core-js typings |
| 11 | + |
| 12 | +If not, you may need to do the following: |
| 13 | + |
| 14 | +```bash |
| 15 | +npm install --save @angular/compiler-cli |
| 16 | +npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-uglify @types/core-js |
| 17 | +``` |
| 18 | + |
| 19 | +### 1. Create tsconfig for ngc |
| 20 | + |
| 21 | +Create `tsconfig.aot.json` in your projects root: |
| 22 | + |
| 23 | +```json |
| 24 | +{ |
| 25 | + "compilerOptions": { |
| 26 | + "target": "es5", |
| 27 | + "module": "es2015", |
| 28 | + "moduleResolution": "node", |
| 29 | + "sourceMap": true, |
| 30 | + "emitDecoratorMetadata": true, |
| 31 | + "experimentalDecorators": true, |
| 32 | + "removeComments": false, |
| 33 | + "suppressImplicitAnyIndexErrors": true, |
| 34 | + "typeRoots": [ |
| 35 | + "../node_modules/@types" |
| 36 | + ], |
| 37 | + "types": [ |
| 38 | + "core-js", |
| 39 | + "firebase" |
| 40 | + ] |
| 41 | + }, |
| 42 | + |
| 43 | + "files": [ |
| 44 | + "src/app/app.module.ts", |
| 45 | + "src/main.ts", |
| 46 | + "src/typings.d.ts" |
| 47 | + ], |
| 48 | + |
| 49 | + "angularCompilerOptions": { |
| 50 | + "genDir": "aot", |
| 51 | + "skipMetadataEmit" : true |
| 52 | + } |
| 53 | +} |
| 54 | +``` |
| 55 | + |
| 56 | +If you want to test if it works, type: |
| 57 | + |
| 58 | +``` |
| 59 | +node_modules/.bin/ngc -p tsconfig.aot.json |
| 60 | +``` |
| 61 | + |
| 62 | +On a successful compilation you'll see nothing on your console. |
| 63 | + |
| 64 | +Note: You will have to change your imports as mentioned in the [Angular Docs#Bootstrap](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#bootstrap) section and recompile your app after it. |
| 65 | + |
| 66 | +### 2. Add rollup config |
| 67 | + |
| 68 | +Create `rollup.js` in your projects root: |
| 69 | + |
| 70 | +```javascript |
| 71 | +import rollup from 'rollup'; |
| 72 | +import nodeResolve from 'rollup-plugin-node-resolve'; |
| 73 | +import commonjs from 'rollup-plugin-commonjs'; |
| 74 | +import uglify from 'rollup-plugin-uglify'; |
| 75 | + |
| 76 | +export default { |
| 77 | + entry: 'src/main.js', |
| 78 | + dest: 'dist/build.js', |
| 79 | + sourceMap: false, |
| 80 | + format: 'iife', |
| 81 | + useStrict: false, |
| 82 | + plugins: [ |
| 83 | + nodeResolve({ jsnext: true, module: true, browser: true }), |
| 84 | + commonjs({ |
| 85 | + include: [ |
| 86 | + 'node_modules/rxjs/**', |
| 87 | + 'node_modules/angularfire2/**' |
| 88 | + ], |
| 89 | + namedExports: { |
| 90 | + 'node_modules/angularfire2/node_modules/firebase/firebase-browser.js': ['initializeApp', 'auth', 'database'] |
| 91 | + } |
| 92 | + }), |
| 93 | + uglify() |
| 94 | + ] |
| 95 | +} |
| 96 | +``` |
| 97 | + |
| 98 | +Once done, run rollup with the configuration you just made: |
| 99 | + |
| 100 | +``` |
| 101 | +node_modules/.bin/rollup -c rollup.js |
| 102 | +``` |
| 103 | + |
| 104 | +You will see a couple warnings, something like these, which you can safely ignore: |
| 105 | + |
| 106 | +``` |
| 107 | +The `this` keyword is equivalent to `undefined` at the top level of an ES module, and has been rewritten |
| 108 | +Use of `eval` (in .../node_modules/angularfire2/node_modules/firebase/firebase.js) is strongly discouraged, as it poses security risks and may cause issues with minification. See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details |
| 109 | +Use of `eval` (in .../node_modules/angularfire2/node_modules/firebase/firebase.js) is strongly discouraged, as it poses security risks and may cause issues with minification. See https://github.com/rollup/rollup/wiki/Troubleshooting#avoiding-eval for more details |
| 110 | +
|
| 111 | +``` |
| 112 | + |
| 113 | +On success you will have a `build.js` file in your `dist` directory. You're not done yet, however. |
| 114 | + |
| 115 | +### 3. Modify index.html |
| 116 | + |
| 117 | +You have now a working, AoT compiled javascript file. Take a look at the (Angular Docs#Source Code)[https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#source-code] section and set up your index.html accordingly. |
| 118 | + |
| 119 | +### * Using native firebase SDK with angularfire2 |
| 120 | + |
| 121 | +Since there are a couple things that angularfire2 doesn't support yet (such as multi-location update), you might want to use the native firebase SDK as well. To do that you'll have to do a couple things: |
| 122 | + |
| 123 | +Wherever you used `firebase` in your app, import firebase like: |
| 124 | + |
| 125 | +``` |
| 126 | +import firebase from 'firebase' |
| 127 | +``` |
| 128 | + |
| 129 | +Your editor will most probably complain about it, so to make it happy add the following line to your `tsconfig` (both of them) |
| 130 | + |
| 131 | +``` |
| 132 | +"allowSyntheticDefaultImports": true |
| 133 | +``` |
| 134 | + |
| 135 | +Depending on your firebase version you will have to modify your rollup config and add the following (one of the two) line to your `namedExports` array: |
| 136 | + |
| 137 | +### < 3.4 |
| 138 | + |
| 139 | +``` |
| 140 | +'node_modules/firebase/firebase-browser.js': ['initializeApp', 'auth', 'database'] |
| 141 | +``` |
| 142 | + |
| 143 | +### 3.4+ |
| 144 | + |
| 145 | +``` |
| 146 | +'node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database'] |
| 147 | +``` |
| 148 | + |
| 149 | +And finally, add the following line to your `include` array: |
| 150 | + |
| 151 | +``` |
| 152 | +'node_modules/firebase/**' |
| 153 | +``` |
0 commit comments