当我运行转换为服务器端渲染应用程序时，我的应用程序运行并呈现服务器端，但似乎没有运行客户端应用程序。页面加载，并为每个路由呈现，但没有（点击）正在工作或任何事件（只有routerLink），没有客户端控制台正在工作。以下是我的应用和服务器模块，应用和服务器主电源，快速服务器和版本
//libs
//import modules
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER, PLATFORM_ID, APP_ID, Inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ColorPickerModule } from 'ngx-color-picker';
import { SortablejsModule } from 'angular-sortablejs';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { MomentModule } from 'angular2-moment';
import { FileUploadModule } from 'ng2-file-upload';
import { CustomFormsModule } from 'ng4-validators';
import { NgSelectModule } from '@ng-select/ng-select';
import { NgPipesModule } from 'angular-pipes';
import { NgxPaginationModule } from 'ngx-pagination';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CgBusyModule } from 'angular-busy2';
import { BrowserCookiesModule } from '@ngx-utils/cookies/browser';
//import { PrebootModule } from "preboot";
//TODO will be fixed shortly
//import { TextareaAutosizeModule } from 'ngx-textarea-autosize';
import { Location, CommonModule, isPlatformBrowser } from '@angular/common';
import * as _ from 'lodash';
//pipes
import { AppPipes } from './pipes/pipes';
//Directives
import { AppDirectives } from './directives/directives';
//Components
import { AppComponents, ModalComponents } from './components/components';
import { AppComponent } from'./app.component';
//Services
import { AppResources } from './components/resources';
import { AppServices } from './services/services';
import { AppLoadService } from '../config/app.load.service';
//HTTP Interceptors
import { APIInterceptor } from './services/api.interceptor';
const interceptors = [
{ provide: HTTP_INTERCEPTORS, useClass: APIInterceptor, multi: true }
];
//States
import { AppRoutingModule } from './app-routing.module';
export function init_app(appLoadService: AppLoadService) {
return () => appLoadService.load();
}
const IMPORTS = [
FormsModule,
CommonModule,
BrowserAnimationsModule,
HttpClientModule,
NgbModule.forRoot(),
ColorPickerModule,
SortablejsModule.forRoot({ animation: 150 }),
FroalaEditorModule.forRoot(),
FroalaViewModule.forRoot(),
Ng2SearchPipeModule,
MomentModule,
FileUploadModule,
AppRoutingModule,
CustomFormsModule,
NgSelectModule,
NgPipesModule,
NgxPaginationModule,
CgBusyModule,
BrowserCookiesModule.forRoot(),
BrowserTransferStateModule,
BrowserModule.withServerTransition({
appId: 'my-application'
}),
];
const DECLARATIONS = [
AppPipes,
AppDirectives,
AppComponents
];
const PROVIDERS = [
AppResources,
AppServices,
interceptors,
Location,
AppLoadService,
{ provide: APP_INITIALIZER, useFactory: init_app, deps: [AppLoadService], multi: true },
];
@NgModule({
declarations: DECLARATIONS,
imports: IMPORTS,
providers: PROVIDERS,
entryComponents: ModalComponents,
bootstrap: [AppComponent]
})
export class AppModule {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string
) {
const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
console.log(`Running ${platform} with appId=${appId}`);
}
}
import { NgModule, } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { BrowserModule } from '@angular/platform-browser';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { ServerCookiesModule } from '@ngx-utils/cookies/server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
ServerTransferStateModule,
ModuleMapLoaderModule,
ServerCookiesModule.forRoot(),
AppModule,
ServerModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
});
export { AppServerModule } from './app/app.server.module';
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import * as express from 'express';
import * as cookieParser from 'cookie-parser';
import * as _ from 'lodash';
import { join } from 'path';
import { readFileSync } from 'fs';
import routes from 'main.routes';
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const http = require('http');
const https = require('https');
const dotenv = require('dotenv');
const compression = require('compression');
const fallback = require('express-history-api-fallback');
const git = require('git-rev');
const request = require('request');
function getMockMutationObserver() {
return class {
observe(node, options) {
}
disconnect() {
}
takeRecords() {
return [];
}
};
}
enableProdMode();
dotenv.config();
const PORT = process.env.PORT || 8080;
const DIST_FOLDER = join(process.cwd(), 'dist');
const app = express();
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html'), 'utf8');
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['MutationObserver'] = getMockMutationObserver();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP, AppServerModule } = require('main.server');
app.engine('html', (_, options, callback) => {
var fullUrl = options.req.protocol + '://' + options.req.get('host') + options.req.originalUrl;
let engine = ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP),
{
provide: 'REQUEST', useValue: (options.req)
},
{
provide: 'RESPONSE', useValue: (options.req.res)
},{
provide: 'serverUrl',
useValue: fullUrl
}
]
});
engine(_, options, callback);
});
app.set('view engine', 'html');
app.set('views', 'src')
app.use(cookieParser(process.env.COOKIE_TOKEN));
app.use(compression());
app.use('/images', express.static('images'));
app.use('/dist', express.static('dist'));
app.use(fallback('index.htm', { root: DIST_FOLDER }));
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
_.each(_.toPairs(routes.config), (route) => {
let method = route[0].split(' ')[0];
let url = route[0].split(' ')[1];
let func = routes[route[1]];
app[method](url, func);
})
app.get('/*', (req, res) => {
res.render('index', { req, res });
});
//SSL termination for heroku is handled by the load balancer
//but locally is handled by node
if(!process.env.APP_ENV || (process.env.APP_ENV === 'feature')){
var credentials = {
key: readFileSync(join(process.cwd(), 'ssl', 'certs', 'server', 'privkey.pem')),
cert: readFileSync(join(process.cwd(), 'ssl', 'certs', 'server', 'fullchain.pem')),
ca: readFileSync(join(process.cwd(), 'ssl', 'certs', 'ca', 'my-root-ca.crt.pem'))
};
var httpsServer = https.createServer(credentials, app);
httpsServer.listen(process.env.PORT || 8080, () => {
console.log('application started in dev mode');
});
} else {
var httpServer = http.createServer(app);
httpServer.listen(process.env.PORT || 8080, () => {
console.log('application started in prod mode');
});
}
答案 0 :(得分：0)
事实证明，我所基于的一个通用启动器中有一个拼写错误，但事实证明我将渲染视图指向了错误的目录。然后有理由为什么服务器端正在渲染，但后来没有客户端被启动，因为我正在渲染的index.html是浏览器dist（所以没有捆绑包括）。更改的具体行是
app.set('view engine', 'html');
app.set('views', 'src')
应该是
app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'))