added

Author: Nilpointer

src/app/app-menu/app-menu.component.html

@@ -1,4 +1,10 @@
-<div style="display: flex">
-  <div><a [routerLink]="['mod1']">Module1</a></div>
-  <div><a [routerLink]="['mod2']">Module2</a></div>
+<div style="display: flex; border: 1px solid black; margin: 20px">
+  <div style="margin-right: 20px;">MAIN MENU BAR</div>
+  <div><a [routerLink]="[{outlets: {app_main_outlet: ['mod1'] }}]">Link to lazy Module1</a></div>
+  <div style="margin: 0 20px">|</div>
+  <div><a [routerLink]="[{outlets: {app_main_outlet: ['mod2'] }}]">Link to lazy Module2</a></div>
+  <div style="margin: 0 20px">|</div>
+  <div><a [routerLink]="[{outlets: {app_side_outlet: ['side1'] }}]">Change to Sidebar1</a></div>
+  <div style="margin: 0 20px">|</div>
+  <div><a [routerLink]="[{outlets: {app_side_outlet: ['side2'] }}]">Change to Sidebar2</a></div>
 </div>

src/app/app.component.html

@@ -1,2 +1 @@
-<app-app-menu></app-app-menu>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -5,17 +5,27 @@ import { AppComponent } from './app.component';
 import { AppMenuComponent } from './app-menu/app-menu.component';
 import {RouterModule, Routes} from '@angular/router';
 import {Module1Module} from './modules/module1/module1.module';
+import { MainComponent } from './main/main.component';
+import { Sidebar1Component } from './sidebar1/sidebar1.component';
+import { Sidebar2Component } from './sidebar2/sidebar2.component';
 
 const routes: Routes = [
-    {path: '', redirectTo: '', pathMatch: 'full' },
-    {path: 'mod1', loadChildren: './modules/module1/module1.module#Module1Module'},
-    {path: 'mod2', loadChildren: './modules/module2/module2.module#Module2Module'}
+    {path: '', redirectTo: 'app', pathMatch: 'full'},
+    {path: 'app', component: MainComponent, children: [
+            {path: 'mod1', loadChildren: './modules/module1/module1.module#Module1Module', outlet: 'app_main_outlet'},
+            {path: 'mod2', loadChildren: './modules/module2/module2.module#Module2Module', outlet: 'app_main_outlet'},
+            {path: 'side1', component: Sidebar1Component, outlet: 'app_side_outlet'},
+            {path: 'side2', component: Sidebar2Component, outlet: 'app_side_outlet'}
+        ] }
 ];
 
 @NgModule({
   declarations: [
     AppComponent,
-    AppMenuComponent
+    AppMenuComponent,
+    MainComponent,
+    Sidebar1Component,
+    Sidebar2Component
   ],
   imports: [
     BrowserModule,

src/app/main/main.component.css

@@ -0,0 +1,12 @@
+<div>
+<app-app-menu></app-app-menu>
+</div>
+<div style="display: flex">
+<div style="flex-grow: 1;border: 1px solid black; min-height: 300px;margin-right: 10px;">
+  <router-outlet name="app_main_outlet"></router-outlet>
+</div>
+<div style="width: 200px; border: 1px solid black; min-height: 300px">
+  <div>SIDEBAR</div>
+  <router-outlet name="app_side_outlet"></router-outlet>
+</div>
+</div>

src/app/main/main.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/main.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.css']
+})
+export class MainComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/main/main.component.ts

@@ -1,4 +1,6 @@
-<div style="display: flex;">
-  <a [routerLink]="[{outlets:{'main':['screen1']}}]">screen1</a>|
+<div style="display: flex; border: 1px solid blue; margin: 20px;">
+    <div style="margin-right: 20px;">Lazy Module 1 Menu Bar</div>
+  <a [routerLink]="[{outlets:{'main':['screen1']}}]">screen1</a>
+    <div style="margin: 0 20px;">|</div>
   <a [routerLink]="[{outlets:{main:'screen2'}}]">screen2</a>
 </div>

src/app/modules/module1/mod1-menu/mod1-menu.component.html

@@ -1,8 +1,7 @@
 <div>
     <app-mod1-menu></app-mod1-menu>
 </div>
-
-<div>^router-outlet------------------------------------------------\/main-outlet</div>
-<div>
-    <router-outlet name="main"></router-outlet>
+<div>module outlet below</div>
+<div style="border: 1px solid blue; margin: 20px">
+    <router-outlet name="main">Choose screen1 or 2</router-outlet>
 </div>

src/app/modules/module1/module1-main/module1-main.component.html

@@ -4,13 +4,15 @@ import { Module1MainComponent } from './module1-main/module1-main.component';
 import { Screen1Component } from './screen1/screen1.component';
 import { Screen2Component } from './screen2/screen2.component';
 import {Sec1Component} from './sec1/sec1.component';
+import {Sec2Component} from './sec2/sec2.component';
 
 const routes: Routes = [
     {path: '', redirectTo: 'lm'},
     {
         path: 'lm', component: Module1MainComponent, children: [
             {path: 'screen1', component: Screen1Component, outlet: 'main', children: [
-                    {path: 'sec1', component: Sec1Component, outlet: 'sec1_out'}
+                    {path: 'sec1', component: Sec1Component, outlet: 'screen1_out'},
+                    {path: 'sec2', component: Sec2Component, outlet: 'screen1_out'}
                 ]},
             {path: 'screen2', component: Screen2Component, outlet: 'main'}
         ]}

src/app/modules/module1/module1-routing.module.ts

@@ -7,12 +7,13 @@ import { Mod1MenuComponent } from './mod1-menu/mod1-menu.component';
 import { Screen1Component } from './screen1/screen1.component';
 import { Screen2Component } from './screen2/screen2.component';
 import { Sec1Component } from './sec1/sec1.component';
+import { Sec2Component } from './sec2/sec2.component';
 
 @NgModule({
   imports: [
     CommonModule,
     Module1RoutingModule
   ],
-  declarations: [Module1MainComponent, Mod1MenuComponent, Screen1Component, Screen2Component, Sec1Component]
+  declarations: [Module1MainComponent, Mod1MenuComponent, Screen1Component, Screen2Component, Sec1Component, Sec2Component]
 })
 export class Module1Module { }

src/app/modules/module1/module1.module.ts

@@ -1,7 +1,11 @@
-<div><a [routerLink]="[{outlets: {sec1_out: ['sec1']}}]">Section1</a>
-<router-outlet name="sec1_out"></router-outlet>
+<div style="border: 1px solid green; margin: 20px">
+    <a [routerLink]="[{outlets: {screen1_out: ['sec1']}}]" style="margin: 20px">Section1</a>
+    <a [routerLink]="[{outlets: {screen1_out: ['sec2']}}]">Section2</a>
+    <div>Inner router Outlet below</div>
+    <router-outlet name="screen1_out"></router-outlet>
 </div>
-<div>-------------</div>
-<div>Section2
+
+<div style="border: 1px solid green; margin: 20px">Section2
+    <div>(not used) Inner router Outlet below</div>
   <router-outlet name="sec2"></router-outlet>
 </div>

src/app/modules/module1/screen1/screen1.component.html

@@ -1,3 +1,6 @@
 <p>
   screen2 works!
 </p>
+<div>
+
+</div>

src/app/modules/module1/screen2/screen2.component.html

@@ -0,0 +1,3 @@
+<p>
+  sec2 works!
+</p>

src/app/modules/module1/sec2/sec2.component.css

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Sec2Component } from './sec2.component';
+
+describe('Sec2Component', () => {
+  let component: Sec2Component;
+  let fixture: ComponentFixture<Sec2Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Sec2Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Sec2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/module1/sec2/sec2.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sec2',
+  templateUrl: './sec2.component.html',
+  styleUrls: ['./sec2.component.css']
+})
+export class Sec2Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/module1/sec2/sec2.component.spec.ts

@@ -0,0 +1,3 @@
+<p>
+  sidebar1 works!
+</p>

src/app/modules/module1/sec2/sec2.component.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Sidebar1Component } from './sidebar1.component';
+
+describe('Sidebar1Component', () => {
+  let component: Sidebar1Component;
+  let fixture: ComponentFixture<Sidebar1Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Sidebar1Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Sidebar1Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sidebar1/sidebar1.component.css

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar1',
+  templateUrl: './sidebar1.component.html',
+  styleUrls: ['./sidebar1.component.css']
+})
+export class Sidebar1Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/sidebar1/sidebar1.component.html

@@ -0,0 +1,3 @@
+<p>
+  sidebar2 works!
+</p>

src/app/sidebar1/sidebar1.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Sidebar2Component } from './sidebar2.component';
+
+describe('Sidebar2Component', () => {
+  let component: Sidebar2Component;
+  let fixture: ComponentFixture<Sidebar2Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Sidebar2Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Sidebar2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sidebar1/sidebar1.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar2',
+  templateUrl: './sidebar2.component.html',
+  styleUrls: ['./sidebar2.component.css']
+})
+export class Sidebar2Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}