docs: fix lazy loading example dir name (#21475)

PR Close #21475

aio/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts

@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion app-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+// #docregion const-routes
+const routes: Routes = [
+  {
+    path: 'customers',
+    loadChildren: 'app/customers/customers.module#CustomersModule'
+  },
+  {
+    path: 'orders',
+    loadChildren: 'app/orders/orders.module#OrdersModule'
+  },
+  {
+    path: '',
+    redirectTo: '',
+    pathMatch: 'full'
+  }
+];
+// #enddocregion const-routes
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [RouterModule],
+  providers: []
+})
+export class AppRoutingModule { }
+// #enddocregion app-routing-module

aio/content/examples/lazy-loading-ngmodules/src/app/app.component.html

@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion app-component-template -->
+<h1>
+  {{title}}
+</h1>
+
+<button routerLink="/customers">Customers</button>
+<button routerLink="/orders">Orders</button>
+<button routerLink="">Home</button>
+
+<router-outlet></router-outlet>
+
+<!-- #enddocregion app-component-template -->

aio/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts

@@ -0,0 +1,36 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

aio/content/examples/lazy-loading-ngmodules/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Lazy loading feature modules';
+}

aio/content/examples/lazy-loading-ngmodules/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { AppRoutingModule } from './app-routing.module';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html

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

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts

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

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts

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

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts

@@ -0,0 +1,22 @@
+// #docplaster
+// #docregion customers-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CustomerListComponent } from './customer-list/customer-list.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CustomerListComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class CustomersRoutingModule { }
+// #enddocregion customers-routing-module

aio/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts

@@ -0,0 +1,16 @@
+// #docplaster
+// #docregion customers-module
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomersRoutingModule } from './customers-routing.module';
+import { CustomerListComponent } from './customer-list/customer-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CustomersRoutingModule
+  ],
+  declarations: [CustomerListComponent]
+})
+export class CustomersModule { }
+// #enddocregion customers-module

aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html

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

aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts

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

aio/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts

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

aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts

@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion orders-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+// #docregion orders-routing-module-detail
+import { OrderListComponent } from './order-list/order-list.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OrderListComponent
+  }
+];
+
+// #enddocregion orders-routing-module-detail
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class OrdersRoutingModule { }
+// #enddocregion orders-routing-module

aio/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { OrdersRoutingModule } from './orders-routing.module';
+import { OrderListComponent } from './order-list/order-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OrdersRoutingModule
+  ],
+  declarations: [OrderListComponent]
+})
+export class OrdersModule { }

aio/content/examples/lazy-loading-ngmodules/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Lazy loading feature modules</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

aio/content/examples/lazy-loading-ngmodules/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);