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

Question

我有一个运行良好的应用程序，但我想将它移到登录页面后面。各种模块都是延迟加载的，并且运行良好。但是，当我将应用程序更改为始终首先转到登录页面（我将在此处检查登录状态并在登录后重定向到该应用程序）时，我收到有关路由的错误。

应用-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(['/tabs']);是错误发生的地方：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/behaviors' Error: Cannot match any routes. URL Segment: 'tabs/behaviors'

我确定我在这里遗漏了一些非常明显的东西。首先尝试延迟加载所有模块。我很确定我需要以某种方式在 login.page 文件或 login.router.module 中引用选项卡模块。任何帮助将不胜感激。用户状态的状态检查非常有效，我已经验证所有这些都在工作，如果找到用户，它就是它尝试导航的地方。

Answer 1

试试改成

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']); 您将路由到选项卡，但您没有声明它。这是针对 app.routing.ts 文件的。不明白为什么你有 login.router.ts 文件。

Answer 2

所以在遵循上面的建议之后，这给了我同样的错误，并且在 angular 或 ionic 的文档中没有找到任何帮助，我对我的每个路由组合进行了数小时的更改可以，终于有些东西起作用了。

这些是应用程序中的路线-routing.module.ts

{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', redirectTo: 'login', pathMatch: 'full' },

这是使它起作用的更改之前的 tabs.router.module.ts：

{ path: 'tabs', component: TabsPage, children: [ .... ] },
{ path: '', redirectTo: 'tabs/behaviors', pathMatch: 'full' }

现在是这样：

{ path: '', component: TabsPage, children: [ ... ] },

就是这样。终于在浏览器中不小心输入 .com:8100/tabs/tabs/behaviors 时弄明白了。删除路径：选项卡路由模块中的 'tabs' 修复了它。 /tabs 转到选项卡路由，然后 /behaviors 是子项。我的代码在第一层和 /behavior 之间添加了第二层 /tabs。

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

How to do a lazy loaded ionic framework app with a login page

lazy-loading

ionic-framework

angular-router