带有延迟加载模块和子路由的 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

我相信

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

Answer 2

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

在您的情况下，请将 appModule 路由的路径更改为 hello 。这会告诉角度在看到hello url 时下载惰性模块。从第二个配置开始，将其留空。这告诉 angular 在看到 hello url 后面的空字符串时加载组件

应用模块

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。我不知道你想用这个实现什么，但组件并不懒惰。模块是。