Angular Universal In Depth

src/app/app.component.html

@@ -33,14 +33,12 @@
     </button>
   </mat-toolbar>
 
-   <div class="spinner-container" *appShellRender>
-
-    <mat-spinner></mat-spinner>
-
-</div>
+  <router-outlet></router-outlet>
 
+    <div class="spinner-container" *appShellRender>
 
-  <router-outlet></router-outlet>
+        <mat-spinner></mat-spinner>
 
+    </div>
 
 </mat-sidenav-container>

src/app/app.module.ts

@@ -30,6 +30,7 @@ import {ReactiveFormsModule} from "@angular/forms";
 import { HttpClientModule} from '@angular/common/http';
 import {AboutComponent} from './about/about.component';
 import {AppShellRenderDirective} from "./directives/app-shell-render.directive";
+import {AppShellNoRenderDirective} from "./directives/app-shell-norender.directive";
 
 
 
@@ -43,7 +44,8 @@ import {AppShellRenderDirective} from "./directives/app-shell-render.directive";
     CoursesCardListComponent,
     CourseDialogComponent,
     AboutComponent,
-    AppShellRenderDirective
+    AppShellRenderDirective,
+    AppShellNoRenderDirective
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

src/app/course/course.component.html

@@ -10,7 +10,8 @@ <h2>{{course?.description}}</h2>
 
     </div>
 
-    <mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
+    <mat-table class="lessons-table mat-elevation-z8"
+               [dataSource]="dataSource" *appShellNoRender>
 
         <ng-container matColumnDef="seqNo">
 

src/app/directives/app-shell-norender.directive.ts

@@ -0,0 +1,28 @@
+import {
+    Directive, Inject, OnInit, PLATFORM_ID,
+    TemplateRef, ViewContainerRef
+} from "@angular/core";
+import {isPlatformServer} from "@angular/common";
+
+@Directive({
+    selector: "[appShellNoRender]"
+})
+export class AppShellNoRenderDirective implements OnInit {
+
+    constructor(@Inject(PLATFORM_ID) private platformId,
+                private templateRef: TemplateRef<any>,
+                private viewContainer: ViewContainerRef) {
+
+    }
+
+    ngOnInit() {
+        if (isPlatformServer(this.platformId)) {
+            this.viewContainer.clear();
+        }
+        else {
+            this.viewContainer.createEmbeddedView(this.templateRef);
+        }
+
+    }
+
+}

src/app/home/home.component.html

@@ -1,5 +1,5 @@
 
-<div class="courses-panel">
+<div class="courses-panel" *appShellNoRender>
 
     <mat-tab-group>