如何设置 Angular cli + Angular 通用？

Posted

技术标签:

【中文标题】如何设置 Angular cli + Angular 通用？【英文标题】：How to set up Angular cli + Angular universal? 【发布时间】：2017-04-27 03:49:58 【问题描述】：

任何人都有使用 Angular cli 项目安装 Angular Universal 的经验？

我尝试遵循本指南：

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>

【问题讨论】：

【参考方案1】：

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

您可以使用

安装此版本

npm install -g @angular/cli

来自 Universal Rendering 的 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 步：为通用渲染准备您的应用

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

src/app/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/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 来构建它

为您的通用捆绑包创建主文件。这个文件只需要导出你的 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”下有一个数组。将您的客户端应用程序的配置复制到那里，并将其作为新条目粘贴到数组中，并将附加键“平台”设置为“服务器”。

然后，删除“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 构建服务器包，在 .角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

【讨论】：

谢谢伙计，这实际上对我有用......终于......经过长时间的努力......在你的帖子中缺少 npm install @nguniversal/express-engine --save ！ ;) 那很好，一开始我玩了一会儿才让它与快递服务器一起工作。因为他们实际上并没有提供那部分，这是一个耻辱。谢谢，我将@nguniversal/express-engine添加到服务器的安装部分。 我还在这里创建了一个最小/骨架 Angular Universal 应用程序。 github.com/gopivignesh/angular-universal。此源代码可以作为构建新的 Angular 通用项目的良好基础。 我在构建项目时出错。 “找不到本地工作区文件（'angular.json'）。” @KamuranSönecek 这与 v6 中的新 @angular/cli 有关，他们将配置重命名为 angular.json。你跑ng update了吗？我在这里的回答将有助于***.com/questions/41403810/… 你应该运行ng update @angular/cli --migrate-only --from=1【参考方案2】：

你可以使用来自https://github.com/devCrossNet/angular-cli的universal-cli

它是 angular-cli 的一个分支，但它适用于 Angular Universal。

在您使用npm install -g universal-cli 安装后 使用

创建一个新项目

ung new PROJECT_NAME --universal

那么该项目应该可以使用了

cd PROJECT_NAME ung serve

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

【讨论】：

角通用是相当不成熟的。我也在等待稳定发布。 @VinayPandya ，你有没有找到任何方法在 cli 项目中使用角度通用。任何输入都会有所帮助。 是的，universal-cli 项目github.com/devCrossNet/universal-cli，它结合了 angular-cli 和通用项目，但你可以在 package.json 中看到主要问题，它使用的是 angular 2.2.3。 angular 2 最新版本是 2.4.10。您可能会遇到一些错误。【参考方案3】：

现在 Angular-cli 1.3 已发布，文档已更新以涵盖 Universal，并附有指南 here。有一个指南和示例，可以让这一切与 Universal + material 2 和 Express 服务器 here 一起使用。

【讨论】：

以上是关于如何设置 Angular cli + Angular 通用？的主要内容，如果未能解决你的问题，请参考以下文章

Angular CLI 在库构建中包含样式表 scss 文件

Angular 8 with Ivy 如何验证它的使用

@angular-cli 安装失败，请求被弃用@2.88.2：请求已被弃用（mac）

使用 Nginx 为 Angular2 CLI 构建的应用程序提供服务会抛出 404、403

如何设置 Angular cli + Angular 通用？

Angular Cli 警告：不推荐使用选项“entryComponent”：从带有 Ivy 的 9.0.0 版开始，不再需要 entryComponents