使用 Angular Ionic 4 应用程序延迟加载嵌套模块无法正常工作？

Question

我的应用程序有一个 public 路由，例如登录、注册以及受保护的路由成员。成员路由有一个选项卡的子路由。选项卡有一些子路由类别、项目等。每当我运行离子服务时，我在 Could not resolve module ./dashboard/dashboard.module relative to app/members/tabs/tabs-routing.[=36= 中收到以下错误]

我在配置路由时使用了相对路径。

在 tsconfig.app.json 文件中我添加了 "baseUrl": "./"

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": "./"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

这是我的 AppRoutingModule：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './services/auth-guard.service';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
  {
    path: 'members',
    loadChildren: './members/members-routing.module#MemberRoutingModule' ,
    canActivate : [AuthGuardService]
  },
];

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

这是我的 MemberRoutingModule：

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

const routes: Routes = [
    {
        path: '',
        redirectTo: 'members',
        pathMatch: 'full'
      },
    { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
    { path: 'logout', loadChildren: './logout/logout.module#LogoutPageModule' },
    { path: 'menu', loadChildren: './menu/menu.module#MenuPageModule' },
];

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

这是我的 TabsRoutingModule：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';


const routes: Routes = [
    {
        path: '',
        redirectTo: '/tabs/tabs/dashboard',
        pathMatch: 'full'
    },
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardPageModule'
            },
            {
                path: 'categories',
                children: [
                    {
                        path: '',
                        loadChildren: './categories/categories.module#CategoriesPageModule'
                    },
                    {
                        path: 'new-category',
                        loadChildren: './new-category/new-category.module#NewCategoryPageModule'
                    },
                    {
                        path: ':categoryId',
                        loadChildren: './category-details/category-details.module#CategoryDetailsPageModule'
                    }
                ]
            },
            {
                path: 'items',
                children: [
                    {
                        path: '',
                        loadChildren: './items/items.module#ItemsPageModule'
                    },
                    {
                        path: 'new-item',
                        loadChildren: './new-item/new-item.module#NewItemPageModule'
                    }
                ]
            },
            {
                path: '',
                redirectTo: '/tabs/tabs/dashboard',
                pathMatch: 'full'
            }

        ]
    }
];

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

这是我的tabs.page.html

<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="dashboard">
        <ion-label>Dashboard</ion-label>
        <ion-icon name="podium"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="categories">
        <ion-label>Categories</ion-label>
        <ion-icon name="pricetags"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="items">
        <ion-label>Items</ion-label>
        <ion-icon name="cash"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

它在一开始工作，然后我重新启动应用程序而没有任何更改，现在每当我运行 ionic-serve 时，我都会收到以下错误，其中模块的延迟加载不起作用。这是错误："ERROR in Could not resolve module ./dashboard/dashboard.module relative to app/members/tabs/tabs-routing.module.ts"

Answer 1

我看到你没有任何成员路径可以重定向到它，你必须在下面的代码中有一个路径名 "members"：

 const routes: Routes = [
{
    path: '',
    redirectTo: 'members',
    pathMatch: 'full'
  },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule'},
{ path: 'logout', loadChildren: './logout/logout.module#LogoutPageModule'},
{ path: 'menu', loadChildren: './menu/menu.module#MenuPageModule' },
];

我想你可能想重定向到选项卡，而不是成员。

Answer 2

我已经解决了问题。实际上，这只是一个错误，因为 ionic 无法找到模块。最初的困惑是 ionic 能够正确定位它们。我能够通过 christian-kohler.path-intellisense 使用 vscode 中的路径智能插件解决它 .这是插件的 link https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense 这是最终路由的样子

const routes: Routes = [
{
    path: '',
    component: TabsPage,
    children: [
        {
            path: 'dashboard',
            loadChildren: '../dashboard/dashboard.module#DashboardPageModule'
        },
        {
            path: 'categories',
            children: [
                {
                    path: '',
                    loadChildren: '../categories/categories.module#CategoriesPageModule'
                },
                {
                    path: 'new-category',
                    loadChildren: '../new-category/new-category.module#NewCategoryPageModule'
                },
                {
                    path: 'edit/:id',
                    loadChildren: '../new-category/new-category.module#NewCategoryPageModule'
                },
                {
                    path: ':id/items',
                    children: [
                        {
                            path: '',
                            loadChildren: '../items/items.module#ItemsPageModule'
                        },
                        {
                            path: 'new-item',
                            loadChildren: '../new-item/new-item.module#NewItemPageModule'
                        },
                        {
                            path: 'edit/:itemId',
                            loadChildren: '../new-item/new-item.module#NewItemPageModule'
                        }
                    ]
                }
                // {
                //     path: ':id/new-item',
                //     loadChildren: '../new-item/new-item.module#NewItemPageModule'
                // },
                // {
                //     path: ':id/items',
                //     loadChildren: '../items/items.module#ItemsPageModule'
                // }
            ]
        },
        {
            path: 'category-details',
            loadChildren: '../category-details/category-details.module#CategoryDetailsPageModule'


        },
        {
            path: '',
            redirectTo: './tabs/dashboard',
            pathMatch: 'full'
        }

    ]
},
{
    path: '',
    redirectTo: '/tabs/dashboard',
    pathMatch: 'full'
}

];

使用 Angular Ionic 4 应用程序延迟加载嵌套模块无法正常工作？

lazyloading nested module using Angular Ionic4 app not working properly?

lazy-loading

angular-routing

angular

ionic4