Bạn có thể tải phiên bản cập nhật hơn tạihttps://leanpub.com/angular-universal

AngularInDepth đang rời xa Medium. Các bài viết gần đây hơn được lưu trữ trên nền tảng mới inDepth.dev . Cảm ơn vì đã là một phần của phong trào sâu sắc!

Angular CLI vừa giới thiệu với phiên bản 1.3.0-rc.0 khả năng xây dựng ứng dụng của bạn cho nền tảng máy chủ bằng cách sử dụng nút . Dưới đây là một số lời khuyên đầu tiên để sử dụng nó.

Nếu bạn chưa quen với Angular phổ quát, bạn có thể đọc các bài viết trước của tôi dưới dạng phần giới thiệu:
-https://medium.com/@feloy/angular-v4-universal-demystified-f06a576d6ca2
—https://medium.com/@feloy/building-a-static-website-with-angular-universal-a1acc49e26e5
—https://medium.com/@feloy/building-a-dynamic-website-with-angular-universal-f8dd7bffb667

Bạn có thể tìm thấy tất cả mã nguồn từ bài viết này trong kho github:https://github.com/feloy/ng-cli-universal

Bạn sẽ phải cài đặt phiên bản 1.3.0-RC.0 và tạo một dự án mới:

$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @angular/[email protected]
$ ng new ng-cli-universal

Với trình biên dịch JIT

Đầu tiên, .angular-cli.jsontệp phải được sửa đổi để điều chỉnh cấu hình ứng dụng: không sử dụng polyfill nữa (nút không cần chúng) và chỉ ra nền servertảng:

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "platform": "server"
    }
  ],

$ npm install --save @angular/platform-server

// src/main.ts
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
export { AppModule } from './app/app.module';

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

// src/app/app.module.ts
import { ServerModule } from '@angular/platform-server';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ 
      appId: 'ng-cli-universal' 
    }), 
    ServerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

$ ng build

// ./index.js
require('zone.js/dist/zone-node');
require('reflect-metadata');
const fs = require('fs');
const { AppModule } = require('./dist/main.bundle');
const { renderModule } = require('@angular/platform-server');
renderModule(AppModule, {
    url: '/',
    document: '<app-root></app-root>'
}).then(html => {
    fs.writeFileSync('dist/index.html', html);
});

$ node index.js

Với phần tổng hợp AOT

chúng tôi cũng có thể xây dựng ứng dụng của mình bằng AOT:

$ ng build -aot

// ./index.js
require('zone.js/dist/zone-node');
require('reflect-metadata');
const fs = require('fs');
const { AppModuleNgFactory } = require('./dist/main.bundle');
const { renderModuleFactory } = require('@angular/platform-server');
renderModuleFactory(AppModuleNgFactory, {
    url: '/',
    document: '<app-root></app-root>'
}).then(html => {
    fs.writeFileSync('dist/index.html', html);
});

Với các bước trước đó (với cả trình biên dịch JIT và AOT), chúng tôi có được một ứng dụng hiển thị các trang HTML từ phía máy chủ. Khi bạn tải các trang HTML được hiển thị từ trình duyệt, bạn chỉ nhận được các trang web tĩnh. Hãy xem cách xây dựng ứng dụng trình duyệt và chuyển đổi từ máy chủ sang ứng dụng trình duyệt.

Mã sau đây dựa trên một ứng dụng mới được tạo bằng Angular CLI. Bạn có thể hoàn nguyên những thay đổi mà chúng tôi đã thực hiện trước đó hoặc xóa và tạo lại ứng dụng từ đầu ng new ng-cli-universal.

Chúng ta sẽ cần cài đặt @angular/platform-serverlại gói:

$ npm install --save @angular/platform-server

// .angular-cli.json
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "ssr",
      "root": "src",
      "outDir": "dist-ssr",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "main": "main-ssr.ts",
      "tsconfig": "tsconfig.app-ssr.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "platform": "server"
    }
  ],

Cũng lưu ý rằng chúng tôi đang sử dụng các tệp cụ thể và main-ssr.tschúng tôi cần tạo trước đó:src/tsconfig.app-ssr.jsonsrc/app/app.server.module.ts

// src/main-ssr.ts
export { AppServerModule } from './app/app.server.module';
// src/app/app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
@NgModule({
  imports: [
          AppModule,
          ServerModule
  ],
  bootstrap: [
          AppComponent
  ]
})
export class AppServerModule {}
// src/tsconfig.app-ssr.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"
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ 
      appId: 'ng-cli-universal' 
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

$ ng build -aot 
$ ng build -aot -app ssr

require('zone.js/dist/zone-node');
require('reflect-metadata');
const fs = require('fs');
const { AppModuleNgFactory } = require('./dist-ssr/main.bundle');
const { renderModuleFactory } = require('@angular/platform-server');
renderModuleFactory(AppModuleNgFactory, {
    url: '/',
    document: fs.readFileSync('dist/index.html', 'utf8')
}).then(html => {
    fs.writeFileSync('dist-ssr/index.html', html);
});

Tại thời điểm này, index.jstệp của chúng tôi chỉ có thể (phía máy chủ) hiển thị trang chủ của ứng dụng của chúng tôi. Chúng tôi có thể điều chỉnh tập lệnh để có thể hiển thị bất kỳ trang nào trong ứng dụng của mình. Bạn có thể xem quahttps://medium.com/@feloy/building-a-dynamic-website-with-angular-universal-f8dd7bffb667để lấy một số ví dụ về các tập lệnh lấy URL làm đối số để hiển thị.

Chúc mừng phổ quát!