我正在尝试通过Angular Universal在服务器端渲染中运行Angular应用。
这是Angular Universal生成的JS文件,我刚刚编辑了路径和端口:
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
const server = express();
const distFolder = process.cwd();
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
}
function run() {
const port = process.env.PORT || 4001;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
文件夹结构很好,我在服务器上运行它:
> node .\server.js
Node Express server listening on http://localhost:4001
当我点击该网站时,它只会显示加载,直到超时。
Express在控制台上记录此:
DEPRECATED: DI is instantiating a token "ngmodule_material_carousel_MatCarouselHammerConfig" that inherits its @Injectable decorator but does not provide one itself.
This will become an error in v10. Please add @Injectable() to the "ngmodule_material_carousel_MatCarouselHammerConfig" class.
(node:6896) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
DEPRECATED: DI is instantiating a token "ngmodule_material_carousel_MatCarouselHammerConfig" that inherits its @Injectable decorator but does not provide one itself.
This will become an error in v10. Please add @Injectable() to the "ngmodule_material_carousel_MatCarouselHammerConfig" class.
编辑:
从项目中删除@ngmodule/material-carousel
library后,我仍然收到Buffer
警告,但现在我可以看到该网站。
有一个open issue on github,似乎该库不支持角度通用。
作为一种解决方法,如果您确实要使用该库,则如果您是服务器端,则可以避免渲染轮播。>
component.html
<mat-carousel *ngIf="isBrowser" ></mat-carousel>
component.ts
import { isPlatformBrowser } from '@angular/common';
import {PLATFORM_ID} from '@angular/core';
public isBrowser: boolean;
constructor( @Inject(PLATFORM_ID) public platformId)
{
this.isBrowser = isPlatformBrowser(this.platformId);
}