CODEWITHSUNDEEP
angular
Arpit
Arpit

Reputation: 539

"selector is not an known element" angular

I know this has been asked several times but after going through all the answers it still does not solve my problem. I'm trying to use the the selector of "GetToursComponent" which is in the "AppModule" into the "WelcomeComponent" which is in "General Module". The error I am getting is in the picture that is attached.

code:

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

Error :

Error

gettours component

Upvotes: 0

Views: 424

Answers (2)

Kurt Hamilton
Kurt Hamilton

Reputation: 13515

Your general module doesn't know about GetToursComponent, and yet WelcomeComponent - which is declared in general module - is trying to use it.

You have 2 options:

  1. Create a shared module that declares and exports GetToursComponent, and import that into both modules

  2. Declare GetToursComponent in general module and export it, like below.

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

For both options you have to remove the declaration of GetToursComponent from app module - it will be imported from whichever module you export it from.

Upvotes: 2

bjdose
bjdose

Reputation: 1309

You have to remove your GetToursComponent from AppModule and add it to GeneralModule into exports and declarations array.

Upvotes: 0

Related Questions