NgModule Grundlagen

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

import { UserListComponent } from './user-list.component';
import { UserDetailComponent } from './user-detail.component';
import { HighlightDirective } from './highlight.directive';
import { UserApiService } from './user-api.service';

@NgModule({
    // 1. declarations: lokal registrierte Bausteine dieses Moduls.
    //    Components/Direktiven/Pipes dürfen in genau EINEM Modul deklariert werden.
    declarations: [UserListComponent, UserDetailComponent, HighlightDirective],

    // 2. imports: andere Module, deren EXPORTIERTE Bausteine hier nutzbar werden.
    imports: [CommonModule, RouterModule],

    // 3. exports: das öffentliche API. Nur exportierte Symbole sind
    //    von außen (in importierenden Modulen) verwendbar.
    exports: [UserListComponent],

    // 4. providers: Services für die DI. providedIn: 'root' ist meist besser
    //    (Tree-Shaking), hier nur wenn modul-lokaler Scope gewünscht ist.
    providers: [UserApiService]

    // 5. bootstrap: nur im Root-Modul. Liste der Components,
    //    die beim App-Start instanziert werden — typischerweise [AppComponent].
    // bootstrap: [AppComponent]
})
export class UserModule {}

@NgModule({
    declarations: [UserListComponent, UserDetailComponent, UserFormComponent],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        RouterModule.forChild(USER_ROUTES) // forChild: Lazy-Feature
    ],
    providers: [UserApiService]
})
export class UserFeatureModule {}

@NgModule({
    declarations: [TruncatePipe, HighlightDirective, SpinnerComponent],
    imports: [CommonModule],
    exports: [
        CommonModule, // re-export, damit Konsumenten nicht selbst importieren müssen
        TruncatePipe,
        HighlightDirective,
        SpinnerComponent
    ]
})
export class SharedModule {}

import { Routes } from '@angular/router';

export const APP_ROUTES: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'users',
        loadChildren: () =>
            import('./user/user-feature.module')
                .then(m => m.UserFeatureModule)
    }
];