angular 通用 - 预渲染在 url 上添加额外的斜杠

Question

我们使用 angular 8 作为 ssr 通用和预渲染。在我将 prerender 与 expressjs 一起使用时的代码下方，但由于某种原因在页面预呈现后 urls 在末尾添加了一个额外的斜线，这使得页面不可索引，然后 angular 使重定向 javascript 到正确的页面。

angular 通用预呈现页面将使 url 喜欢

https://www.mywebsite.com/home/

然后重定向

https://www.mywebsite.com/home

第一个 url 是预渲染的

知道为什么吗？我需要什么来解决这个问题？

      import 'zone.js/dist/zone-node';
      import 'reflect-metadata';
      import {readFileSync, writeFileSync, existsSync, mkdirSync} from 'fs';
      import {join} from 'path';

      import {enableProdMode} from '@angular/core';
      // Faster server renders w/ Prod mode (dev mode never needed)
      enableProdMode();

      // Import module map for lazy loading
      import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
      import {renderModuleFactory} from '@angular/platform-server';
      import { ROUTESStaticPages } from './prerender-static-pages';


      // * NOTE :: leave this as require() since this file is built Dynamically from webpack
      const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');

      const BROWSER_FOLDER = join(process.cwd(), 'project');

      // Load the index.html file containing referances to your application bundle.
      const index = readFileSync(join('project', 'index.html'), 'utf8');

      let previousRender = Promise.resolve();

      // Iterate each route path
      ROUTESStaticPages.forEach(route => {
        const fullPath = join(BROWSER_FOLDER, route);

        // Make sure the directory structure is there
        if (!existsSync(fullPath)) {
          mkdirSync(fullPath);
        }

        // Writes rendered HTML to index.html, replacing the file if it already exists.
        previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
          document: index,
          url: route,
          extraProviders: [
            provideModuleMap(LAZY_MODULE_MAP),
            { provide: 'APP_BASE_URL', useFactory: () => '123124531254', deps: [] },
            { provide: 'APP_REQ_HEADERS', useFactory: () => JSON.stringify('94384239572'), deps: []},
          ]
        })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
      });

并且在 ROUTESStaticPages 中，urls 被列为：

      export const ROUTESStaticPages = [
          '/',
          '/home',
          '/login',
          '/login/createlogin',
          '/login/resetpassword',
          '/pages',
          '/pages/about-us',

        ];

Answer 1

我在通用预渲染中遇到了同样的问题，默认情况下，在 expressjs 配置上重定向为 true 我已更改为 false 现在不再重定向，express router config

app.use(express.static(join(DIST_FOLDER, 'browser'), { maxAge: '1y', redirect: false }));

app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y',
  redirect: false
}));

angular 通用 - 预渲染在 url 上添加额外的斜杠

angular universal - prerender adding an extra slash on url

express

server-side-rendering

angular-universal

angular