Question

即使我对Angular不太熟悉，它也是如此简单，以至于让我发疯。我使用带有“ 使用Angular路由”选项的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

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

2 个答案:

StackBlitz