Angular 8 модуль маршрутизации - PullRequest
Новая
       9

Angular 8 модуль маршрутизации

0 голосов
/ 08 февраля 2020

С моим angular 8 приложением все в порядке, пока я не добавлю еще одно объявление компонентов в мои shop.module.ts и shop.routing.ts

My 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
  }
];

Мое приложение полностью работает, когда я удаляю ShopDetailComponent от обоих shop.module.ts и shop.routing.ts . Когда я ставлю снова ShopDetailComponent , тогда приложение работает с пустой страницей без ошибок. Что-то не так в моей декларации маршрутизации?

1 Ответ

0 голосов
/ 08 февраля 2020

Вы должны использовать стандартный подход для отложенной загрузки. Используйте отдельный модуль для ShopDetailComponent и ShopListingComponent , а также отдельные модули маршрутизации. Наконец, используйте их в LayoutModule.

Кстати, решение вашей текущей проблемы: используйте FormsModule в файле shop.module.ts, например 

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

Если проблема не устранена, дайте мне знать. Могут быть и другие причины, которые нам нужно решить, но, надеюсь, это обновление решит вашу проблему.

Примечание: , даже если страница браузера пуста, вы все равно можете увидеть ошибку в консоли.

...