角色4应用程序的服务器端渲染不起作用
我有一个角度的应用程序，需要在服务器上呈现给浏览器提供html。
app.module.ts：
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app
1 --output-hashing=false",
"build:prerender": "npm run build:client-and-server-bundles && npm run
webpack:server && npm run generate:prerender",
"build:ssr": "npm run build:client-and-server-bundles && npm run
webpack:server",
"generate:prerender": "cd dist && node prerender",
"webpack:server": "webpack --config webpack.server.config.js --progress --
colors",
"serve:prerender": "cd dist/browser && http-server",
"serve:ssr": "node dist/server"
},
"dependencies": {
"@agm/core": "*",
"@angular/animations": "^5.0.0-rc.8",
"@angular/cdk": "*",
"@angular/common": "^5.0.0-rc.8",
"@angular/compiler": "^5.0.0-rc.8",
"@angular/core": "^5.0.0-rc.8",
"@angular/forms": "^5.0.0-rc.8",
"@angular/http": "^5.0.0-rc.8",
"@angular/material": "*",
"@angular/platform-browser": "^5.0.0-rc.8",
"@angular/platform-browser-dynamic": "^5.0.0-rc.8",
"@angular/platform-server": "^5.0.0-rc.8",
"@angular/router": "^5.0.0-rc.8",
"@ng-bootstrap/ng-bootstrap": "*",
"@nguniversal/express-engine": "^5.0.0-beta.4",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.4",
"angular2-jwt": "^0.2.3",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"hammerjs": "*",
"moment": "*",
"moment-timezone": "*",
"ng2-cache": "*",
"ngx-bootstrap": "^1.9.3",
"primeng": "^4.0.0-rc.2",
"regexp-replace-loader": "^1.0.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
}
main.server.ts
export { AppServerModule } from './app/app.server.module';
app.server.module.ts
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: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
tsconfig.server.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
// Set the module format to "commonjs":
"module": "commonjs",
"types": [
"node"
]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
// Add "angularCompilerOptions" with the AppServerModule you wrote
// set as the "entryModule".
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
npm run build：ssr && npm run serve：ssr抛出错误：
server.js错误
C： savaari_code_prerender dist server.js：201420 __metadata（“design：paramtypes”，[Event]），^
ReferenceError：在Object.defineProperty.value的webpack_require （C： savaari_code_prerender dist server.js：20：30）上的Object.c（C： savaari_code_prerender dist server.js：201420：38） （C： savaari_code_prerender dist server.js：20：30）在webpack_require （C： savaari_code_prerender dist server.js：184493：10）
当我将java脚本代码放入server.js时，它得到了解决
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* tslint:disable:variable-name */
exports.MouseEvent = global.MouseEvent;
exports.KeyboardEvent = global.KeyboardEvent;
});
之后，我得到这个错误：
错误
SyntaxError: Unexpected token export
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
请帮忙
链接：
https://github.com/swimlane/ngx-datatable/blob/master/src/events.ts
https://github.com/valor-software/ngx-bootstrap/issues/61
https://github.com/StefH/AngularTestPrimeNG/commit/a848f3d384a7a4af6f268c3414267de6326c9e48#diff-c2aa49053d7fafcd05f8ccf69ba3816d
https://github.com/edcarroll/ng2-semantic-ui/issues/185 https://github.com/primefaces/primeng/issues/2167
链接地址: http://www.djcxy.com/p/31335.html