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

Question

尽管我是 Angular 的新手，但这应该是如此简单以至于让我发疯。我使用带有“Use Angular Routing”选项的 CLI 创建了一个 Angular 项目。创建了一个功能模块，并使用 VS Code 中的脚手架插件（"Angular Files" by Alexander Ivanichev）为其添加路由 class。起初我只是直接在 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

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

Basic lazy loading module routing issue with Angular Routing

angular

angular2-routing

StackBlitz