30天深入Angular5的世界

[技術支援-8] 產品發佈設定

將產品發佈到正式環境

最簡單的方法是

ng build

1

ng build
將所有dist/資料夾底下的文件複製一份到伺服器上
如果想順帶設置base href至<base href="/my/app/">，則可加下面參數

ng build --base-href=/my/app/

1

ng build --base-href=/my/app/
若有使用Router功能，將所有找不到的頁面都導向index.html（下面會有詳細介紹）

優化我們的Angular專案

加上--prod參數，會能輸出優化過的檔案

ng build --prod

1	ng build --prod

這個參數會為我們的專案做這些事情

改使用AOT編譯：預先編譯而不是用JIT的方式
開啟production mode: 可以讓網站執行更快，等同於下這個參數--environment=prod
Bundling: 將所有的所使用的library和許多應用綁在一起
縮小檔案：刪除多餘的空白，註釋和可選的令牌。
Uglification：將變數名稱做混淆的動作。
消除死代碼：刪除未引用的模塊和很多未使用的代碼

添加--build-optimizer可進一步減少檔案的大小

ng build --prod --build-optimizer

1	ng build --prod --build-optimizer

如果要使用惰性加載去載入部份的JS檔案，記得不要在需要被首先加載的模組裡面import要被惰性加載的元件，否則會在一開始就被載入。
AOT預設在編譯時會對ngModules做識別並且做惰性加載的設定。

善用bundles工具

source-map-explorer是一個很棒的bundles工具。可以將許多的js綑綁在一起。
首先先安裝

npm install source-map-explorer --save-dev

1	npm install source-map-explorer --save-dev

然後建構應用程式

ng build --prod --sourcemaps

1	ng build --prod --sourcemaps

在dist生成綑綁包

ls dist/*.bundle.js

1	ls dist/*.bundle.js

運行管理器來生成這個被綑綁的檔案的分析圖

node_modules/.bin/source-map-explorer dist/main.*.bundle.js

1	node_modules/.bin/source-map-explorer dist/main.*.bundle.js

產生的圖如下：

善用效能觀察工具

首推的當然就是google chrome囉！
這邊有相關的教學系列文：認識 Chrome 開發者工具
官網也有推薦使用WebPageTest 來衡量自己網頁的速度

伺服器啟用Routee功能的配置方法

Apache設定方式

添加一個重寫規則.htaccess

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

RewriteEngine On

# If an existing asset or directory is requested go to it as it is

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]

RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html

RewriteRule ^ /index.html

NGinx

使用前端控制器模式Web應用程序中try_files描述的方法修改為：index.html

try_files $uri $uri/ /index.html;

1	try_files $uri $uri/ /index.html;

IIS

添加一個重寫規則web.config

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/src/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

<system.webServer>

<rules>

</conditions>

</rule>

</rules>

</rewrite>

</system.webServer>

GitHub Pages

我們無法直接配置GitHub Pages服務器，但是可以添加一個404頁面。複製index.html到404.html。
它仍將作為404響應，但瀏覽器將處理該頁面並正確加載應用程序。從服務docs/上創建一個.nojekyll文件

Firebase hosting

添加一個重寫規則

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} ]

"rewrites": [ {

"source": "**",

"destination": "/index.html"

} ]

[技術支援-7] TypeScript設定

TypeScript配置

TypeScript是Angular應用開發中使用的主語言。瀏覽器不能直接執行TypeScript，得先用tsc編譯器轉譯(transpile)成JavaScript，而且編譯器需要進行一些配置。而配置的檔案名稱就是tsconfig.json

這邊是官方關於此配置文件的詳細說明：tsconfig.json

tsconfig.json

下面為一個tsconfig.json的範例

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

{

"compileOnSave": false,

"compilerOptions": {

"outDir": "./dist/out-tsc",

"sourceMap": true,

"declaration": false,

"moduleResolution": "node",

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"target": "es5",

"typeRoots": [

"node_modules/@types"

"lib": [

"es2017",

"dom"

"noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true

}

關於設定檔裡的noImplicitAny意思是是否不允許typescript編譯時隱性將沒有設定類型的變數設定為any。如果設定為true的話，如果typescript裡面有沒有設定類型的變數則會產生錯誤訊息。當這個值設定為true時，記得要將suppressImplicitAnyIndexErrors也設定為true，不然會發生隱式報錯。

lib.d.ts 文件

TypeScript有一個特殊的聲明文件lib.d.ts。包含了JavaScript運行庫和DOM的各種常用Javascript環境聲明。
基於–target，TypeScript添加額外的環境聲明，例如如果目標為es6時將添加Promise。

"lib": ["es2017", "dom"]

1	"lib": ["es2017", "dom"]

[技術支援-6] NPM設定

安裝NPM環境

Angular應用程序以及Angular本身都依賴於很多第三方包(包括Angular自己)提供的特性和功能。這些包由Node包管理器( npm )負責安裝和維護。
因此Node.js和npm是做Angular開發的基礎。
這邊是Node.js下載連結：Downloads NPM

如果在電腦中需要同時運行多個不同版本的npm，可以使用nvm來管理他們：nvm

package.json設定

這邊有詳細的說明文檔：Specifics of npm’s package.json handling
下面是一個預設CLI設定檔的範例

{
  "name": "專案名稱應為惟一",
  "version": "0.0.0",
  "license": "MIT",
  "description": "對於這個專案的說名",
  "keywords": "可幫助在npm網站上能被搜尋到",
  "homepage": "http://claire-chang.com",
  "bugs": { 
    "url" : "https://github.com/owner/project/issues(ISSUE要被回報的網址和MAIL)", "email" : "project@hostname.com"
  },
  "author": "Barney Rubble <b@rubble.com> (http://barnyrubble.tumblr.com/)",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angular/upgrade": "^5.0.0",
    "core-js": "^2.4.1",
    "mobx": "^3.3.1",
    "mobx-angular": "^1.9.0",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

{

"name": "專案名稱應為惟一",

"version": "0.0.0",

"license": "MIT",

"description": "對於這個專案的說名",

"keywords": "可幫助在npm網站上能被搜尋到",

"homepage": "http://claire-chang.com",

"bugs": {

"url" : "https://github.com/owner/project/issues(ISSUE要被回報的網址和MAIL)", "email" : "project@hostname.com"

"author": "Barney Rubble <b@rubble.com> (http://barnyrubble.tumblr.com/)",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "^5.0.0",

"@angular/common": "^5.0.0",

"@angular/compiler": "^5.0.0",

"@angular/core": "^5.0.0",

"@angular/forms": "^5.0.0",

"@angular/http": "^5.0.0",

"@angular/platform-browser": "^5.0.0",

"@angular/platform-browser-dynamic": "^5.0.0",

"@angular/router": "^5.0.0",

"@angular/upgrade": "^5.0.0",

"core-js": "^2.4.1",

"mobx": "^3.3.1",

"mobx-angular": "^1.9.0",

"rxjs": "^5.5.2",

"zone.js": "^0.8.14"

"devDependencies": {

"@angular/cli": "1.5.0",

"@angular/compiler-cli": "^5.0.0",

"@angular/language-service": "^5.0.0",

"@types/jasmine": "~2.5.53",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "~3.2.0",

"jasmine-core": "~2.6.2",

"jasmine-spec-reporter": "~4.1.0",

"karma": "~1.7.0",

"karma-chrome-launcher": "~2.1.1",

"karma-cli": "~1.0.1",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~3.2.0",

"tslint": "~5.7.0",

"typescript": "~2.4.2"

}

這邊說明幾個比較重要的設定值：

script: 是一個script commands的列表，這些script commands會在生命週期中的不同時間運行。其內容的key是生命週期事件，value是要執行的命令。可獲得的生命周期列表：請見此
dependencies: 要運行這個應用程式必要一定要安裝的package
devDependencies: 只有在開發時需要用到的功能則寫在這邊，當別人要導入我們所開發的專案時，不用一定要下載完整的devDependencies內容。

在dependencies需載入的Angular Packages

@angular/animations：網頁切換動畫效果
@angular/common： services, pipes, and directives等都在這邊
@angular/compiler：Angular的模板編譯器，在JIT
@angular/core：基本angular框架所需的功能如metadata decorators, Component, Directive, dependency injection,以及元件的lifecycle hooks都在裡面
@angular/forms：template-driven和reactive forms的表單驗證功能都在這
@angular/http：Angular的舊版即將被棄用的HTTP客戶端
@angular/platform-browser：一切DOM和瀏覽器相關的在這，AOT編譯方法也在這
@angular/platform-browser-dynamic：JIT編譯器在這
@angular/router：路由器功能
@angular/upgrade：從angularJS升級所需使用的
core-js: Polyfill packages
zone.js: 一個為 Zone規範提供的填充庫
rxjs: 新版的Angular主要使用的HTTP方法模組
bootstrap: bootstrap是一個可以簡單做出UI的視覺框架
angular-in-memory-web-api: 一個Angular的支持庫，它能模擬一個遠端服務器的Web API，而不需要依賴一個真實的服務器或發起真實的HTTP調用。對演示、文檔範例和開發的早期階段(那時候我們可能還沒有服務器呢)非常有用。

devDependencies需載入的Packages

列在文件中devDependencies區的包會幫助我們開發該應用程序。我們不用把它們部署到產品環境的應用程序中——雖然這樣做也沒什麼壞處。
另外在devDependencies也需要列出所有在Angular裡列為peerDependencies的package

[技術支援-5] 佈署方式JIT及AOT介紹

Ahead-of-Time (AOT)編譯

在Angular 2 中有兩種編譯模式：

JIT(Just-in-Time)：Angular預設是使用 Just-in-Time (JIT) 即時編譯，等瀏覽器下載完 *.js 檔案後，會在用戶端的瀏覽器編譯 Angular 的 JS 程式碼，接著才會渲染畫面。
AOT(Ahead-of-Time)：在程式發佈之前就透過 Angular Compiler 進行編譯，所以瀏覽器下載完的 *.js 檔案，就可以直接被執行，然後渲染畫面。

下表為這兩種佈署方式的簡單比較表：

Characteristic	JiT	AoT
Compilation target	Browser	Server
Compilation context	Runtime	Build
Bundle size	Huge (~1.2 MB)	Smaller (~400 KB)
Execution Performance	–	Better
Startup time	–	Shorter

AoT的要點是將編譯從運行時移動到構建過程。因此我們不需要讓用戶載入完整的編譯器功能，也不需要在用戶端才去做編譯的動作，所以從對照表可以看出，這個動作可以讓效能以及檔案大小都變得更好。

另外，預先編譯可以在編譯期就發現一些模版的錯誤，而不需要等到實際在客戶端執行才發現。使用AOT，編譯器僅僅使用一組庫在構建期間運行一次；使用JIT，編譯器在每個用戶的每次運行期間都要用不同的庫運行一次。

AOT編譯的優點

更快:瀏覽器直接載入可運行的程式碼，可以立即使用，而不用等待編譯完成。
減少HTTP異部請求：編譯器把外部HTML模板和CSS樣式表內聯到了該應用的JavaScript中。消除了用來下載那些源文件的Ajax請求。
檔案更小：客戶端不用載入完整的Angular編譯器
提早檢測模板錯誤：編譯時會跳出模板綁定錯誤警告，提早發現錯誤
更安全：AOT編譯遠在HTML模版和組件被服務到客戶端之前，將它們編譯到JavaScript文件。沒有模版可以閱讀，沒有高風險客戶端HTML或JavaScript可利用，所以注入攻擊的機會較少。

使用AOT編譯

Angular5大大的簡化了AOT流程，我們只需在生成文件時加上--aot

ng build --aot
ng serve --aot

1 2	ng build --aot ng serve --aot

如果我們使用--prod預設也會是aot輸出。

用AOT編譯的程式編寫限制

如果使用AOT預編譯，在撰寫angular的metadata要注意下面幾點：

不支援function expression

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) {
   statements
};

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) {

statements

};

不支援Arrow functions

(param1, param2, …, paramN) => { statements }

1	(param1, param2, …, paramN) => { statements }

像下面這種設定方法在AOT是不被支援的

@Component({
  ...
  providers: [{provide: server, useFactory: () => new Server()}]
})

@Component({

...

providers: [{provide: server, useFactory: () => new Server()}]

})

需改成這樣：

export function serverFactory() {
  return new Server();
}

@Component({
  ...
  providers: [{provide: server, useFactory: serverFactory}]
})

export function serverFactory() {

return new Server();

}

@Component({

...

providers: [{provide: server, useFactory: serverFactory}]

})

在元數據內單獨使用常數

因為常數是在編譯時就編譯進JS裡，如下面的寫法會造成AOT在編譯時遺失template常數的值：

const template = '<div>{{hero.name}}</div>';

@Component({
  selector: 'app-hero',
  template: template
})
export class HeroComponent {
  @Input() hero: Hero;
}

const template = '<div>{{hero.name}}</div>';

@Component({

selector: 'app-hero',

})

export class HeroComponent {

@Input() hero: Hero;

}

我們可以改用下面這種寫法

@Component({
  selector: 'app-hero',
  template: '<div>{{hero.name}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}

@Component({

selector: 'app-hero',

})

export class HeroComponent {

@Input() hero: Hero;

}

或將常數放至一個運算表達式內：

const template = '<div>{{hero.name}}</div>';

@Component({
  selector: 'app-hero',
  template: template + '<div>{{hero.title}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}

const template = '<div>{{hero.name}}</div>';

@Component({

selector: 'app-hero',

})

export class HeroComponent {

@Input() hero: Hero;

}

裝飾和數據綁定的類成員必須公開

在metadata中只支援下面的angular decorators

DECORATOR	MODULE
`Attribute`	`@angular/core`
`Component`	`@angular/core`
`ContentChild`	`@angular/core`
`ContentChildren`	`@angular/core`
`Directive`	`@angular/core`
`Host`	`@angular/core`
`HostBinding`	`@angular/core`
`HostListener`	`@angular/core`
`Inject`	`@angular/core`
`Injectable`	`@angular/core`
`Input`	`@angular/core`
`NgModule`	`@angular/core`
`Optional`	`@angular/core`
`Output`	`@angular/core`
`Pipe`	`@angular/core`
`Self`	`@angular/core`
`SkipSelf`	`@angular/core`
`ViewChild`	`@angular/core`

如果表達式使用不受支持的語法，則collector將錯誤的項目寫入.metadata.json文件。如果編譯器需要這段元數據來生成應用程序代碼，則編譯器稍後將報告該錯誤。
若希望能立即顯示錯誤，則可以將tsconfig的strictMetadataEmit設為true

"angularCompilerOptions": {
  ...
  "strictMetadataEmit" : true
}

"angularCompilerOptions": {

...

"strictMetadataEmit" : true

}

參考資料

[技術支援-4] Angular Universal

什麼是Angular Universal

下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明

雖然Angular是一種構建Web應用的強大方式，但是長期以來，開發人員都知道它在SEO和可訪問性方面的限制。當然，Google的爬蟲能夠執行JavaScript，但是它並不是唯一的爬蟲方案。例如，在將一個連結提交給Slack之後，它的爬蟲會抓取一個預覽，但是並不會執行JavaScript，所以原始的Angular HTML模板將會顯示在預覽之中。爲了消除這種現象所產生的問題，Jeff Whelpley和Patrick Stapleton開發了Angular Universal，它允許在服務端進行渲染。

從上面的文字可以了解，Angular Universal可以在server side預先對網頁模版做處理，變成一個有資料的靜態頁面。可以在使用者要求資料的當下產生靜態頁面，也可以事先產生好靜態檔案以供未來使用。

Angular Universal的主要目的有以下三個

方便網路爬蟲（SEO）
提高在手機裝置和效能較差的設備上的性能表現
快速顯示第一頁

Google，Bing，Facebook，Twitter和其他社交媒體網站都依靠網路爬蟲來為網站編索引，並在搜索內容。Angular Universal可以生成應用程序的靜態版本，無需JavaScript即可輕鬆搜索，鏈接和導航。這也使網站預覽可用，因為每個URL返回一個完全呈現的頁面。

啟用網頁抓取工具通常被稱為搜索引擎優化（SEO）。

安裝Angular Universal所需工具

@angular/platform-server – 通用服務器端組件。
@nguniversal/module-map-ngfactory-loader – 用於在服務器渲染的上下文中處理延遲加載。
@nguniversal/express-engine – 通用應用程序的快速引擎。
ts-loader – 傳輸服務器應用程序

使用下面指令安裝上面四個package

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine

1	npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine

更新 AppModule 模組

修正預設AppModule中BrowserModule的匯入方式

BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }),

1	BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }),

根據使用者的瀏覽器來決定是否使用SSR（server-side rendering）

import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(APP_ID) private appId: string) {
    const platform = isPlatformBrowser(platformId) ?
      'on the server' : 'in the browser';
    console.log(`Running ${platform} with appId=${appId}`);
  }

import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';

import { isPlatformBrowser } from '@angular/common';

constructor(

@Inject(PLATFORM_ID) private platformId: Object,

@Inject(APP_ID) private appId: string) {

const platform = isPlatformBrowser(platformId) ?

'on the server' : 'in the browser';

console.log(`Running ${platform} with appId=${appId}`);

}

撰寫SSR Server的程式碼

src/app/app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  providers: [
    // Add universal-only providers here
  ],
  bootstrap: [ AppComponent ],
})
export class AppServerModule {}

import { NgModule } from '@angular/core';

import { ServerModule } from '@angular/platform-server';

import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppModule } from './app.module';

import { AppComponent } from './app.component';

@NgModule({

imports: [

AppModule,

ServerModule,

ModuleMapLoaderModule

providers: [

// Add universal-only providers here

bootstrap: [ AppComponent ],

})

export class AppServerModule {}

在這邊使用Express framework來做server，利用Universal的renderModuleFactory功能來輸出靜態檔案

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

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

import * as express from 'express';
import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

// These are important and needed before anything else

import 'zone.js/dist/zone-node';

import 'reflect-metadata';

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

import * as express from 'express';

import { join } from 'path';

// Faster server renders w/ Prod mode (dev mode never needed)

enableProdMode();

// Express server

const app = express();

const PORT = process.env.PORT || 4000;

const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// Express Engine

import { ngExpressEngine } from '@nguniversal/express-engine';

// Import module map for lazy loading

import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({

bootstrap: AppServerModuleNgFactory,

providers: [

provideModuleMap(LAZY_MODULE_MAP)

]

}));

app.set('view engine', 'html');

app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely

app.get('/api/*', (req, res) => {

res.status(404).send('data requests are not supported');

});

// Server static files from /browser

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine

app.get('*', (req, res) => {

res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });

});

// Start up the Node server

app.listen(PORT, () => {

console.log(`Node server listening on http://localhost:${PORT}`);

});

下面是Express的Server檔案內容server.ts

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});
// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

app.engine('html', ngExpressEngine({

bootstrap: AppServerModuleNgFactory,

providers: [

provideModuleMap(LAZY_MODULE_MAP)

]

}));

// All regular routes use the Universal engine

app.get('*', (req, res) => {

res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });

});

// Server static files from /browser

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

Universal的設定檔

src/tsconfig.server.json的內容如下：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

{

"extends": "../tsconfig.json",

"compilerOptions": {

"outDir": "../out-tsc/app",

"baseUrl": "./",

"module": "commonjs",

"types": []

"exclude": [

"test.ts",

"**/*.spec.ts"

"angularCompilerOptions": {

"entryModule": "app/app.server.module#AppServerModule"

}

BUILD出檔案

npm run build:universal

1	npm run build:universal

Claire's Blog

分類: 30天深入Angular5的世界

[技術支援-8] 產品發佈設定

將產品發佈到正式環境

優化我們的Angular專案

善用bundles工具

善用效能觀察工具

伺服器啟用Routee功能的配置方法

Apache設定方式

NGinx

IIS

GitHub Pages

Firebase hosting

[技術支援-7] TypeScript設定

TypeScript配置

tsconfig.json

lib.d.ts 文件

[技術支援-6] NPM設定

安裝NPM環境

package.json設定

在dependencies需載入的Angular Packages

devDependencies需載入的Packages

[技術支援-5] 佈署方式JIT及AOT介紹

Ahead-of-Time (AOT)編譯

AOT編譯的優點

使用AOT編譯

用AOT編譯的程式編寫限制

不支援function expression

不支援Arrow functions

在元數據內單獨使用常數

裝飾和數據綁定的類成員必須公開

參考資料

[技術支援-4] Angular Universal

什麼是Angular Universal

安裝Angular Universal所需工具

更新 AppModule 模組

撰寫SSR Server的程式碼

Universal的設定檔

BUILD出檔案

參考資料