angular4服务器端渲染问题
我正在尝试使用已集成到平台服务器的通用服务器将角色4（4.0.3）应用程序添加到服务器端的渲染中。 我使用这个项目为例：https：//github.com/FrozenPandaz/ng-universal-demo，同时我也遵循这个指南：https：//www.softwarearchitekt.at/post/2017/03/07/server侧的渲染与 - 角4.aspx
我的app.server.module，位于app / server文件夹中：
import {AppModule} from "../app.module";
import {ServerModule} from "@angular/platform-server";
import {NgModule} from "@angular/core";
import {AppComponent} from "../app.component";
import {BrowserModule} from "@angular/platform-browser";
import {APP_BASE_HREF} from '@angular/common';
import {routing} from "../app.routes";
@NgModule({
bootstrap: [AppComponent],
imports: [
BrowserModule.withServerTransition({
appId: 'kassir'
}),
ServerModule,
AppModule,
routing
],
providers: [
{provide: APP_BASE_HREF, useValue: "/site/"}
]
}
)
export class ServerAppModule {
}
tsconfig.server.json：
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmit": true,
"noEmitHelpers": true,
"importHelpers": true,
"strictNullChecks": false,
"lib": [
"es2015",
"dom"
],
"typeRoots": [
"node_modules/@types"
],
"types": [
"hammerjs",
"node"
]
},
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"angularCompilerOptions": {
"entryModule": "./app/server/app.server.module#ServerAppModule"
},
"exclude": [
"node_modules",
"dist",
"src/**/*.spec.ts",
"src/**/*.e2e.ts",
"../src/main.browser.aot.ts"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
服务器的webpack配置，然后合并到公共配置中：
const ngtools = require('@ngtools/webpack');
const path = require('path');
const ngcWebpack = require('ngc-webpack');
const helpers = require('./helpers');
module.exports = function(env){
return {
entry:{
"main": helpers.root('./src/main.server.ts')
},
output: {
path: path.join(process.cwd(), "dist/server"),
filename: "[name].server.bundle.js",
//chunkFilename: "[id].server.chunk.js"
},
node: {
fs: 'empty'
},
plugins: [
new ngtools.AotPlugin({
"entryModule": helpers.root('/src/app/server/app.server.module.ts#ServerAppModule'),
"exclude": [],
"tsConfigPath": helpers.root("./tsconfig.server.json"),
"skipCodeGeneration": true
}),
],
target: 'node',
module: {
rules: [
{
test: /.ts$/,
loaders: ['@ngtools/webpack', 'angular2-template-loader']
},
]
}
}
};
一切都建好了，main.server.bundle.js被生成，但是当我启动它
nodemon dist/server/main.server.bundle.js
即使使用空服务器，我也能得到干净的退出：
import * as express from 'express';
var server = express();
server.listen(8080, function (err) {
if (err) {
console.log(err);
} else {
console.log("server started at port 8080");
}
});
它应该会触发成功日志消息或错误，但我看不到它们中的任何一个。 我也尝试用node命令启动它，但没有成功。
希望对这个问题有任何帮助。
PS我见过很多具有通用性的例子，他们都使用aot作为服务器端，然后导入server.ts中：
import { AppServerModuleNgFactory } from './aot/src/app/app.server.module.ngfactory';
有没有办法不生成它？
链接地址: http://www.djcxy.com/p/31381.html