Question

我的应用有一条公共路线，例如登录，注册以及受保护的路线成员。成员路线具有选项卡的子路线。 Tabs包含一些子路线类别，项目等。每当我运行离子服务时，都会在无法解析模块./dashboard/dashboard.module相对于app / members / tabs / tabs-routing.module.ts 中出现以下错误>

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

在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时，都会出现以下错误，其中模块的延迟加载不起作用。这是错误：“无法解析模块./dashboard/dashboard.module相对于app / members / tabs / tabs-routing.module.ts的错误”

Answer 1

我已经解决了问题。确实这只是一个错误，因为离子无法找到模块。最初的困惑是离子能正确定位它们。我能够使用christian-kohler.path-intellisense在vscode中使用路径智能插件来解决它。这是插件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'
}

];

Answer 2

如我所见，您没有任何可重定向到它的成员路径，因此在以下代码中必须具有路径名“ 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' },
];

我认为您可能想重定向到标签页，而不是成员。

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

2 个答案: