本文基于上一篇Angular5的文章继续进行开发,上文中讲了搭建Angular5有道翻译的过程,以及遇到问题的解决方案。
纱添加@angular/平台服务器表达
纱添加- d ts-loader webpack-node-externals npm-run-all
这里需要注意的是@angular/平台服务器的版本号最好根据当前角版本进行安装,如:@angular/platform-server@5.1.0,避免与其它依赖有版本冲突。
创建文件:src/app/app.server.module.ts
从“@angular进口{NgModule}/核心”
从“@angular/平台服务器”进口{ServerModule}
从“进口{AppModule}。/app.module '
从“进口{AppComponent}。/app.component '
@NgModule ({
进口:[
AppModule,
ServerModule
]，
引导:[AppComponent],
}）
出口类AppServerModule {}
之前
更新文件:src/app/app.module.ts
从“@angular/platform-browser”进口{BrowserModule}
从“@angular进口{NgModule}/核心”//?
从“进口{AppComponent}。/app.component '//?
@NgModule ({
声明:[
AppComponent//?
]，
进口:[
BrowserModule。withServerTransition ({appId:‘udao’})//?
]，
供应商:[],
引导(AppComponent):
}）
出口类AppModule {}
之前
我们需要一个主文件来导出服务端模块
创建文件:src/main.server.ts
出口{AppServerModule}”。/app/app.server.module '
之前
现在来更新@angular/cli的配置文件.angular-cli.json
｛
“美元模式”:“。/node_modules/@angular/cli/lib/config/schema.json”,
"项目":{
“名称”:“udao”
},
“应用程序”(
｛
“根”:“src”,
:“outDir dist/浏览器”,
“资产”:(
“资产”,
“ico”位于
］//?
},
｛
“平台”:“服务器”,
“根”:“src”,
:“outDir dist/服务器”,
“资产”:[],
“指数”:“index . html”,
“主要”:“main.server.ts”,
“测试”:“test.ts”,
:“tsconfig tsconfig.server.json”,
:“testTsconfig tsconfig.spec.json”,
“前缀”:“应用程序”,
“脚本”:[],
:“environmentSource环境/environment.ts”,
"环境":{
“开发”:“环境/environment.ts”,
“刺激”:“环境/environment.prod.ts”
｝
｝
］//?
｝
之前
上面的//硎÷缘?但是json没有注释一说,看着怪怪的....
当然.angular-cli。json的配置不是固定的,根据需求自行修改
我们需要为服务端创建tsconfig配置文件:src/tsconfig.server.json
｛
“扩展”:“. ./tsconfig.json”,
" compilerOptions ": {
“outDir”:“. ./out-tsc/应用程序”,
“baseUrl”:“。/?
“模块”:“commonjs”,
“类型”:[]
},
“排除”:(
“test.ts”,
“* */* .spec.ts”,
“server.ts”
]，
" angularCompilerOptions ": {
:“entryModule app/app.server.module # AppServerModule”
｝
｝
之前
然后更新:src/tsconfig.app.json
｛
“扩展”:“. ./tsconfig.json”,
" compilerOptions ": {
“outDir”:“. ./out-tsc/应用程序”,
“baseUrl”:“。/?
“模块”:“es2015”,
“类型”:[]
},
“排除”:(
“test.ts”,
“* */* .spec.ts”,
“server.ts”
］
｝
