如何让Angular Ivy + Angular Universal一起工作？

Question

当我尝试在我的项目中使用Ivy + Angular Universal时，出现错误。

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

以下是重现问题的步骤：

1. 新建一个Ivy项目

ng new test-angular --enableIvy

2. 添加Angular Universal

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

3. 当我执行ng build时，出现错误

ERROR in Node does not exist: "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和ng serve可行，但我仍然不能使用SSR（npm run serve:ssr失败了，因为provideModuleMap is not a function，我猜是因为我删除的那一行导致的...）。

谢谢 =)

- Guillaume M

---

这将在Angular 9中提供，他们在ng-conf 2019上提到Ivy处于opt-preview状态，无法与SSR一起使用。 - overthesanity

是的，我已经创建了一个GitHub问题：链接。它现在在Angular 9上运行正常。 - Guillaume M

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` - 如果您是从现有的Universal图纸v8（express-engine或hapi-engine）升级而来，请通过“ng update”进行升级，例如：`ng update @nguniversal/express-engine —-next`

- Mark Pieszak - Trilon.io

---

我在将我的应用程序更新到A9后遇到了相同的问题。 - Carlos Torrecillas