What are modules & How to optimize ?

1. Il existe deux types de modules : le module racine et les modules de fonctionnalité, appelés également sous-modules.
2. On déclare un module avec l'annotation @NgModule, quel que soit le type du module.
3. On peut créer des applications complexes en ajoutant des modules de fonctionnalité au module racine.
4. Chaque module regroupe tous les composants, directives, pipes, services, ... liés au développement d'une fonctionnalité donnée, dans un dossier à part.
5. Chaque module peut disposer de ses propres routes également.
6. On définit les routes de nos sous-modules avec forChild, et forRoot pour le module racine.

Si notre app est relativement petite on peux tout garder dans notre appModule, mais au fur et a mesure qu'elle grandit il est préferable de separer le code en plusieurs 'feature Module'

Nous allons creer un nouveau module : recipe.module.ts , et transferer nos components Recipe vers ce module.

Attention il faut egalement rajouter les imports de modules @angular dans ce recipe.module! Tout ce qui est utilisé par nos composants doit etre importé, SAUF les services!

BrowserModule doit etre remplacé par commonModule !

@NgModule({
    declarations: [
        RecipeListComponent,
        RecipeItemComponent,
        RecipeDetailComponent,
        RecipesComponent,
        RecipeStartComponent,
        RecipeEditComponent
    ],
    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule,
        FormsModule
    ],
    exports: [
        RecipeListComponent,
        RecipeItemComponent,
        RecipeDetailComponent,
        RecipesComponent,
        RecipeStartComponent,
        RecipeEditComponent
    ]
})

Nous pouvons ensuite deplacer notre logique de routing vers un autre routing.module qu'on appellera "recipes-routing.module.ts" :

const routes: Routes = [
    { path: 'recettes', component: RecipesComponent,
  canActivate: [AuthGuard],
  children: [
    { path: '', component: RecipeStartComponent },
    { path: 'new', component: RecipeEditComponent },
    { path: ':id', component: RecipeDetailComponent, resolve: [RecipeResolverService] },
    { path: ':id/edit', component: RecipeEditComponent, resolve: [RecipeResolverService] }
  ]},
];

@NgModule ({
// utiliser FORCHILD ici !
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RecipesRoutingModule {

}

Penser a rajouter notre module fraichement créer dans notre recipes.module.ts dans la section imports!

On peux egalement enlever nos exports depuis notre recipe.module car ils sont utilisés directement dans notre module actuel et on a pas besoin de les utiliser dans le module principal !

exports: [
        RecipeListComponent,
        RecipeItemComponent,
        RecipeDetailComponent,
        RecipesComponent,
        RecipeStartComponent,
        RecipeEditComponent
    ]

Même chose pour notre shopping-list , on creer notre shopping-list.module et son routing :