2

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

7
  • DId you check in your networktab whether this is a redirection? You need to tick the 'preserve logs' checkbox to verify that Commented Feb 13, 2020 at 16:03
  • We have the logs enabled and there is no errors Commented Feb 14, 2020 at 12:33
  • Yeah, but you navigate to https://www.mywebsite.com/home, what is the network response? Is it a 301 redirection? Commented Feb 14, 2020 at 13:12
  • When crawled on screamingfrog the status /home/ 200 OK /home 301 Moved Permanently Commented Feb 14, 2020 at 16:38
  • Check for all redirections in your angular code. If there is nothing, maybe it's added by your reverse proxy if you are using one (e.g. nginx) Commented Feb 15, 2020 at 15:38

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

3 Comments

What about if you want to redirect from 'http' to 'https', you won't with that?
Hi @AmosIsaila my suggestion for you is, use that library is the easy way in my point view , npmjs.com/package/express-https-redirect
Even in Angular 20 and Express.js v4, it was still an issue. Been struggling with it for the past 2h before finding this and navigating to the link

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.