如何使用登录页面执行延迟加载的离子框架应用程序

问题描述 投票:0回答:1

我有一个运行良好的应用程序,但我想将其移至登录页面后。各个模块都是延迟加载的,并且运行良好。但是,当我将应用程序更改为始终始终先进入登录页面(将在其中检查登录状态并在登录后重定向到该应用程序)时,会收到有关路由的错误。

APP-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' }
  // this next line was how the app routed before I tried adding the login page
  // { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

login.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginPage } from './login.page';

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

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

login.page.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { AppState } from '../_store/store/app.store';
import { filter } from 'rxjs/operators';

@Component({
    selector: 'app-login',
    templateUrl: 'login.page.html',
    styleUrls: ['login.page.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoginPage {

    constructor(private router: Router, private store: Store<AppState>) {
        this.userSubscription = this.store.select(state => state.users.user).pipe(
            filter(user => !!user)
        ).subscribe(user => {
            if (user) {
                // THIS IS WHERE THE ERROR HAPPENS
                this.router.navigate(['/tabs']);
            }
        });
    }

}

this.router.navigate([ '/翼片']);错误发生的地方:

错误错误:未被捕获(承诺):错误:无法匹配任何路由。URL段:“标签/行为”错误:无法匹配任何路由。网址细分:“标签/行为”

我确定我在这里确实缺少一些明显的东西。第一次尝试延迟加载所有模块。我确定我需要以某种方式在login.page文件中或在login.router.module中引用tabs模块。任何帮助将不胜感激。用户状态的状态检查效果很好,我已经验证了所有功能都在起作用,它只是在找到用户后尝试进行导航的地方。

ionic-framework lazy-loading angular-router
1个回答
0
投票

尝试更改为

const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' }
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

使用此代码this.router.navigate(['/tabs']);,您将路由到制表符,但没有声明它。

© www.soinside.com 2019 - 2024. All rights reserved.