- Shared module is imported by feature modules when they need to use shared components.
- Core module is only imported by the root application module.
- The root application module’s router configuration associates feature modules to page routes and indicates that the modules are to be loaded lazily. More on this later.
Shared Module
Shared module contains components that are reused by multiple pages. This could be a custom Button, or a custom PasswordInputField, etc. Shared module can also export commonly imported modules such as Angular’s Common module. This way every other module that imports Shared module doesn’t need to import common modules over and over.
Declaring routing in feature modules
In a feature module you’ll have the usual component files (.ts, .html, .css) and two other files — a .module.ts file and a routing.module.ts file.
For a fictional product component (that corresponds to a product page) you’d have this in your product-routing.module.ts file。
···
// product-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductComponent } from './product.component';
const routes: Routes = [{ path: '', component: ProductComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductRoutingModule { }
···
This is telling the routing associated with the product page to be relative to the parent routing declared in app-routing.module.ts. The module for this feature uses this feature component routing information.
···
// product.module.ts
@NgModule({
declarations: [ProductComponent],
imports: [ProductRoutingModule, SharedModule],
})
export class ProductModule {}
···
Next, we declare that this product feature module is to be loaded lazily in the root routing config.
···
// app-routing.module.ts
const routes: Routes = [{
path: '/product',
loadChildren: () => import('./feature/product/product.module')
.then((m) => m.ProductModule),
}]
···
preloading
···
@NgModule({
exports: [
RouterModule
],
imports: [
RouterModule.forRoot(appRoutes, {
preloadingStrategy: PreloadAllModules // <-This is our preloading
})
]
})
···
