Angular 8 模块路由答案

【问题标题】：Angular 8 module routingAngular 8 模块路由
【发布时间】：2020-05-24 08:14:08
【问题描述】：

在我将另一个组件声明放入我的 shop.module.ts 和 shop.routing.ts 之前，我的 angular 8 应用程序很好

我的app.routing.ts

export const AppRoutes: Routes = [
  {
    path: '',
    redirectTo: 'shop',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FrontendPanelLayoutComponent,
    children: [
      {
        path: 'shop',
        loadChildren: './shop/shop.module#ShopModule'
      }

    ]
  }

];

我的shop.module.ts

@NgModule({
  imports: [
    CommonModule,
    GlobalModule,
    SlickModule.forRoot(),
    NouisliderModule,
    AgmCoreModule.forRoot({apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'}),
    RouterModule.forChild(ShopRoutes),
  ],
  declarations: [
    ShopListingComponent,
    ShopDetailComponent  //I newly put this one.
  ],
  providers: [
    ShopService
  ]
})
export class ShopModule { }

我的shop.routing.ts

export const ShopRoutes: Routes = [
  {
    path: '',
    component: ShopListingComponent
  },
  //I newly put this one.
  {
    path: 'shop/detail',
    component: ShopDetailComponent
  }
];

当我从 shop.module.ts 和 shop.routing.ts 中删除 ShopDetailComponent 时，我的应用程序完全正常。当我再次输入 ShopDetailComponent 时，应用程序正在以空白页面运行而没有错误。我的路由声明有问题吗？

【问题讨论】：

将 path: 'shop/detail' 更改为 path: 'detail' 并尝试。前缀 shop 已经存在于 app.routing.ts 中 - 您无需在 shop.routing.t 中重复它

标签： angular typescript routing angular8

【解决方案1】：

您应该使用延迟加载的标准方法。为 ShopDetailComponent 和 ShopListingComponent 使用单独的模块，以及单独的 RoutingModules。最后，在 LayoutModule 中使用它们。

顺便说一句，您当前问题的解决方案： 在 shop.module.ts 文件中使用 FormsModule，例如

import { FormsModule }   from '@angular/forms'; //-------- (new line)  
 @NgModule({
      imports: [
        CommonModule,
        GlobalModule,
        SlickModule.forRoot(),
        NouisliderModule,
        AgmCoreModule.forRoot({apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'}),
        RouterModule.forChild(ShopRoutes),
        FormsModule   //-------------Add this FormsModule (new line)
      ],
      declarations: [
        ShopListingComponent,
        ShopDetailComponent  //I newly put this one.
      ],
      providers: [
        ShopService
      ]
    })
    export class ShopModule { }

如果问题仍然存在，请告诉我。可能还有其他各种原因需要我们解决，但希望此更新能够解决您的问题。

注意：即使浏览器页面为空白，您仍然可以在控制台中看到错误。

【讨论】：