angular 在重建之前找不到模块

Question

I have this very odd problem where i have the force my angular to "rebuild" (by changing something in the file and reloading the serve) Before my route can be reached

Here is my folder structure:

app-routing.module.ts

    import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {redirectUnauthorizedTo, canActivate} from '@angular/fire/auth-guard';

const redirectUnauthorizedToLanding = redirectUnauthorizedTo(['/login/signin']);

    const routes: Routes = [
        {
            path: '',
            loadChildren: () => import('../login/login.module').then(m => m.LoginModule)
        },
        {
            path: 'dashboard',
            loadChildren: './dashboard/dashboard.module#DashboardPageModule',
            ...canActivate(redirectUnauthorizedToLanding)

        },
        {path: 'statistic', loadChildren: './statistic/statistic.module#StatisticPageModule'}


    ];

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

login-routing.module

    import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AngularFireAuthModule} from "@angular/fire/auth";
import {ReactiveFormsModule} from "@angular/forms";

const routes: Routes = [
    {
        path: 'login',
        pathMatch: 'prefix',
        children: [
            {
                path: 'signin',
                loadChildren: './pages/sign-in/sign-in.module#SignInPageModule'
            },
            {
                path: 'signup',
                loadChildren: './pages/sign-up/sign-up.module#SignUpPageModule'
            },
        ]
    },
];

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

Can anyone tell me whats going on?

Answer 1

When using the children property in the router config, there must be a nested <router-outlet> present. Otherwise, the route will exist (no errors in the console), but the component will not be rendered.

Check my stackblitz demo

The login component has a router-outlet to render the routes defined in the children property. If you were to comment that out, you will see that the route is valid, but the sign-up component doesnt get rendered.