angular - Ionic4 类型的角度总是加载主页

Question

我的 Ionic4 应用程序总是加载主页。我尝试将其初始化为 loadChildren、component 和 rederictTo，但仍然总是加载主页。

.app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: 'overview', loadChildren: './overview/overview.module#OverviewPageModule' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
/...
];

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

.app.component.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

.home.module.ts

const routes: Routes = [
  {
    path: '',
    component: HomePage
  }
];

.overview.module.ts

const routes: Routes = [
  {
    path: '',
    component: OverviewPage
  }
];

.app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    IonicStorageModule.forRoot()
  ],
/...

Answer 1

我认为您必须在 loadChild 中使用 OverviewModule 而不是 OverviewPageModule。

Answer 2

为此，我刚刚在路由守卫中调用了导航功能。

目标是在应用程序启动时路由到登录页面，并防止导航到其他页面，直到经过身份验证（反之亦然 - 如果已经登录则禁用登录路由）。

它最终看起来像这样（路由保护与相反的逻辑基本相同，并且在登录保护中进行了一些额外的检查）：

应用程序路由.module.ts

...
const routes: Routes = [
    {
        path: '',
        canActivate: [TabsGuardService],
        resolve: {
            login: MidShiftLoginResolve
        },
        loadChildren: './tabs/tabs.module#TabsPageModule'
    },
    {
        path: 'login',
        canActivate: [LoginGuardService], // Routes back to '' if logged in already.
        loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule)
    }
];
@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            preloadingStrategy: PreloadAllModules,
            onSameUrlNavigation: 'reload'
        })
    ],
    exports: [RouterModule]
})

tabs.guard.service.ts

@Injectable({
    providedIn: 'root'
})
export class TabsGuardService implements CanActivate {

    constructor(private router: Router, private login: LoginService) { }

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> |
            Promise<boolean | UrlTree> | boolean | UrlTree {
        const auth = this.login.isAuthenticated; // custom login service state
        if (!auth) {
            this.router.navigate(['/login']).then(null);
        }
        return auth;
    }
}