设置Angular Universal App进行开发

Question

我已经使用Angular-CLI创建了一个项目。（使用命令：）ng new my-angular-universal。然后，我仔细地遵循了https://github.com/angular/angular-cli/wiki/stories-universal-rendering的所有说明

它可以构建--prod并正常工作。但是没有关于如何设置--dev构建并将其与--watchflag一起使用的说明。

我尝试--prod从npm“ scripts”中删除标志，它甚至不在开发模式下运行。它构建良好，但是当我在浏览器中打开它时，这就是我所看到的（直接打印为响应）：

 TypeError: Cannot read property 'moduleType' of undefined
    at C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:7069:134
    at ZoneDelegate.invoke (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:105076:26)
    at Object.onInvoke (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:6328:33)
    at ZoneDelegate.invoke (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:105075:32)
    at Zone.run (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:104826:43)
    at NgZone.run (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:6145:69)
    at PlatformRef.bootstrapModuleFactory (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:7068:23)
    at Object.renderModuleFactory (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:52132:39)
    at View.engine (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:104656:23)
    at View.render (C:\Users\Mikser\documents\git\my-angular-universal\dist\server.js:130741:8)

我使用的npm软件包的版本当前是最新的：

• @角度/ *-@ 5.2。*
• @角度/ cli @ 1.7.3

除了ts-loader之外，由于它无法正常工作，因此不得不对其进行降级：

• ts-loader @ 3.5.0

因此，如果有人对如何进行这项工作有任何信息，将不胜感激！或者，也许您知道一些同时配置了Angular Universal App的项目模板--dev以及其--prod构建和能力--watch？

Answer 1

正如贡献者所指出的，这可能不是最有效和最快的开发方式，但尽管如此，我不想接受解决方法。此外，在单独的服务器上托管前端和后端会带来 CORS 问题，而且我从未计划过我的应用程序在单独的主机上运行，​​我希望它与 API 方法一起在同一主机上运行。

构建的问题--dev是这样的：

使用以下命令构建时：

ng build --app 1 --output-hashing=false（注意没有--prodflag）

AppServerModuleNgFactory结果失踪了./dist-server/main.bundle

我想这与提前（--aot）编译有关，如果您正在构建，这是默认行为--prod. 因此，https://github.com/angular/angular-cli/wiki/stories-universal-rendering中的说明包含仅针对生产构建配置 Express 服务器的说明。由于服务器不需要能够动态渲染 html 模板，因此工作--dev构建命令将是：

ng build --app 1 --output-hashing=false --aot

这摆脱了TypeError: Cannot read property 'moduleType' of undefined

现在来看看这整个混乱的情况：

在单独的命令窗口中运行它们：

1. ng build --watch
2. ng build --app 1 --output-hashing=false --aot --watch
3. webpack --config webpack.server.config.js --progress --colors --watch

为了使服务器在更改时重新启动，您必须安装nodemon包并像这样运行它：

4. nodemon --inspect dist/server（--inspect如果你想用chrome调试服务器）

其他一些重要的东西：

Angular/CLI 有一个命令可以为通用应用程序生成必要的脚手架：

ng generate universal

它生成一个固定版本，main.ts避免客户端角度引导问题： document.addEventListener('DOMContentLoaded', () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); });

我实施后偶然发现的一个问题TransferState