fix: minimal repo

package.json

@@ -2,12 +2,12 @@
   "name": "example",
   "version": "0.0.0",
   "scripts": {
-    "start": "npm run build && npm run serve:ssr",
+    "start": "npm run build && npm run serve",
     "start:ng": "npm run build:browser && ng serve",
     "build": "npm run build:browser && npm run build:server",
     "build:browser": "ng build",
     "build:server": "ng run example:server",
-    "serve:ssr": "node dist/example/server/main.js"
+    "serve": "node dist/example/server/main.js"
   },
   "private": true,
   "dependencies": {

server.ts

@@ -38,7 +38,7 @@ export function app(): express.Express {
 }
 
 function run(): void {
-  const port = process.env['PORT'] || 4000;
+  const port = process.env['PORT'] || 4200;
 
   // Start up the Node server
   const server = app();

src/app/app.component.html

@@ -1,3 +1,4 @@
 <a routerLink="normal">normal</a> | <a routerLink="lazy">lazy</a>
+<hr />
 
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { AppComponent } from './app.component';
 import { RouterModule, Routes } from '@angular/router';
 import { NormalComponent } from './feature/normal.component';
 import { NormalChildComponent } from './feature/normal-child.component';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 const routes: Routes = [
   { path: 'normal', component: NormalComponent },
@@ -23,6 +24,7 @@ const routes: Routes = [
     RouterModule.forRoot(routes, {
       initialNavigation: 'enabledBlocking',
     }),
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/feature/feature.module.ts

@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import { LazyComponent } from './lazy.component';
 import { RouterModule, Routes } from '@angular/router';
 import { LazyChildComponent } from './lazy-child.component';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 const routes: Routes = [{ path: '**', component: LazyComponent }];
 
 @NgModule({
   declarations: [LazyComponent, LazyChildComponent],
-  imports: [CommonModule, RouterModule.forChild(routes)],
+  imports: [CommonModule, RouterModule.forChild(routes),HttpClientModule],
 })
 export class FeatureModule {}

src/app/feature/lazy-child.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit, SimpleChanges } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'lazy-child-comp',
   template: 'lazy child component works',
 })
 export class LazyChildComponent {
-  constructor(public titleService: Title) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log({ changes });
-    this.titleService.setTitle('child');
+  constructor() {
+    console.log('===> lazy-child: constructor')
   }
+
 }

src/app/feature/lazy.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'lazy-comp',
-  template: '<lazy-child-comp></lazy-child-comp>',
+  template: '<lazy-child-comp *ngIf="ready"></lazy-child-comp>',
 })
 export class LazyComponent {
-  constructor(public titleService: Title) {
-    this.titleService.setTitle('lazy#1');
+  ready=false
+  constructor(private httpClient:HttpClient) {
+     this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(()=>{
+       this.ready=true
+     })
   }
 }

src/app/feature/normal-child.component.ts

@@ -1,15 +1,13 @@
-import { Component, SimpleChanges } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'normal-child-comp',
   template: 'normal child component works',
 })
 export class NormalChildComponent {
-  constructor(public titleService: Title) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log({ changes });
-    this.titleService.setTitle('child');
+  constructor() {
+    console.log('===> normal-child: constructor')
   }
+
 }

src/app/feature/normal.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'normal-comp',
-  template: '<normal-child-comp></normal-child-comp>',
+  template: '<normal-child-comp *ngIf="ready"></normal-child-comp>',
 })
 export class NormalComponent {
-  constructor(public titleService: Title) {
-    this.titleService.setTitle('normal#1');
+  ready=false
+  constructor(private httpClient:HttpClient) {
+     this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(()=>{
+       this.ready=true
+     })
   }
 }