Angular Universal 不在路由器插座内呈现内容
Posted
技术标签:
【中文标题】Angular Universal 不在路由器插座内呈现内容【英文标题】：Angular Universal not rendering content inside of router-outlet 【发布时间】：2019-10-15 12:54:44 【问题描述】：我正在尝试通过此链接https://angular.io/guide/universal 使用 Angular Universal 使用 s-s-r 渲染我的 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"
server.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 找到准确的文档，任何帮助将不胜感激！谢谢
【问题讨论】：
能否将根路由添加到代码中？ @Brandon 你这是什么意思？你想看看我拥有的 app.routing.ts 文件的示例吗？ 是的。我很好奇您在哪些路由不渲染时遇到问题，这些路由是否延迟加载，它们是否有不同的路由器插座等。 @Brandon 我更新了主体，所以它现在就在那里。我真的在尝试使用/events/:id 路由进行测试
你们是怎么解决这些问题的？我遇到了同样的问题，当我构建角度通用应用程序时，app-root 内的加载程序无法正常工作。建议将不胜感激。谢谢！
【参考方案1】：
我对服务器端渲染没有任何经验，但 Angular 应用程序部署到服务器时的一个常见问题是子目录的解析。基本上根会加载，但在通过 url 访问时，在角度路由中处理的所有其他项目将不起作用。 Web 服务器正在寻找那些物理目录，而不是允许 Angular 路由将页面定向到虚拟目录。如果这听起来像您的问题，那么有一些选项概述了here
【讨论】：
不知道是不是这样。通过它路由时它运行得非常好。当您检查页面源以查看服务器端呈现的代码时，它不包含任何路由模板代码。以上是关于Angular Universal 不在路由器插座内呈现内容的主要内容，如果未能解决你的问题，请参考以下文章