docs: update Stackblitz example for lazy-loading (#33070)

PR Close #33070

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

@@ -18,26 +18,26 @@ describe('providers App', () => {
     expect(page.getTitleText()).toEqual('Lazy loading feature modules');
   });
 
-  describe('Customers list', function() {
+  describe('Customers', function() {
     beforeEach(function() {
       customersButton.click();
     });
 
-    it('should show customers list when the button is clicked', function() {
-        let customersMessage = element(by.css('app-customer-list > p'));
-        expect(customersMessage.getText()).toBe('customer-list works!');
+    it('should show customers when the button is clicked', function() {
+        let customersMessage = element(by.css('app-customers > p'));
+        expect(customersMessage.getText()).toBe('customers works!');
     });
 
   });
 
-  describe('Orders list', function() {
+  describe('Orders', function() {
     beforeEach(function() {
       ordersButton.click();
     });
 
-    it('should show orders list when the button is clicked', function() {
-        let ordersMessage = element(by.css('app-order-list > p'));
-        expect(ordersMessage.getText()).toBe('order-list works!');
+    it('should show orders when the button is clicked', function() {
+        let ordersMessage = element(by.css('app-orders > p'));
+        expect(ordersMessage.getText()).toBe('orders works!');
     });
 
   });

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

@@ -21,16 +21,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app works!'`, async(() => {
+  it(`should have as title 'customer-app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
+    expect(app.title).toEqual('customer-app');
   }));
 
   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!');
+    expect(compiled.querySelector('h1').textContent).toContain('customer-app');
   }));
 });

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

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

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

@@ -1,15 +0,0 @@
-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

@@ -3,13 +3,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { CustomerListComponent } from './customer-list/customer-list.component';
+import { CustomersComponent } from './customers.component';
 
 
 const routes: Routes = [
   {
     path: '',
-    component: CustomerListComponent
+    component: CustomersComponent
   }
 ];
 

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-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

@@ -4,12 +4,12 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 // #docregion orders-routing-module-detail
-import { OrderListComponent } from './order-list/order-list.component';
+import { OrdersComponent } from './orders.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: OrderListComponent
+    component: OrdersComponent
   }
 ];
 // #enddocregion orders-routing-module-detail

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

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

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

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

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

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

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

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