然后我仔细地按照 https://github.com/angular/angular-cli/wiki/stories-universal-rendering的所有指示
它为–prod构建并且工作正常.但是没有关于我如何设置–dev构建并使用–watch标志服务的说明.
我尝试从npm“scripts”中删除–prod标志,它甚至不以dev模式运行.它建立得很好但是当我在浏览器中打开它时,这就是我所看到的(直接打印到响应)：
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包的版本目前是最新的：
> @ angular / * – @ 5.2.*
> @ angular / cli @ 1.7.3
除了ts-loader之外,由于它不起作用,不得不降级它：
> ts-loader @ 3.5.0
因此,如果任何人有任何关于如何使这项工作的信息,将非常感谢！或者您可能知道一些项目模板,其中Angular Universal App配置为–dev和–prod构建以及–watch的能力吗？
正如贡献者指出的那样,它可能不是最有效和最快速的开发方式,但我不想接受变通方法.此外,在不同的服务器上正面和背面托管会带来CORS问题,我从未计划过我的应用程序在不同的主机上运行,我希望它与API方法一起在同一主机上运行.-dev build的问题是这样的：
使用以下命令构建时：
ng build –app 1 –output-hashing = false(请注意,没有–prod标志)
在./dist-server/main.bundle中缺少AppServerModuleNgFactory
我想这与提前( – aot)编译有关,如果你正在构建–prod,这是默认行为.因此,https://github.com/angular/angular-cli/wiki/stories-universal-rendering中的说明包含仅为生产版本配置快速服务器的说明.由于不需要服务器能够动态呈现html模板,因此工作–dev构建命令将是：
ng build –app 1 –output-hashing = false –aot
这摆脱了TypeError：无法读取未定义的属性’moduleType’
现在来看这整个烂摊子：
在单独的命令窗口中运行它们：
> ng build –watch
> ng build –app 1 –output-hashing = false –aot –watch
> webpack –config webpack.server.config.js –progress –colors –watch
并且要使服务器在更改时重新启动,您必须安装nodemon包并按如下方式运行它：
> nodemon –inspect dist / server( – 如果你想用chrome调试服务器,则为–inspect)
其他一些重要的东西：
Angular / CLI有一个命令来为通用应用程序生成必要的脚手架：
ng生成普遍
它会生成一个固定版本的main.ts,以避免client angular bootstrap issue：
document.addEventListener(‘DOMContentLoaded’,()=> {
platformBrowserDynamic().bootstrapModule(的AppModule)
.catch(err => console.log(err));
});
一旦我实现了TransferState,我偶然发现了一个问题