Angular Universal仅渲染router-outlet,SSR内容不显示求助
Angular Universal 仅渲染 router-outlet 问题求助
4天前我在Stack Overflow发布了《Angular Universal rendering only router-outlet》的提问,但未获得回复,现再次求助。我已通过谷歌搜索相关资料,查看了多个Stack Overflow相关问题,仍未找到问题根源。
当前Angular Universal服务端渲染时,仅能看到以下内容:
<app-root _nghost-sc17="" ng-version="14.2.0" ng-server-context="other"> <router-outlet _ngcontent-sc17=""></router-outlet><!----></app-root>
控制台及终端均无报错信息。以下是相关配置代码:
server.ts:
import 'zone.js/dist/zone-node'; import {APP_BASE_HREF} from '@angular/common'; import {ngExpressEngine} from '@nguniversal/express-engine'; import * as express from 'express'; import {existsSync} from 'fs'; import {join} from 'path'; import {AppServerModule} from './src/main.server'; // The Express app is exported so that it can be used by serverless Functions. export function app(): express.Express { const server = express(); const distFolder = join(process.cwd(), 'dist/food-recipe-front/browser'); const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index'; // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine) server.engine('html', ngExpressEngine({ bootstrap: AppServerModule, })); server.set('view engine', 'html'); server.set('views', distFolder); // Example Express Rest API endpoints // server.get('/api/**', (req, res) => { }); // Serve static files from /browser server.get('*.*', express.static(distFolder, { maxAge: '1y' })); // All regular routes use the Universal engine server.get('*', (req, res) => { res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }); }); return server; } function run(): void { const port = process.env['PORT'] || 4000; // Start up the Node server const server = app(); server.listen(port, () => { console.log(`Node Express server listening on http://localhost:${port}`); }); } // Webpack will replace 'require' with '__webpack_require__' // '__non_webpack_require__' is a proxy to Node 'require' // The below code is to ensure that the server is run only when not requiring the bundle. declare const __non_webpack_require__: NodeRequire; const mainModule = __non_webpack_require__.main; const moduleFilename = mainModule && mainModule.filename || ''; if (moduleFilename === __filename || moduleFilename.includes('iisnode')) { run(); } export * from './src/main.server';
tsconfig.server.json:
{ "extends": "./tsconfig.app.json", "compilerOptions": { "outDir": "./out-tsc/server", "target": "es2019", "types": [ "node" ] }, "files": [ "src/main.server.ts", "server.ts" ] }
routes.ts:
{path:'', component:HomeComponent, children: [ { path:'home', component:HomeFrontComponent}, { path: 'recipes', component:IndexRecipeComponent}, { path: 'recipes/:strCategory', component:IndexRecipeComponent}, { path: 'recipe-detail/:id', component:RecipeDetailComponent}, { path: 'blogs', component:IndexBlogsComponent}, { path: 'blog-detail/:id', component:BlogDetailComponent}, { path: 'privacy', component:PrivacyComponent}, { path: 'about-us', component:AboutUsComponent}, { path: 'contact', component:ContactComponent}, ]},
我还下载了一个Angular SSR示例项目测试,同样存在仅显示router-outlet、无法看到meta标签的问题。我的后端使用NestJS,若需更多代码请告知,恳请各位提供帮助。
内容的提问来源于stack exchange,提问作者Nani Po
相关产品推荐
相关产品推荐

