Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR Only renders first page #14152

mikelsulanjaku opened this Issue Apr 12, 2019 · 1 comment


None yet
2 participants
Copy link

mikelsulanjaku commented Apr 12, 2019


I have an angular project that contains a Shell module which in turn has a template page with a header, a footer and a main content are with a router-outlet which allows me to load any page within that template. That means I have one router-outlet at the app level and another one at the shell level. I did follow the instructions on the angular universal page and it did successfully generate all the files required for server side rendering. I have a main route also for each extra module I have children routes using the shell template.

app routing at the app level:

const routes: Routes = [
// Fallback when no prior route is matched
path: '**',
redirectTo: '',
pathMatch: 'full'
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing:false })
exports: [RouterModule],
providers: []
export class AppRoutingModule {}

At the module level:

const routes: Routes = [
path: '',
component: CheckoutComponent
path: 'checkout',
component: CheckoutComponent

imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
export class CheckoutRoutingModule {}

Shell Service:

_export class Shell {

  • Creates routes using the shell component and authentication.

  • @param routes The routes to add.

  • @return The new route using shell as the base.
    static childRoutes(routes: Routes): Route {
    return {
    path: '',
    component: ShellComponent,
    children: routes,
    canActivate: [AuthenticationGuard],

    // Reuse ShellComponent instance when navigating between child views
    data: { reuse: true }

Shell component:

Everything is good except that after building and serving the project, when viewing the source on the first page everything is nicely generated in html however, any other route, does render on the browser side but when viewing the source I always see the content of the first page.

How do I make sure that every child route generates html accordingly?


This comment has been minimized.

Copy link

alan-agius4 commented Apr 13, 2019

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.