angular - Angular Universal 未在路由器插座内呈现内容
问题描述
我正在尝试通过此链接https://angular.io/guide/universal使用 Angular Universal 使用 SSR 渲染我的 Angular 7 应用程序。我以为我可以从那里开始一切工作,因为我能够查看页面源代码并看到呈现到页面的 app.component 内部的所有内容。但是,我无法呈现router-outlet
标签内的任何路线
我只是简单地剥离了我的应用程序,以完全按照文档中的说明进行操作。我在那里读到了一些关于确保ModuleMapLoaderModule
在 app.server.module 内部的内容,以便延迟加载工作。这确实是 angular-cli 命令的默认设置,所以我不确定发生了什么。
app.server.module
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule,
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
tsconfig.server.json
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "../out-tsc/app-server",
},
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
}
服务器.ts
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { join } from 'path';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'browser');
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render(join(DIST_FOLDER, 'index.html'), { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
渲染输出
<html lang="en">
<head>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ...Rendered CSS styles... -->
<body>
<app-root _nghost-sc0="" ng-version="7.2.15">
<!-- ...Header code that has been rendered... -->
<router-outlet _ngcontent-sc0=""></router-outlet> <!-- This is where I am expecting the content of the route to be -->
<!-- ...Footer code that has been rendered... -->
</app-root>
</body>
</html>
app.routing.module.ts
// Angular Imports
// Pages
// ...Page Imports..
const routes: Routes = [
{ path: '', component: HomePageComponent, pathMatch: 'full' },
{ path: 'events/:id', component: EventDetailPageComponent }, // This is the detail page I am testing with
{ path: 'unknown-error', component: UnknownErrorPageComponent },
{ path: '404', component: NotFoundPageComponent },
{ path: '**', redirectTo: '404' }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes),
],
exports: [
RouterModule,
]
})
export class AppRoutingModule { }
尝试为 Angular 7 找到准确的文档时,我的运气基本上为零,任何帮助将不胜感激!谢谢
解决方案
我对服务器端渲染没有任何经验,但是 Angular 应用程序部署到服务器时的一个常见问题是子目录的解析。基本上根会加载,但在通过 url 访问时,角度路由中处理的所有其他项目将不起作用。Web 服务器正在寻找那些物理目录,而不是允许 Angular 路由将页面定向到虚拟目录。如果这听起来像您的问题,这里列出了一些选项
推荐阅读
- laravel-5 - 在 laravel 5 / vue app2 中切换语言
- gmail - 如何使用 gmail api 使用 3 个不同的 gmail 地址向同一用户发送 3 封邮件
- r - R数据表从不同的行添加列
- dataframe - 在比较 pyspark 中的两个数据帧时,如何找出新的内容和发生的变化?
- python - python - 如何连接列表中的两个索引
- ios - Deinit 从未调用自定义 UIView
- shell - 测试字符串外壳中现有的子字符串
- java - 如何在 java rest 模板客户端中修改部分 Content-Disposition
- python - 基于多个条件创建列的清洁方法
- python - 使用 WHILE 循环时如何解决 JSONDecodeError