Angular 8模块路由

Question

我的angular 8应用程序很好，直到我在shop.module.ts和shop.routing.ts中放入另一个组件声明为止

我的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时，应用程序正在运行且没有错误的空白页。我的路由声明中有问题吗？

Answer 1

您应使用标准方法进行延迟加载。对ShopDetailComponent和ShopListingComponent使用单独的模块，并单独使用RoutingModule。最后，在LayoutModule中使用它们。

BTW，您当前问题的解决方案：在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 { }

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

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