AngularUniversal中动态元标题未在视图页面源中显示
在 Angular Universal 中，动态元标题使用 MetaService 和 ActivatedRoute 设置。但是，当使用 Angular Universal 启用服务器端渲染时，动态元标题可能无法在视图页面源中显示。要解决此问题，可以使用以下方法：
1.安装 @nguniversal/module-map-ngfactory-loader 包以使用Lazy Loading
npm install @nguniversal/module-map-ngfactory-loader --save
2.修改 webpack.server.config.js 文件
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader'); const { ROUTES } = require('./static.paths'); const { existsSync } = require('fs'); const { join } = require('path');
....
module.exports = {
....
resolve: {
modules: [
join(process.cwd(), 'dist'),
'node_modules'
]
},
entry: {
server: './server.ts'
},
target: 'node',
output: {
path: join(process.cwd(), 'dist', 'server'),
filename: '[name].js'
},
....
plugins: [
new webpack.ContextReplacementPlugin(
/angular(\|/)core/,
path.join(__dirname, 'src'), {}
),
new webpack.ContextReplacementPlugin(
/@angular(\|/)core(\|/)fesm5/,
path.join(__dirname, 'src'), {}
),
new webpack.ContextReplacementPlugin(
/ngx(-|/)(module|directive)/,
path.join(__dirname, 'src'), {}
),
new webpack.IgnorePlugin(/^vertx$/),
new webpack.IgnorePlugin(/^pg-native$/),
new webpack.IgnorePlugin(/^buffertools$/),
new webpack.IgnorePlugin(/^mysql$/),
new webpack.IgnorePlugin(/^pg-query-stream$/)
],
externals: [
/node_modules/,
function (context, request, callback) {
if (request.match(/^(?!.|/).+/)) {
callback(null, commonjs ${request});
} else {
callback();
}
}
]
};
3.修改 app.server.module.ts 文件
import { NgModule } from '@angular/core'; import { ServerModule, ServerTransferStateModule } 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,