带有延迟加载模块和子路由的Angular 7路由器'**'通配符不起作用？

Question

我正在尝试使用来自Angular路由器的通配符'**'创建默认路由。 该默认路由将加载一个惰性模块，然后必须解决自己的路由。 问题是，当我进行以下配置时，无法按预期解决：

export const routes = [
  {
    path: '',
    component: 'DashboardComponent'
  },
  {
    path: '**',
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [AppComponent]
  bootstrap: [AppComponent]
})
export class AppModule {}

---

const routes = [
  {
    path: '', 
    component: MainComponent
  }
  {
    path: 'hello',  // hoping to pick up the wildcard and resolve the route
    component: HelloComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    AnyComponent,
    EditComponent
  ]
})
export default class LazyModule {}

例如。 使用mydomain.com/hello，它不会显示HelloComponent，而是显示MainComponent。

我的配置有问题吗？还是不能这样工作？

提前致谢。

Answer 1

惰性模块需要两个路由配置。 appModule中的第一个告诉角度何时加载模块。 第二个位于延迟特征模块中，告诉角度何时显示特定组件。

在您的情况下，请将appModule路由的路径更改为hello 。 当看到hello URL时，这告诉Angular下载懒惰模块。 从第二种配置开始，将其保留为空。 当您在hello网址后看到一个空字符串时，这告诉angular加载组件

应用模块

export const routes = [
  {
    path: '',
    component: 'DashboardComponent'
  },
  {
    path: 'helllo', <-- change this
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

懒模块

const routes = [
  {
    path: '', 
    component: LazyComponent // I do not know what this is. The components are not lazy. Modules are
  }
  {
    path: '',  <-- change this
    component: HelloComponent
  }
];

我在您的代码中看到您有一个LazyComponent 。 我不知道您想通过此实现什么，但是组件并不懒惰。 模块是。

Answer 2

我相信您必须重定向到实际路线。 有与此相关的一些主题， 这里是一个 。 同样根据Angular的示例 ，您可能必须从LazyModule导出RouterModule。