«селектор не известный элемент» angular

Question

Я знаю, что об этом спрашивали несколько раз, но после прохождения всех ответов это все еще не решает мою проблему. Я пытаюсь использовать селектор «GetToursComponent», который находится в «AppModule» в «WelcomeComponent», который находится в «General Module». Я получаю сообщение об ошибке:

код:

1) app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    GetToursComponent,
    PostToursComponent,
    ToursDetailsComponent,
    EditTourComponent
  ],
  imports: [
    BrowserAnimationsModule,
    AppRoutingModule,
    FormsModule,
    ServicesModule,
    HttpClientModule,
    GeneralModule,
    ToastrModule.forRoot()
  ],
  exports: [GetToursComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2) general.module.ts

@NgModule({
  declarations: [
    HeaderComponent,
    FooterComponent,
    WelcomeComponent
  ],
  imports: [
    CommonModule,
    generalRoutingModule
  ], 
  exports:[HeaderComponent, FooterComponent]
})
export class GeneralModule { }

3) welcome.component.ts

<div *ngIf="isLoggedIn()">
    <app-get-tours></app-get-tours>
</div>


<div *ngIf="!isLoggedIn()">
    <h2>welcome to natours </h2>

    <h1>login</h1>
    <a routerLink="/auth/login">login</a>
    <br>
    <h1>register</h1>
    <a routerLink="/auth/register">register</a>
</div>

4) app.routing.ts

let AuthRoutes: Routes = [
    {path: '', loadChildren: './general/general.module#GeneralModule'},
    { path: 'auth/login', component: LoginComponent },
    { path: 'auth/register', component: RegisterComponent },
    { path: 'getTours', component: GetToursComponent },
    { path: 'createTour', component: PostToursComponent },
    { path: 'toursDetails/:id', component: ToursDetailsComponent },
    { path: 'editTour/:id', component: EditTourComponent },
    { path: '**', component: PageNotFoundComponent }
]
@NgModule({
    imports: [RouterModule.forRoot(AuthRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

5) general.routing.ts

const routes: Routes = [
    { path: '', pathMatch: 'full', component: WelcomeComponent }
]

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

export class generalRoutingModule {}

Ошибка:

компонент gettours

Answer 1

Ваш общий модуль не знает о GetToursComponent, и все же WelcomeComponent - который объявлен в общем модуле - пытается использовать его.

У вас есть 2 варианта:

1. Создайте общий модуль, который объявляет и экспортирует GetToursComponent, и импортируйте его в оба модуля

2. Объявите GetToursComponent в общем модуле и экспортируйте его, как показано ниже .

@NgModule({
  declarations: [
    HeaderComponent,
    FooterComponent,
    WelcomeComponent,
    GetToursComponent
  ],
  imports: [
    CommonModule,
    generalRoutingModule
  ], 
  exports:[HeaderComponent, FooterComponent, GetToursComponent]
})
export class GeneralModule { }

Для обеих опций вы должны удалить объявление GetToursComponent из модуля приложения - оно будет импортировано из любого модуля, из которого вы его экспортировали.

Answer 2

Вы должны удалить свой GetToursComponent из AppModule и добавить его к GeneralModule в массиве экспорта и объявлений.