您好 我正在测试角度通用应用程序。我确实在小项目中证明了概念,但是当我在我的主项目中进行相同的测试时,它仍然处于编译的中间。
所以我有两个主要阶段。构建和编译。 对于构建,我使用以下命令:
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"
}
结果:没什么新的。
所以我无法向前迈进,因为我不知道卡住的原因。
我将不胜感激任何帮助。
答案 0 :(得分:0)
我认为你根本不需要使用ngc
。当我在角度普遍中挣扎时,这个种子项目确实有帮助:https://github.com/angular/universal-starter
它有2个版本,一个用于手动webpack配置,一个用于角度cli项目。
总的来说,对于CLI项目,您需要:
创建AppServerModule
,将从ServerModule
导入@angular/platform-server
。
创建将导出main.server.ts
的{{1}}文件。
创建AppServerModule
文件 - 该文件将用于引导服务器端。该文件应如下所示:https://github.com/angular/universal-starter/blob/master/cli/server.ts
创建将为服务器端配置打字稿配置的server.ts
文件 - 在此您需要指定您希望tsconfig.server.json
个模块作为输出。
将第二个应用添加到commonjs
文件(.angular-cli.json
数组),该文件将包含不同的apps
文件夹 - 此文件夹将用于服务器端呈现。在此应用中,您还会将outDir
文件标记为main.server.ts
,将main
文件标记为tsconfig.server.json
。
然后还有一件事需要做,因为angular cli(https://github.com/angular/angular-cli/issues/7200)的一个问题 - 创建tsconfig
文件,您将用它来重新编译服务器端代码。该文件可能如下所示:https://github.com/angular/universal-starter/blob/master/cli/webpack.server.config.js。
现在您应该准备好了,您需要使用webpack.server.config.js
构建两个cli应用。
构建完成后,使用服务器端配置运行webpack:ng build && ng build --prod --app 1 --output-hashing=false
(您需要为此全局安装webpack --config webpack.server.config.js
,或者调整其二进制路径)。
最后使用webpack
启动节点服务器。
最小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