angular - 如何使 Angular Ivy + Angular Universal 工作？

Question

当我尝试在我的项目中使用 Ivy + Angular Universal 时遇到错误。

仅当我在 Ivy 模式下使用 Angular 时才会出现此错误(当我在 tsconfig.app.json 中将 enableIvy 设置为 false 时，我可以成功构建我的应用程序) .

以下是重现我的问题的步骤:

<强>1。与 Ivy 的新项目

ng 新测试 Angular --enableIvy

<强>2。添加 Angular 通用

ng add @nguniversal/express-engine --clientProject test-angular

<强>3。当我进行 ng build 时，出现错误

节点中的错误不存在:“path_to/node_modules/@nguniversal/express-engine”

我的 ng --version 输出是:

Angular CLI: 8.1.0
Node: 10.15.3
OS: win32 x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.0
@angular-devkit/build-angular              0.801.0
@angular-devkit/build-optimizer            0.801.0
@angular-devkit/build-webpack              0.801.0
@angular-devkit/core                       8.1.0
@angular-devkit/schematics                 8.1.0
@ngtools/webpack                           8.1.0
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.1.0
@schematics/update                         0.801.0
rxjs                                       6.4.0
typescript                                 3.4.5
webpack                                    4.35.2

如果我删除 main.server.ts 文件(第 2 步中生成的文件)中的这些行

export { ngExpressEngine } from "@nguniversal/express-engine";
export { provideModuleMap } from "@nguniversal/module-map-ngfactory-loader";

命令 ng build、ngserve 有效，但我仍然可以使用 SSR(npm runserve:ssr 失败并出现 TypeError :provideModuleMap 不是一个函数，因为我猜我已经删除了这一行...)。

谢谢=)

Answer 1

我们刚刚发布了对 Ivy 和 NG9 的官方支持(请注意，ng9 仍处于 rc(候选版本)中，因此在最终版本发布之前 Angular 可能会发生一些变化)。

您可以在 Trilon 博客上阅读完整的文章和公告:Angular Universal v9: What's New?

总结一下设置:

• 确保您的 Angular 应用程序已升级到最新的 v9 (RC)

• 安装最新的 (RC) Universal 原理图 ng add @nguniversal/express-engine@next

• 如果您是通过“ng update”从现有的通用原理图 v8(express-engine 或 hapi-engine)升级而来，即:ng update @nguniversal/express-engine —-next