task#21 add a wrapper module

Add Wrapper Module

• Generate a module with ng g module auction --routing
• Add a AuctionComponent with own routerOutlet ng g c auction/auction
• Move the auction-list, auction-detail and parts of the shared folder into auction
• Provide the AuctionDataService inside your AuctionModule (instead of your AppModule)
• Add routes and subroutes for Auction: auction/auction-routing.module.ts
• Add a loadChildren to /auctions to your app routes

Result

Start the test-auction-api server in a second console with $ test-auction-api if not yet running.

Compile and start the application with

$ ng serve

Open the project in the browser

• Open your browser with the address http://localhost:4200/
• Click in the menu to home and auctions
• You should see a page like the following illustration.

Hints

Generate a module

ng g module auction --routing

Move the auction-list, auction-detail, mouse-event-display, auction, aucxtion-data
and auction-data.service of the shared folder into auction. For details consult the folder structure underneath.

The auction module must contain all auction components and the module specific providers.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AuctionRoutingModule } from './auction-routing.module';
import { AuctionListComponent } from './auction-list/auction-list.component';
import { AuctionListDetailComponent } from './auction-list-detail/auction-list-detail.component';
import { AuctionDetailComponent } from './auction-detail/auction-detail.component';
import { MouseEventDisplayComponent } from './mouse-event-display/mouse-event-display.component';
import { AuctionComponent } from './auction/auction.component';

@NgModule({
  imports: [
    CommonModule,
    AuctionRoutingModule
  ],
  declarations: [
    AuctionComponent,
    AuctionListComponent,
    MouseEventDisplayComponent,
    AuctionListDetailComponent,
    AuctionDetailComponent

  ],
  providers: []

})
export class AuctionModule {
}

Add a AuctionComponent with own routerOutlet

The AuctionComponent is the main component of the AuctionModule.

ng g c auction/auction

The auction.component.html shall contain a routerOutlet:

<router-outlet></router-outlet>

Move the auction-list, auction-detail and parts of the shared folder into auction

The new folder structure:

src

\- app
   \- auction
      \- auction-list
         \- auction-list.component.css
         \- auction-list.component.html
         \- auction-list.component.ts
         \- auction-list.component.spec.ts
      \- auction-list-detail
         \- auction-list-detail.component.css
         \- auction-list-detail.component.html
         \- auction-list-detail.component.ts
         \- auction-list-detail.component.spec.ts
      \- mouse-event-display
         \- mouse-event-display.component.css
         \- mouse-event-display.component.html
         \- mouse-event-display.component.ts
         \- mouse-event-display.component.spec.ts
      \- shared
         \- auction.ts
         \- auction-data.service.spec.ts
         \- auction-data.service.ts
         \- auction-data.ts
      \- auction.module.ts
      \- auction-routing.module.ts
   \- home
      \- home.component.css
      \- home.component.html
      \- home.component.ts
      \- home.component.spec.ts
   \- nav-bar
      \- nav-bar.component.css
      \- nav-bar.component.html
      \- nav-bar.component.ts
      \- nav-bar.component.spec.ts
   \-shared
      \- angular-date-http-interceptor.ts
      \- helper.service.spec.ts
      \- helper.service.ts
   \- app.module.ts
   \- app.component.html
   \- app.component.spec.ts
   \- app.component.ts
   \- app.component.scss
   \- app-routing.module.ts
\- assets
    \- 01-yamaha-blue.png
    \- 02-yamaha-aquamarine.png
    \- 03-yamaha-red.png
\- environments
   \- environment.prod.ts
   \- environment.ts
\- _variables.scss
\- app.constansts.ts
\- favicon.ico
\- index.html
\- main.ts
\- polyfills.ts
\- styles.scss
\- test.ts
\- tsconfig.app.jsop
\- tsconfig.spec.json
\- typings.d.ts

Remove Auction Components from App Module

The AppModule contains now only the NavBarComponent and the HomeComponent. All auction components have been moved to the AuctionModule. The AuctionService has been moved to the AuctionModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AngularDateHttpInterceptorService } from './shared/angular-date-http-interceptor.service';

import { NavBarComponent } from './nav-bar/nav-bar.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent, NavBarComponent, HomeComponent],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AngularDateHttpInterceptorService,
      multi: true
    },
  ],

  bootstrap: [AppComponent]
})
export class AppModule {}

Routes and Sub Routes

Move the auction routes from the file _app.routing.ts to the new generated auction-routing.module.ts file. file.

Routes in app-routes.module.ts

The app-routing.module.ts contains only the route to the HomeComponent plus a lazy loading to the auction.module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }, {
    path: 'auctions',
    loadChildren: () => import('./auction/auction.module').then(m => m.AuctionModule)
  }, {
    path: '',
    pathMatch: 'full',
    redirectTo: '/home'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Child routes in auction-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuctionListComponent } from './auction-list/auction-list.component';
import { AuctionDetailComponent } from './auction-detail/auction-detail.component';
import { AuctionComponent } from './auction/auction.component';


export const routes: Routes = [{
    path: '',
    component: AuctionComponent,
    children: [{
        path: '',
        component: AuctionListComponent
    }, {
        path: ':id',
        component: AuctionDetailComponent
    }]
}];


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuctionRoutingModule {}