Angular编译器ngc卡住而没有任何错误输出

时间:2017-10-16 01:07:44

标签: angular angular-cli serverside-rendering angular-universal

描述

您好 我正在测试角度通用应用程序。我确实在小项目中证明了概念,但是当我在我的主项目中进行相同的测试时,它仍然处于编译的中间。

所以我有两个主要阶段。构建和编译。 对于构建,我使用以下命令:

ng build --prod

在此过程之后一切都很好。

要编译我的项目,我使用以下命令:

ngc

控制台刚刚停留在这里:

> myProject@0.0.5 ngc E:\WorkSpase\myProject\browser
> ngc

之后什么都没发生。

我已经尝试了什么

1.TypeScript编译

tsc

结果:我遇到了同样的问题

2.将调试选项添加到tsconfig.json,希望我会看到一些额外的日志输出,但没有。

 "angularCompilerOptions": {
   "debug": true,
   "genDir": "./target/classes/ngfactory",
   "entryModule": "./src/app/components/app.module#AppModule"
 }

结果:没什么新的。

要点:

所以我无法向前迈进,因为我不知道卡住的原因。

我将不胜感激任何帮助。

1 个答案:

答案 0 :(得分:0)

我认为你根本不需要使用ngc。当我在角度普遍中挣扎时,这个种子项目确实有帮助:https://github.com/angular/universal-starter

它有2个版本,一个用于手动webpack配置,一个用于角度cli项目。

总的来说,对于CLI项目,您需要:

  1. 创建AppServerModule,将从ServerModule导入@angular/platform-server

  2. 创建将导出main.server.ts的{​​{1}}文件。

  3. 创建AppServerModule文件 - 该文件将用于引导服务器端。该文件应如下所示:https://github.com/angular/universal-starter/blob/master/cli/server.ts

  4. 创建将为服务器端配置打字稿配置的server.ts文件 - 在此您需要指定您希望tsconfig.server.json个模块作为输出。

  5. 将第二个应用添加到commonjs文件(.angular-cli.json数组),该文件将包含不同的apps文件夹 - 此文件夹将用于服务器端呈现。在此应用中,您还会将outDir文件标记为main.server.ts,将main文件标记为tsconfig.server.json

  6. 然后还有一件事需要做,因为angular cli(https://github.com/angular/angular-cli/issues/7200)的一个问题 - 创建tsconfig文件,您将用它来重新编译服务器端代码。该文件可能如下所示:https://github.com/angular/universal-starter/blob/master/cli/webpack.server.config.js

  7. 现在您应该准备好了,您需要使用webpack.server.config.js构建两个cli应用。

  8. 构建完成后,使用服务器端配置运行webpack:ng build && ng build --prod --app 1 --output-hashing=false(您需要为此全局安装webpack --config webpack.server.config.js,或者调整其二进制路径)。

  9. 最后使用webpack启动节点服务器。

  10. 最小node dist/server应如下所示:

    AppServerModule

    import {NgModule} from '@angular/core'; import {ServerModule} from '@angular/platform-server'; import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader'; import {AppModule} from './app.module'; import {AppComponent} from './app.component'; @NgModule({ imports: [ // The AppServerModule should import your AppModule followed // by the ServerModule from @angular/platform-server. AppModule, ServerModule, ModuleMapLoaderModule, ], // Since the bootstrapped component is not inherited from your // imported AppModule, it needs to be repeated here. bootstrap: [AppComponent], }) export class AppServerModule {} 应如下所示:

    tsconfig.server.json