adresinden daha güncel bir sürüm edinebilirsiniz.https://leanpub.com/angular-universal

AngularInDepth , Medium'dan uzaklaşıyor. Daha yeni makaleler, inDepth.dev yeni platformunda barındırılmaktadır . Derinlik hareketinin bir parçası olduğunuz için teşekkürler!

Angular CLI , 1.3.0-rc.0 sürümüyle birlikte , node kullanarak sunucu platformu için uygulamanızı oluşturma yeteneğini tanıttı . İşte onu kullanmak için bazı ilk ipuçları.

Angular evrensel konusunda yeniyseniz, önceki makalelerimi giriş olarak okuyabilirsiniz:
-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

Bu makaledeki tüm kaynak kodunu github deposunda bulabilirsiniz:https://github.com/feloy/ng-cli-universal

1.3.0-RC.0 sürümünü kurmanız ve yeni bir proje oluşturmanız gerekecek:

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

JIT derlemesi ile

İlk olarak, .angular-cli.jsonuygulama yapılandırmasını uyarlamak için dosyanın değiştirilmesi gerekir: çoklu dolguları artık kullanmayın (düğüm bunlara ihtiyaç duymaz) ve serverplatformu belirtin:

"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

AOT derlemesi ile

uygulamamızı AOT ile de oluşturabiliriz:

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

Önceki adımlarla (hem JIT hem de AOT derlemesi ile), sunucu tarafından HTML sayfalarını işleyen bir uygulama elde ederiz. Oluşturulan HTML sayfalarını tarayıcıdan yüklediğinizde, yalnızca statik web sayfaları alırsınız. Tarayıcı uygulamasının nasıl oluşturulacağını ve sunucudan tarayıcı uygulamasına nasıl geçileceğini görelim.

Aşağıdaki kod, Angular CLI ile oluşturulan yeni bir uygulamaya dayanmaktadır. Daha önce yaptığımız değişiklikleri geri alabilir veya uygulamayı silip yeniden oluşturabilirsiniz ng new ng-cli-universal.

@angular/platform-serverPaketi tekrar kurmamız gerekecek :

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

main-ssr.tsAyrıca , belirli src/tsconfig.app-ssr.jsonve src/app/app.server.module.tsdaha önce oluşturmamız gereken dosyaları kullandığımızı unutmayın :

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

Bu noktada index.jsdosyamız sadece (sunucu tarafı) uygulamamızın ana sayfasını oluşturabilir. Uygulamamızın herhangi bir sayfasını oluşturabilmek için komut dosyasını uyarlayabiliriz. bir göz atabilirsinhttps://medium.com/@feloy/building-a-dynamic-website-with-angular-universal-f8dd7bffb667Argüman olarak oluşturulacak URL'yi alan bazı komut dosyası örnekleri almak için.

Mutlu Evrensel!