angular - Angular Universal 得到“No NgModule metadata found for '[object Object]'”错误
问题描述
我刚刚将我的 Angular 应用程序从 5 更新到 7。在 v. 5 中,我能够很好地进行服务器端渲染 (SSR)。
更新后,SSR 失败并出现以下错误(构建过程正常):
Error: No NgModule metadata found for '[object Object]'.
at NgModuleResolver.resolve (/app/node_modules/@angular/compiler/bundles/compiler.umd.js:20015:27)
at CompileMetadataResolver.getNgModuleMetadata (/app/node_modules/@angular/compiler/bundles/compiler.umd.js:18657:47)
at JitCompiler._loadModules (/app/node_modules/@angular/compiler/bundles/compiler.umd.js:26060:55)
at JitCompiler._compileModuleAndComponents (/app/node_modules/@angular/compiler/bundles/compiler.umd.js:26041:40)
at JitCompiler.compileModuleAsync (/app/node_modules/@angular/compiler/bundles/compiler.umd.js:26001:41)
at CompilerImpl.compileModuleAsync (/app/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js:202:35)
at /app/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:109:25
at new ZoneAwarePromise (/app/node_modules/zone.js/dist/zone-node.js:910:29)
at getFactory (/app/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:95:12)
at View.engine (/app/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:74:13)
鉴于这个SO 问题,我没有使用"bundleDependencies": "all"
,我什至尝试在 中明确说明none
,angular.json
但它并没有解决问题。
我正在使用此配置angular.json
:
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json",
"bundleDependencies": "none"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "none"
}
}
}
我也懒加载几乎所有模块,如果这很重要(它在第 5 版中没有):
{ path: 'private', loadChildren: '../private/private.module#PrivateModule', canActivate: [AuthGuardService], data: { state: 'private' } as RouteDataValues },
{
path: '', component: PageWithFooterComponent, children: [
{ path: 'about', loadChildren: '../about/about.module#AboutModule', data: { state: 'about' } as RouteDataValues },
{ path: 'instructions', loadChildren: '../instructions/instructions.module#InstructionsModule', data: { state: 'instructions' } as RouteDataValues },
{ path: '', component: HomeComponent, data: { state: 'home' } as RouteDataValues },
{ path: 'home', redirectTo: '/' },
{ path: '**', redirectTo: '/' }
]
}
我的服务器:
import * as ngUniversal from '@nguniversal/express-engine';
import * as compression from 'compression';
import * as express from 'express';
import * as path from 'path';
import * as appServer from '../dist/server/main.js';
// tslint:disable-next-line:no-require-imports
require('zone.js/dist/zone-node');
const ROOT = path.resolve();
const app = express();
// Server-side rendering
function angularRouter(req, res): void {
res.render('index', { req, res });
}
// Enable compression
app.use(compression());
// Root route before static files, or it will serve a static index.html, without pre-rendering
app.get('/', angularRouter);
// Serve the static files generated by the CLI (index.html, CSS? JS, assets...)
app.use(express.static('client'));
// Configure Angular Express engine
app.engine('html', ngUniversal.ngExpressEngine({ bootstrap: appServer.AppServerModuleNgFactory }));
app.set('view engine', 'html');
app.set('views', path.join(ROOT, 'client'));
app.listen(3000, () => {
console.log('Listening on http://localhost:3000');
});
知道什么不起作用吗?
解决方案
缺少多个部分,这确实是延迟加载模块的问题。为了解决这个问题,我将我的服务器与这台服务器进行了比较。
添加到我的服务器的代码:
import 'reflect-metadata';
import 'zone.js/dist/zone-node';
...
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
...
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('../dist/server/main.js');
...
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
推荐阅读
- python - 如何修复 RuntimeWarning:协程
- ibm-midrange - DSPUSRPRF UPCHGD 字段
- python - 关于根据Flask_restx的API对象声明位置路由函数的问题
- ethereum - 我们有两种方式来启动一个 web3 实例,我们选择哪一种更好呢?
- python - 如何在 Python 3.8 的 dbf 文件中写入/附加列?
- algorithm - 在锦标赛排序算法中排序八个数字的最少比较时间是多少?(考虑坏情况)
- amazon-web-services - 适用于 USER_PASSWORD_AUTH 流的 AWS Cognito 开发工具包
- amazon-web-services - EC2 最便宜的地区
- api - Shopware 6 使用 API 的产品变体图像上传问题
- javascript - 使用 getStaticPaths 和 getStaticProps 在 nextjs 中使用 Airtable 中的表中的数据进行分页