Ad

Angular Universal-starter Prerender With 4 Levels Nesting Parameters

For some reasons I want to create prerender build of my angular 5 project using https://github.com/angular/universal-starter instead of server-side rendering.

There are 4 levels in my routes like this:

example.com/category/:id/subcategory/:id/event/:id/ticket/:id

Also, There is a rest api backend which I'm using for fetching data for each section. For example, /category/1 is sport, /category/1/subcategory/1 is football and so on.

First question: How can I create a html file for each of these levels by using prerender.js and How should my static.paths.ts look like?

Second question: How can I set meta tags for each of these pages?

Third question: How should my app-routing.module look like? Should I use children approach?

I'm using Angular 5.0.0 and ngx-restangular 2.0.2

Thank you.

Ad

Answer

The setup for prerender and runtime server-side render is mostly similar, the only difference is one is static, the other dynamic. You will still configure everything Universal requires you to set up for it to work.

Before I go into your questions, I highly recommend you to follow this (step-by-step configurations) and this (useful sections about Angular Universal pitfalls) guides to configure Angular Universal as it is one of the more comprehensive and up-to-date write ups that I've read.


First question: How can I create a html file for each of these levels by using prerender.js and How should my static.paths.ts look like?

Your static.path.ts should contain all routes that you want to prerender:

export const ROUTES = [
  '/',
  '/category/1/subcategory/1/event/1/ticket/1',
  '/category/1/subcategory/1/event/1/ticket/2',
  ...
];

Look tedious right? This is the trade off for having a static generated HTML as opposed to flexible run-time server-side rendering. You could and probably should write your own scripts to generate all routes available to your app (querying the database, generating all possible values, etc) to prerender all the pages that you want.

Second question: How can I set meta tags for each of these pages?

No different to how you set metatags or any Angular app, you can use the Title and Meta services that Angular provides.

Example:

constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private meta: Meta,
    private title: Title,
    private pageMetaService: PageMetaService
) { }

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        this.title.setTitle((`${this.article.title} - Tilt Report`));

        let metadata = [
            { name: 'title', content: 'Title' },
            { name: 'description', content: 'This is my description' },
            { property: 'og:title', content: 'og:Title' },
            { property: 'og:description', content: 'og:Description' },
            { property: 'og:url', content: 'http://www.example.com' },
        ];
        metadata.forEach((tag) => { this.meta.updateTag(tag) });
    };
}

Third question: How should my app-routing.module look like? Should I use children approach

You can choose to or not to use the 'children' approach, which I assume is lazy loading modules. As you configure Angular Universal, you should do certain setups to enable lazy loaded module to work server-side.

Ad
source: stackoverflow.com
Ad