Angular 8-无法访问嵌套路由[关闭]

Question

我正在将Ionic 3应用程序升级到Ionic 4，现在正在使用Angular 8。

我正在尝试使以下路由器正常工作：

我还尝试过这样组织我的路线：

我想避免像本文中那样使用嵌套的路由器插座：https://appdividend.com/2018/12/14/angular-7-routing-and-sub-routing-tutorial-with-example/

[基本上，我希望能够从/ dashboards访问DashboardHome，从/ dashboard / menu访问DashboardMenu，从/ dashboards / menu访问DashboardViewer。

这是我的代码的样子：

app-routing.module

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { DashboardViewer } from './pages/dashboard/dashboard-viewer';
import { DashboardHome } from './pages/dashboard/dashboard-home';
import { WorkOrderHome } from './pages/work-order/work-order-home';
import { WorkOrderCONListTabs } from './pages/work-order/wo-construction/wo-con-list-tabs';
import { WorkOrderCONForm } from './pages/work-order/wo-construction/wo-con-form';
import { WorkOrderCONList } from './pages/work-order/wo-construction/wo-con-list';

// TODO split modules

const routes: Routes = [
  {
    path: 'home', 
    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./pages/about/about.module').then(m => m.AboutPageModule)
  },
  {
    path: 'accuv',
    loadChildren: () => import('./pages/accuv/accuv.module').then(m => m.AccuvPageModule)
  },
  {
    path: 'dashboards',
    loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule)
  },
  {
    path: 'work-order',
    loadChildren: () => import('./pages/work-order/wo.modules').then(m => m.WorkOrderModule)
  },
  { 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
  }
];

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

dashboard-routing.module：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardHome } from './dashboard-home';
import { DashboardMenu, DashboardViewer } from './dashboard-viewer';

const routes: Routes = [
    {
        path: '',
        component: DashboardHome,
        children: [
            {
                path: 'menu',
                component: DashboardMenu
            },
            {
                path: 'viewer',
                component: DashboardViewer
            }
        ]
    }
];


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

dashboard.module.ts

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular'
import { PowerBIModule } from '../../components/power-bi/power-bi.module';
import { DashboardViewer, DashboardMenu } from './dashboard-viewer';
import { DashboardHome } from './dashboard-home';
import { CoreModule } from '../../core.module';
import { RouterModule } from '@angular/router';
import { DashboardRoutingModule } from './dashboard-routing.module';

@NgModule({
  imports: [ 
    CommonModule,
    IonicModule,
    PowerBIModule,
    DashboardRoutingModule
  ],
  declarations: [ DashboardHome, DashboardViewer, DashboardMenu ]
})
export class DashboardModule {
  constructor (@Optional() @SkipSelf() parentModule: DashboardModule) {
    if (parentModule) {
      throw new Error('DashboardModule is already loaded');
    }
  }
}

当我在localhost：8100 / dashboards加载应用程序时，会发生以下情况：一切似乎都工作正常（我看到了仪表板主页组件）。但是，每当我尝试转到/ dashboards / menu或/ dashboards / viewer时，都找不到（看起来好像浏览器正在尝试将菜单或查看器解析为文件。

[我也在所有其他尝试中在离子论坛上发布了一篇文章：https://forum.ionicframework.com/t/unable-to-get-sub-routes-working-and-or-loading-properly/188169

我的第二次尝试是使用延迟加载子路由。当我尝试强制重定向（使用redirectTo）时，出现错误，提示缺少块。这表明我显然在延迟加载方面做错了。

有人知道这可能是什么问题吗？自从尝试了许多教程中给出的实现以来，我从事调试工作已经有一段时间了。

谢谢，非常感谢您的时间。

祝您度过愉快的一周！

Answer 1

好的，我已经能够在线找到解决方案。如果有兴趣，这里是参考。https://github.com/webpack/webpack-dev-server/issues/333

问题出在哪里：

负责路由的实际代码是正确的（本文中的实现以及我在Ionic论坛上发布的其他示例。）

我只是在index.html文件中缺少对基本href的引用。这是我在index.html文件的head标记中添加的内容：

  <base href="/" />

一旦添加了这一行，代码就开始表现出预期的效果，并且也开始出现Web pack。

我猜这是New Ionic项目中默认出现的这一行。但是，由于我一直在将应用程序从Ionic 3迁移到Ionic 4，因此默认情况下该文件不包含此行。

Angular 8-无法访问嵌套路由[关闭]

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

1个回答

最新问题

Angular 8-无法访问嵌套路由[关闭]

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

1个回答

最新问题

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