问题 如何设置Angular cli + Angular universal？

Angular Cli现在支持1.3.0-rc.0及更高版本。 

您可以使用安装此版本

npm install -g @angular/cli

来自Angular Cli Wiki的安装说明 通用渲染

我有一个可以在GitHub上找到的演示应用程序

资源：  https://github.com/joejordanbrown/angular-cli-universal

现场演示：  https://uixd.co.uk/open-source-software/angular-cli-universal/

第1步：创建新的Angular Cli应用程序

$ ng new angular-cli-universal

第2步：安装@ angular / platform-server

将@ angular / platform-server安装到您的项目中。确保使用与项目中其他@angular包相同的版本。

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

要么

$ yarn add @angular/platform-server

第3步：准备应用程序以进行通用渲染

您需要做的第一件事是通过向BrowserModule导入添加.withServerTransition（）和应用程序ID，使AppModule与Universal兼容：

SRC /应用/ app.module.ts：

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({appId: 'my-app'}),
    ...
  ],

})
export class AppModule {}

接下来，在服务器上运行时，专门为您的应用程序创建一个模块。建议将此模块称为AppServerModule。

此示例将app.module.ts放在名为app.server.module.ts的文件中：

SRC /应用/ app.server.module.ts：

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

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

@NgModule({
  imports: [
    // The AppServerModule should import your AppModule followed
    // by the ServerModule from @angular/platform-server.
    AppModule,
    ServerModule,
  ],
  // Since the bootstrapped component is not inherited from your
  // imported AppModule, it needs to be repeated here.
  bootstrap: [AppComponent],
})
export class AppServerModule {}

步骤4：创建服务器主文件和tsconfig以构建它

为您的Universal包创建主文件。此文件只需要导出AppServerModule。它可以进入src。此示例将此文件称为main.server.ts：

SRC / main.server.ts：

export {AppServerModule} from './app/app.server.module';

将tsconfig.app.json复制到tsconfig-server.json并将其更改为使用“commonjs”的“模块”目标进行构建。

为“angularCompilerOptions”添加一个部分，并将“entryModule”设置为AppServerModule，指定为导入路径，其中包含符号名称的哈希（＃）。在这个例子中，这将是src / app / app.server.module＃AppServerModule。

SRC / tsconfig.server.json：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    // Set the module format to "commonjs":
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  // Add "angularCompilerOptions" with the AppServerModule you wrote
  // set as the "entryModule".
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

第5步：创建NodeJS服务器文件 您需要创建一个NodeJS服务器来呈现和提供应用程序。这个例子使用express。

安装快速和压缩

$ npm install --save express compression @nguniversal/express-engine

要么

$ yarn add express compression @nguniversal/express-engine

SRC / express.server.js：

const path = require('path');
const fs = require('fs');
const express = require('express');
const compression = require('compression');
const ngExpressEngine = require('@nguniversal/express-engine').ngExpressEngine;

require('zone.js/dist/zone-node');
require('rxjs/add/operator/filter');
require('rxjs/add/operator/map');
require('rxjs/add/operator/mergeMap');

var hash;
fs.readdirSync(__dirname).forEach(file => {
  if (file.startsWith('main')) {
    hash = file.split('.')[1];
  }
});

const AppServerModuleNgFactory = require('./main.' + hash + '.bundle').AppServerModuleNgFactory;

const app = express();
const port = Number(process.env.PORT || 8080);

app.engine('html', ngExpressEngine({
  baseUrl: 'http://localhost:' + port,
  bootstrap: AppServerModuleNgFactory
}));


app.set('view engine', 'html');
app.set('views', path.join(__dirname, '/../browser'));

app.use(compression());
app.use('/', express.static(path.join(__dirname, '/../browser'), {index: false}));


app.get('/*', function (req, res) {
  res.render('index', {
    req: req,
    // res: res
  });
});

app.listen(port, function() {
  console.log(`Listening at ${port}`);
});

第6步：在.angular-cli.json中创建一个新项目

在.angular-cli.json中，键“apps”下有一个数组。在那里复制客户端应用程序的配置，并将其粘贴为阵列中的新条目，并将其他键“platform”设置为“server”。

然后，删除“polyfills”键 - 服务器上不需要这些键并调整“main”，并使用“tsconfig”指向您在步骤2中编写的文件。最后，将“outDir”调整到新位置（这示例使用dist / server）。

.angular-cli.json：

{
  ...
  "apps": [
    {
      // Keep your original application config the same apart from changing outDir to dist/browser.
      // It will be app 0.
      "outDir": "dist/browser",
    },
    {
      // This is your server app. It is app 1.
      "platform": "server",
      "root": "src",
      // Build to dist/server instead of dist. This prevents
      // client and server builds from overwriting each other.
      "outDir": "dist/server",
      "assets": [
        "assets",
        "favicon.ico",
        "express.server.js"
      ],
      "index": "index.html",
      // Change the main file to point to your server main.
      "main": "main.server.ts",
      // Remove polyfills.
      // "polyfills": "polyfills.ts",
      "test": "test.ts",
      // Change the tsconfig to point to your server config.
      "tsconfig": "tsconfig.server.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"
      }
    }
  ],
  ...
}

构建捆绑包

完成这些步骤后，您应该能够为应用程序构建服务器软件包，使用--app标志告诉CLI构建服务器软件包，在.angular-cli的“apps”数组中引用其索引1以.json：

# This builds the client application in dist/browser/
$ ng build --prod
...
# This builds the server bundle in dist/server/
$ ng build --prod --app 1
Date: 2017-07-24T22:42:09.739Z
Hash: 9cac7d8e9434007fd8da
Time: 4933ms
chunk {0} main.988d7a161bd984b7eb54.bundle.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [entry] [rendered]

启动快速服务器

$ node dist/server/express.server.js

查看Angular Cli Wiki以获取更多详细信息    https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Angular Cli现在支持1.3.0-rc.0及更高版本。 

您可以使用安装此版本

npm install -g @angular/cli

来自Angular Cli Wiki的安装说明 通用渲染

我有一个可以在GitHub上找到的演示应用程序

资源：  https://github.com/joejordanbrown/angular-cli-universal

现场演示：  https://uixd.co.uk/open-source-software/angular-cli-universal/

第1步：创建新的Angular Cli应用程序

$ ng new angular-cli-universal

第2步：安装@ angular / platform-server

将@ angular / platform-server安装到您的项目中。确保使用与项目中其他@angular包相同的版本。

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

要么

$ yarn add @angular/platform-server

第3步：准备应用程序以进行通用渲染

您需要做的第一件事是通过向BrowserModule导入添加.withServerTransition（）和应用程序ID，使AppModule与Universal兼容：

SRC /应用/ app.module.ts：

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({appId: 'my-app'}),
    ...
  ],

})
export class AppModule {}

接下来，在服务器上运行时，专门为您的应用程序创建一个模块。建议将此模块称为AppServerModule。

此示例将app.module.ts放在名为app.server.module.ts的文件中：

SRC /应用/ app.server.module.ts：

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

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

@NgModule({
  imports: [
    // The AppServerModule should import your AppModule followed
    // by the ServerModule from @angular/platform-server.
    AppModule,
    ServerModule,
  ],
  // Since the bootstrapped component is not inherited from your
  // imported AppModule, it needs to be repeated here.
  bootstrap: [AppComponent],
})
export class AppServerModule {}

步骤4：创建服务器主文件和tsconfig以构建它

为您的Universal包创建主文件。此文件只需要导出AppServerModule。它可以进入src。此示例将此文件称为main.server.ts：

SRC / main.server.ts：

export {AppServerModule} from './app/app.server.module';

将tsconfig.app.json复制到tsconfig-server.json并将其更改为使用“commonjs”的“模块”目标进行构建。

为“angularCompilerOptions”添加一个部分，并将“entryModule”设置为AppServerModule，指定为导入路径，其中包含符号名称的哈希（＃）。在这个例子中，这将是src / app / app.server.module＃AppServerModule。

SRC / tsconfig.server.json：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    // Set the module format to "commonjs":
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  // Add "angularCompilerOptions" with the AppServerModule you wrote
  // set as the "entryModule".
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

第5步：创建NodeJS服务器文件 您需要创建一个NodeJS服务器来呈现和提供应用程序。这个例子使用express。

安装快速和压缩

$ npm install --save express compression @nguniversal/express-engine

要么

$ yarn add express compression @nguniversal/express-engine

SRC / express.server.js：

const path = require('path');
const fs = require('fs');
const express = require('express');
const compression = require('compression');
const ngExpressEngine = require('@nguniversal/express-engine').ngExpressEngine;

require('zone.js/dist/zone-node');
require('rxjs/add/operator/filter');
require('rxjs/add/operator/map');
require('rxjs/add/operator/mergeMap');

var hash;
fs.readdirSync(__dirname).forEach(file => {
  if (file.startsWith('main')) {
    hash = file.split('.')[1];
  }
});

const AppServerModuleNgFactory = require('./main.' + hash + '.bundle').AppServerModuleNgFactory;

const app = express();
const port = Number(process.env.PORT || 8080);

app.engine('html', ngExpressEngine({
  baseUrl: 'http://localhost:' + port,
  bootstrap: AppServerModuleNgFactory
}));


app.set('view engine', 'html');
app.set('views', path.join(__dirname, '/../browser'));

app.use(compression());
app.use('/', express.static(path.join(__dirname, '/../browser'), {index: false}));


app.get('/*', function (req, res) {
  res.render('index', {
    req: req,
    // res: res
  });
});

app.listen(port, function() {
  console.log(`Listening at ${port}`);
});

第6步：在.angular-cli.json中创建一个新项目

在.angular-cli.json中，键“apps”下有一个数组。在那里复制客户端应用程序的配置，并将其粘贴为阵列中的新条目，并将其他键“platform”设置为“server”。

然后，删除“polyfills”键 - 服务器上不需要这些键并调整“main”，并使用“tsconfig”指向您在步骤2中编写的文件。最后，将“outDir”调整到新位置（这示例使用dist / server）。

.angular-cli.json：

{
  ...
  "apps": [
    {
      // Keep your original application config the same apart from changing outDir to dist/browser.
      // It will be app 0.
      "outDir": "dist/browser",
    },
    {
      // This is your server app. It is app 1.
      "platform": "server",
      "root": "src",
      // Build to dist/server instead of dist. This prevents
      // client and server builds from overwriting each other.
      "outDir": "dist/server",
      "assets": [
        "assets",
        "favicon.ico",
        "express.server.js"
      ],
      "index": "index.html",
      // Change the main file to point to your server main.
      "main": "main.server.ts",
      // Remove polyfills.
      // "polyfills": "polyfills.ts",
      "test": "test.ts",
      // Change the tsconfig to point to your server config.
      "tsconfig": "tsconfig.server.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"
      }
    }
  ],
  ...
}

构建捆绑包

完成这些步骤后，您应该能够为应用程序构建服务器软件包，使用--app标志告诉CLI构建服务器软件包，在.angular-cli的“apps”数组中引用其索引1以.json：

# This builds the client application in dist/browser/
$ ng build --prod
...
# This builds the server bundle in dist/server/
$ ng build --prod --app 1
Date: 2017-07-24T22:42:09.739Z
Hash: 9cac7d8e9434007fd8da
Time: 4933ms
chunk {0} main.988d7a161bd984b7eb54.bundle.js (main) 9.49 kB [entry] [rendered]
chunk {1} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [entry] [rendered]

启动快速服务器

$ node dist/server/express.server.js

查看Angular Cli Wiki以获取更多详细信息    https://github.com/angular/angular-cli/wiki/stories-universal-rendering