angular - breaking application into smaller modules

The following codes shows example how we can make use of angular module and break it down into submodules.

This is the router

	import { NgModule } from '@angular/core';
	import { Routes, RouterModule } from '@angular/router';

	export const routes: Routes = [
	{ path: '', redirectTo: 'contact', pathMatch: 'full'},
	{ path: 'items', loadChildren: 'app/items/items.module#ItemsModule' },
	{ path: 'customers', loadChildren: 'app/customers/customers.module#CustomersModule' }
	];

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

view raw router_fav.ts hosted with ❤ by GitHub

Sample customer moduile.

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

	import { SharedModule } from '../shared/shared.module';

	import { CustomersComponent } from './customers.component';
	import { CustomersDetailComponent } from './customers-detail.component';
	import { CustomersListComponent } from './customers-list.component';
	import { CustomersRoutingModule } from './customers-routing.module';
	import { CustomersService } from './customers.service';


	@NgModule({
	imports: [ SharedModule, CustomersRoutingModule ],
	declarations: [
	CustomersComponent, CustomersDetailComponent, CustomersListComponent,
	],
	providers: [CustomersService]
	})
	export class CustomersModule { }

view raw customer_module.ts hosted with ❤ by GitHub

Sample item module

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

	import { ItemsComponent } from './items.component';
	import { ItemsListComponent } from './items-list.component';
	import { ItemsDetailComponent } from './items-detail.component';
	import { ItemService } from './items.service';
	import { ItemsRoutingModule } from './items-routing.module';

	@NgModule({
	imports: [ CommonModule, ItemsRoutingModule ],
	declarations: [ ItemsComponent, ItemsDetailComponent, ItemsListComponent ],
	providers: [ ItemService ]
	})
	export class ItemsModule {}


	/*
	Copyright 2017-2018 Google Inc. All Rights Reserved.
	Use of this source code is governed by an MIT-style license that
	can be found in the LICENSE file at http://angular.io/license
	*/

view raw item_module.ts hosted with ❤ by GitHub

mitzen