Angular Universal不能渲染路由出口内的内容

Question

Angular Universal不能渲染路由出口内的内容

angularangular7angular-universaluniversalserver-side-rendering

7

我尝试使用Angular Universal从这个链接https://angular.io/guide/universal来呈现我的Angular 7应用程序的SSR。我认为我已经按照文档的指导完成了一切，因为我能够查看页面源代码并看到渲染到页面中的app.component中的所有内容。但是，我无法呈现router-outlet标签内的任何路由。

我已经将我的应用简化为完全遵循文档所说的做法。我在文档中读到有关确保ModuleMapLoaderModule位于app.server.module中以使懒加载正常工作的内容。这在angular-cli命令用于universal时是默认的，所以我不知道出了什么问题。

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的准确文档，却毫无进展，如有帮助将不胜感激！谢谢

- Midevilworm

1

是的。我很好奇你遇到了哪些路由无法渲染，以及这些路由是否是惰性加载的，它们是否有不同的路由出口等等。 - Brandon Taylor

好的，肯定不是懒加载，并且我假设当您浏览本地运行的应用程序时它可以正常工作。据我所知，组件的内容应该在路由出口之后添加到页面中。 - Brandon Taylor

是的，当浏览时它完美地工作。我测试SSR的实际输出方式是使用查看页面源代码。 - Midevilworm

哦，我刚刚检查了我的一个网站，它正在做你描述的同样的事情，所以显然我也有同样的问题！ - Brandon Taylor

1

你们是如何解决这个问题的？我也遇到了同样的问题，当我构建 Angular Universal 应用时，app-root 内部的加载器无法工作。欢迎提供建议。谢谢！ - BruneX

显示剩余6条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Answer 1

尝试添加 relativeLinkResolution: 'legacy'。

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    relativeLinkResolution: 'legacy'
})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

它对我很有帮助。

- DanGo · Answer 2

我在服务器端渲染方面没有任何经验，但是当Angular应用程序部署到服务器时，一个常见的问题是子目录的分辨率。基本上根目录会加载，但是当通过URL访问处理在Angular路由中的所有其他项时，将不起作用。Web服务器正在寻找那些物理目录，而不允许Angular路由将页面指向虚拟目录。如果这听起来像您的问题，则此处有一些选项outline。