Puede obtener una versión más actualizada enhttps://leanpub.com/angular-universal

AngularInDepth se está alejando de Medium. Los artículos más recientes están alojados en la nueva plataforma inDepth.dev . ¡Gracias por ser parte del movimiento en profundidad!

Angular CLI acaba de presentar con la versión 1.3.0-rc.0 la capacidad de crear su aplicación para la plataforma del servidor , utilizando node . A continuación te damos algunos primeros consejos para utilizarlo.

Si es nuevo en Angular universal, puede leer mis artículos anteriores como introducción
: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

Puedes encontrar todo el código fuente de este artículo en el repositorio de github:https://github.com/feloy/ng-cli-universal

Tendrás que instalar la versión 1.3.0-RC.0 y crear un nuevo proyecto:

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

Con compilación JIT

Primero, .angular-cli.jsonhay que modificar el archivo para adaptar la configuración de la app: no usar más los polyfills (el nodo no los necesita) e indicar la serverplataforma:

"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

Con compilación AOT

También podemos construir nuestra aplicación con 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);
});

Con los pasos anteriores (con compilación JIT y AOT), obtenemos una aplicación que representa páginas HTML desde el lado del servidor. Cuando carga las páginas HTML renderizadas desde el navegador, solo obtiene páginas web estáticas. Veamos cómo crear también la aplicación del navegador y realizar la transición del servidor a la aplicación del navegador.

El código que sigue se basa en una nueva aplicación creada con Angular CLI. Puede revertir los cambios que hemos realizado antes o borrar y ng new ng-cli-universalvolver a crear la aplicación desde cero.

Necesitaremos instalar el @angular/platform-serverpaquete nuevamente:

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

También tenga en cuenta que estamos utilizando archivos específicos main-ssr.tsy src/tsconfig.app-ssr.jsonque src/app/app.server.module.tsdebemos crear antes:

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

En este punto, nuestro index.jsarchivo solo puede representar (del lado del servidor) la página de inicio de nuestra aplicación. Podríamos adaptar el script para poder representar cualquier página de nuestra aplicación. Puedes echar un vistazo ahttps://medium.com/@feloy/building-a-dynamic-website-with-angular-universal-f8dd7bffb667para obtener algunos ejemplos de scripts que obtienen como argumento la URL a representar.

¡Feliz Universal!