Angular 角8模块布线

在我在shop.module.ts和shop.routing.ts中添加另一个组件声明之前，angular 8应用程序是正常的

Myapp.routing.ts

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

    ]
  }

];

@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 { }

Myshop.module.ts

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

    ]
  }

];

@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时，应用程序将以空白页面运行，不会出现错误。我的路由声明中有什么错误吗？

您应该使用标准的延迟加载方法。 对ShopDetailComponent和ShopListingComponent使用单独的模块，也可以使用单独的路由模块。最后，在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 { }

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

---

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

将路径：'shop/detail'更改为路径：'detail'，然后重试。前缀

shop

已存在于

app.routing.ts

中-您无需在

shop.routing.t