Question

任何人都有使用角度cli项目安装角度通用的经验吗？

我试图遵循本指南：

https://universal.angular.io/quickstart/

但是在我这样做之后：

typings install node express body-parser serve-static express-serve-static-core mime --global

我收到错误：

typings INFO globaldependencies "express" lists global dependencies on "node" that must be installed manually
typings ERR! message Unable to find "node" ("npm") in the registry.
typings ERR! message However, we found "node" for 2 other sources: "dt" and "env"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/node/versions/latest responded with 404, expected it to equal 200
typings ERR! 
typings ERR! cwd /home/universal
typings ERR! system Linux 3.10.17
typings ERR! command "/usr/bin/node" "/usr/bin/typings" "install" "node" "express" "body-parser" "serve-static" "express-serve-static-core" "mime" "--global"
typings ERR! node -v v4.2.4
typings ERR! typings -v 2.0.0
typings ERR! 
typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>

Answer 1

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

您可以使用

安装此版本

npm install -g @angular/cli

来自Angular Cli Wiki的设置说明Universal Rendering

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

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

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

第1步：创建新的Angular Cli App

$ 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”调整为新的location（此示例使用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构建服务器软件包，并在其中的“apps”数组中引用其索引1。角cli.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

Answer 2

您可以使用https://github.com/devCrossNet/angular-cli

中的universal-cli

它是来自angular-cli的一个分支，但是这个工作具有角度通用。

用npm install -g universal-cli进行操纵后使用

创建一个新项目

ung new PROJECT_NAME --universal

然后项目应准备好与

一起服务

cd PROJECT_NAME ung serve

我没有使用现有的angular-cli项目进行测试，但可能ung init --universal可以提供帮助

Answer 3

现在Angular-cli 1.3已经发布，文档已经更新，以及指南here覆盖Universal。有一个指南和示例，可以使用Universal + material 2和Express服务器here。

如何设置Angular cli + Angular universal？

3 个答案: