Angular 5 Universal exclude path from rendering on server

Question

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.

Not really. Actually it was a proof of concept test project and it was switched to React at the end. Probably checking if window variable is undefined inside that component can help you somehow — Alexander, Jan 02 '18 at 07:34
You can use `isPlatformBrowser(platformId)` to check if it is browser / server. If you look for server you can use `isPlatformServer(this.platformId)`. They are a part of: `import {isPlatformBrowser, isPlatformServer} from '@angular/common';` — kris_IV, Jan 29 '18 at 19:39

score 0 · Answer 1 · answered Jan 02 '18 at 09:05

0

There is no such yet, you place api folder in angular 2 root.. if you do such this, there will conflict between Angular2/4/5 route with api routes...

So, whether use sub-domain or put angular and api code in different directories..

answered Jan 02 '18 at 09:05

Arfan Mirza

668
1
14
24

score 0 · Answer 2 · answered Jul 11 '22 at 10:13

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.

Angular 5 Universal exclude path from rendering on server

2 Answers2