Impossible to use dynamic routes with Angular Universal?!

Proposal

What is the summary of the proposal?

It should be possible to use dynamically generated routes with Angular Universal.

What is the proposal?

In the docs it clearly states that it is necessary for Angular Universal to work to use initialNavigation=enabled on the router. This, as the name already states, leads to (if I understand correctly) Angular performing the first navigation before i.e. the APP_INITIALIZERs are loaded (which seems strange to me in the first place).

Now I assume that a common use case for using Angular Universal is to add server side rendering to pages powered by some sort of headless CMS. That is also what I am trying to achieve. Without initialNavigation=enabled I had no problem to create the routes dynamically, after fetching page information from our backend. I basically execute this code within an APP_INITIALIZER in my app.modules.ts:

this.backendService.getStaticLinks().pipe(
  tap(routes => {
    const config = this.router.config;
    config.unshift(
      ...routes.map(route => ({
        path: route.path,
        component: StaticContentComponent,
        data: {
          id: route._id
        }
      }))
    );
    this.router.resetConfig(config);
  })
)

Now with initialNavigation=enabled I always receive a 404 because I have no way of adding the routes, before the app tries to navigate there. The app still works with Universal support if I do not use initialNavigation=enabled, but I get bad flickering, which is not acceptable to deliver it like this to the user.

Is there any way this problem can be solved?

edit: I am not entirely sure if this belongs to the Universal or the Angular Core team, so please feel free to move the ticket accordingly or let me know if I should open it somewhere else.

[tommueller]

After a lot of reading and trial-and-error I now found a solution to this issue. I feel that it is a little bit hacky, so I would really love some feedback on it. Also I still believe that this should be possible with Angular Universal, without hacking into server.ts and main.ts.

Basically what I do now, is to fetch the data about the pages, both in the server and the app, before the Angular app gets bootstrapped at all. It look more or less like this:

server.ts:

// All regular routes use the Universal engine
  server.get('*', (req, res) => {
    // fetch dynamic routes
    // /!\ duplicate code to src/main.ts
    fetch('http://static.content/')
      .then(response => response.json())
      .then(resp => {
        const routes = resp.entries.map(route => ({
          path: route.path,
          component: StaticContentComponent,
          data: {
            id: route._id,
            name: route.name
          }
        }));

        res.render(indexHtml, {
          req,
          providers: [
            { provide: APP_BASE_HREF, useValue: req.baseUrl },
            { provide: DYNAMIC_ROUTES, useValue: routes }
          ]
        });
      });
  });

  return server;
}

and basically the same in main.ts:

document.addEventListener('DOMContentLoaded', () => {
  // fetch dynamic routes
  // /!\ duplicate code to server.ts
  fetch('http://static.content/')
    .then(response => response.json())
    .then(resp => {
      const routes = resp.entries.map(route => ({
        path: route.path,
        component: StaticContentComponent,
        data: {
          id: route._id,
          name: route.name
        }
      }));

      platformBrowserDynamic([
        { provide: DYNAMIC_ROUTES, useValue: routes }
      ])
        .bootstrapModule(AppModule)
        .catch(err => console.error(err));
    });
});

And then in my app-routing.module.ts I add the data provided in DYNAMIC_ROUTES to the routes:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabled'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(@Inject(DYNAMIC_ROUTES) private dynamicRoutes, private router: Router) {
    const config = router.config;
    config.unshift(...this.dynamicRoutes);
    this.router.resetConfig(config);
  }
}

So this does actually work. I am a bit unhappy about having to make the call twice (but couldn’t get it working otherwise). Also I would have preferred to avoid hacking into server.ts and main.ts.

Any ideas on how to improve this? Or do you see any issues to take this into production?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}