Angular 5 Universal exclude path from rendering on server

user_2274263 0
Viewed 1241

Are there any way I can force only browser rendering of particular path for Angular 5 universal app? I have following routes in app.module.shared.ts

@NgModule({
    declarations: [...],
    imports: [
        ......
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'auth-callback', component: AuthCallbackComponent},
            { path: '**', redirectTo: 'home' }        
        ]
        )
    ],
    providers: []
})

And I want mysite.com/auth-callback be only render in browser, not on server-side. Thanks for any help, failed to find any helping info.

universal angular javascript
2 Answers

Yes its possible to load browser and server with route specific.

In your server.ts you need specify the routes like below.

  let routesPath = ['/invite', '/invite/**','/lm', '/dashboard', '/dashboard/**', '/public/**', '/public', '/pre'];
  server.get(routesPath, (req, res) => {
    // console.log(req);
    res.sendFile(distFolder + '/index.html');
  });

then update your server.ts

  let routesPath = ['/invite', '/invite/**','/lm', '/dashboard', '/dashboard/**', '/public/**', '/public', '/pre'];
  server.get(routesPath, (req, res) => {
    // console.log(req);
    res.sendFile(distFolder + '/index.html');
  });

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;

You see in above code there is two different server.get(). First one will load browser. All route mentioned in routesPath will show normal browser mode.

The second one is all regular routes that will render as SSR.

I know its too late to answer but I hope it helps somebody reaching this question.

user_16825250
Related