Go to Production

Check code at: https://github.com/wghglory/angular2-fundamental

Tslint

1
2
3
4

npm i typescript -g
npm i tslint -g     #globally
npm i tslint --save-dev     #locally
node_modules/.bin/tslint --init  #locally

List all errors:

1

node_modules/.bin/tslint "app/**/*.ts"

1
2

ERROR: app/user/user.module.ts[8, 64]: Missing semicolon
ERROR: app/user/user.module.ts[24, 18]: Missing trailing comma

Fix all errors:

1

node_modules/.bin/tslint "app/**/*.ts" --fix

Tuning Your rxJS Requests

Now when running the project, you can see lots of useless requests involved Observable.js like NeverObservable.js, PairObservable.js, etc

voter.service.ts and other file, use Observable instead of Rx library

1
2

- import { Observable } from 'rxjs/Rx';
+ import { Observable } from 'rxjs/Observable';

Now in auth.service.ts, some operation is not available (do, of, map)

1
2
3
4

return this.http.post('/api/login', JSON.stringify(loginInfo), options)
    .do((res: Response) => {}).catch((err) => {
        return Observable.of(false);
    });

So we create rxjs-extension.ts

1
2
3
4
5
6
7

import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';

import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

Now import this file to app.module.ts, afte this, “do, of, map” in auth.service.ts should not have errors

1

import './rxjs-extensions';

Refresh browser and you can see requests number is much lesser.

Enabling Production Mode

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.

main.ts: based on environment.js, enableProdMode

1
2

import { enableProdMode } from '@angular/core';
enableProdMode();

Ahead of Time Compiler Overview

AOT benefits:

• faster rendering
• few requests
• smaller angular framework
• detect template errors
• better security

JIT vs AOT:

When compiling Templates in development, angular use Just in time (JIT) compiler,
much of angular needed in browser is the complier.
It takes time to compile templates.

Production uses Ahead of time compiler

AOT no-no’s

• form.controls.controlName
• control.errors?.someError
• default exports
• functions in providers, routes or declarations of a module
• any filed used in a template, including inputs, must be public
• declare var for globals

ES6 module tree

main.ts –> app.module.ts –> many component.ts, service.ts

Preparing for the AOT Compiler

1

npm i @angular/compiler-cli @angular/platform-server

1. create tsconfig-aot.json
2. create main-aot.ts
3. note now index.html is new aot html, index-jit is old one

Making Coding Fixes for the AOT Compiler

create-event.component.ts now templateUrl is full path, AOT has to use relative path.

1
2
3
4

@Component({
    templateUrl: 'app/events/create-event.component.html',
})
export class CreateEventComponent {}

update as below if using systemjs:

1
2
3
4

@Component({
    moduleId: module.id,
    templateUrl: 'create-event.component.html',
})

update as below if using webpack:

1
2
3
4

@Component({
    moduleId: module.id,
    templateUrl: './create-event.component.html',
})

handle 3rd party library:

app.module.ts

1
2
3
4
5

- declare let toastr: Toastr
- declare let jQuery: Object

+ let toastr: Toastr = window['toastr'];
+ let jQuery: Object = window['$'];

• ← Previous Post
• Next Post →