Skip to content

Commit 7c20d13

Browse files
ivovizdavideast
authored andcommitted
feat(docs): Add AoT installation and setup (angular#546)
1 parent c32a008 commit 7c20d13

File tree

1 file changed

+153
-0
lines changed

1 file changed

+153
-0
lines changed

docs/aot-rollup-cli-setup.md

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
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

Comments
 (0)