node.js – 为开发设置Angular Universal App

2019年7月28日 219次阅读

我用Angular-CLI创建了一个项目. (使用命令：ng new my-angular-universal).

然后我仔细地按照
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,我偶然发现了一个问题

点赞