Angular Routing 的基本延迟加载模块路由问题

Question

尽管我对 Angular 比较陌生，但它应该非常简单，以至于让我发疯。我使用带有“Use Angular Routing”选项的 CLI 创建了一个 Angular 项目。创建了一个功能模块并使用 VS Code 中的脚手架插件（Alexander Ivanichev 的“Angular Files”）为其添加了路由类。起初我只是直接在 app.component.html 中添加组件选择器，它工作正常，只要我添加路由器插座，将所有东西连接在一起并将“/submodule”部分添加到浏览器中的地址，页面中不再显示子模块组件，控制台也没有任何错误。

正如你所看到的，脚手架工具做了一些与文档有点不同的事情，我尝试修改所有内容以创建一个常规的 NgModule 并四处移动，但它仍然不起作用。

这是我的设置：

app.component.html

<div class="root-container">
  <header>
      Site name and other things go here
  </header>
  <aside class="menu">
    <h2>Menu</h2>
    <nav>
      <ul>
        <li><a href="*">Menu item 1</a></li>
        <li><a href="*">Menu item 2</a></li>
        <li><a href="*">Menu item 3</a></li>
        <li><a href="*">Menu item 4</a></li>
      </ul>
    </nav>
  </aside>

  <div class="content">
    <router-outlet></router-outlet>
    <!--
    <app-my-component></app-my-component>
    -->
  </div>
  <aside>some content</aside>
  <footer>This is the footer</footer>
</div>

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyFeatureModule, <- This is the one I'm trying to load
    AppRoutingModule
  ],
  providers: [],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

const routes: Routes = [
  { path: 'submodule', loadChildren: () => import('./featuremodule/feature.module').then(m => m.MyFeatureModule)}
];

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

featuremodule.module.ts

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule,
    FeatureModuleRoutes
  ],
  providers: [
    // some providers
  ],
  exports: []
})
export class MyFeatureModule { }

featuremodule.routing.ts

const routes: Routes = [
  { path: 'mycomponent', component: MyComponent },
];

export const FeatureRoutes = RouterModule.forChild(routes);

感谢您的帮助

Answer 1

根据您的路线设置，您需要导航到/submodule/mycomponent 以查看MyComponent 组件。

此外，您不应再将MyFeatureModule 导入AppModule。这将破坏延迟加载模块的目的，因为它将包含在您的 AppModule 中。

StackBlitz

Answer 2

不需要在 app.module.ts 中导入 MyFeatureModule