CODEWITHSUNDEEP
angularexpressserver-side-renderingangular-universal
jcdsr
jcdsr

Reputation: 1151

angular universal - prerender adding an extra slash on url

we use angular 8 as ssr universal and prerender. Below the code when I use prerender with expressjs, but for some reason after the page is prerendered the urls is adding an an extra slash at the end, which make the page not indexable, then angular makes a redirected javascript to the correct page.

the angular universal prerender page will make the url like

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

then redirects

https://www.mywebsite.com/home

the first url is the one prerendered

Any ideas why? and what do I need to fix this?

      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));
      });

and in the ROUTESStaticPages the urls are listed like:

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

        ];

enter image description here

enter image description here

Upvotes: 1

Views: 1917

Answers (1)

Americo Arvani
Americo Arvani

Reputation: 858

I have had the same issue in my universal prerender , by default redirect is true on expressjs configuration I have changed to false is no long redirecting now , 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
}));

Upvotes: 1

Related Questions