如何在Angular中创建嵌套路由设置

Question

I am trying to create a nested router setup in angular

App > Core > General

app-routing.module.ts

const routes:Routes = [
    {path: 'core', loadChildren: './core/core.module#CoreModule', canActivate: [AuthGuard]}
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ],
    providers: []
})
export class AppRoutingModule {
}

core-routing.module.ts

const coreRoutes:Routes = [
    {
        path: '',
        component: CoreComponent,
        children: [
            { path: 'general', loadChildren: './general/general.module#GeneralModule' },
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(coreRoutes)],
    exports: [RouterModule]
})
export class CoreRoutingModule {
}

general-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: GeneralComponent,
    children: [
        { path: 'vendor/browser', component: VendorBrowserComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GeneralRoutingModule {}

The issue I am observing is that Angular is unable to load directive in my nested template.

I am getting this error in the vendor template:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("        </div>
          <div class="ui icon right-button">
              <div class="inline field" [ERROR ->]*ngIf="editPermission">
                  <ng-container >
                      <div class="ui toggle"): ng:///GeneralModule/VendorBrowserComponent.html@10:40
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
          </div>
          <div class="ui icon right-button">
              [ERROR ->]<div class="inline field" *ngIf="editPermission">
                  <ng-container >
                 "): 

Answer 1

The solution is to import CommonModule in each of your modules.

import { CommonModule } from '@angular/common'; 

@NgModule({
  imports: [CommonModule],
  declarations: [MyComponent]
  ...
})
class MyComponentModule {}