Anda bisa mendapatkan versi yang lebih baru dihttps://leanpub.com/angular-universal

AngularInDepth menjauh dari Medium. Artikel terbaru lainnya di-host di platform baru inDepth.dev . Terima kasih telah menjadi bagian dari gerakan mendalam!

Angular CLI baru saja memperkenalkan dengan versi 1.3.0-rc.0 kemampuan untuk membangun aplikasi Anda untuk platform server , menggunakan node . Berikut adalah beberapa tips pertama untuk menggunakannya.

Jika Anda baru mengenal Angular universal, Anda dapat membaca artikel saya sebelumnya sebagai pengantar:
—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

Anda dapat menemukan semua kode sumber dari artikel ini di repositori github:https://github.com/feloy/ng-cli-universal

Anda harus menginstal versi 1.3.0-RC.0 dan membuat proyek baru:

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

Dengan kompilasi JIT

Pertama, .angular-cli.jsonfile harus dimodifikasi untuk menyesuaikan konfigurasi aplikasi: jangan gunakan polyfill lagi (node ​​tidak membutuhkannya) dan tunjukkan serverplatformnya:

"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

Dengan kompilasi AOT

kami juga dapat membangun aplikasi kami dengan 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);
});

Dengan langkah sebelumnya (dengan kompilasi JIT dan AOT), kita mendapatkan aplikasi yang merender halaman HTML dari sisi server. Saat Anda memuat halaman HTML yang dirender dari browser, Anda hanya mendapatkan halaman web statis. Mari kita lihat juga bagaimana membangun aplikasi browser dan transisi dari server ke aplikasi browser.

Kode berikut didasarkan pada aplikasi baru yang dibuat dengan Angular CLI. Anda dapat mengembalikan perubahan yang telah kami buat sebelumnya atau menghapus dan membuat ulang aplikasi dari awal ng new ng-cli-universallagi.

Kita perlu menginstal @angular/platform-serverpaket lagi:

$ 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"
    }
  ],

Perhatikan juga bahwa kami menggunakan spesifik main-ssr.ts, src/tsconfig.app-ssr.jsondan src/app/app.server.module.tsfile yang perlu kami buat sebelumnya:

// 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);
});

Pada titik ini, index.jsfile kami hanya dapat (sisi server) merender halaman beranda aplikasi kami. Kami dapat mengadaptasi skrip untuk dapat merender halaman mana pun dari aplikasi kami. Anda dapat melihathttps://medium.com/@feloy/building-a-dynamic-website-with-angular-universal-f8dd7bffb667untuk mendapatkan beberapa contoh skrip yang mendapatkan URL untuk dirender sebagai argumen.

Selamat Universal!