“选择器不是已知元素”

Question

我知道这个问题已经被问过几次了，但是经过所有的回答之后，它仍然不能解决我的问题。我正在尝试使用“ AppModule”中“ GetToursComponent”的选择器进入“ General Module”中“ WelcomeComponent”的选择器。我收到的错误是在所附的图片中。

代码：

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 component

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

您必须从<svg id="svg" viewBox="0 0 1000 1000"> <defs> <linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" > <stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" /> </linearGradient> <pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse"> <circle fill="0x0" cx="3" cy="3" r="2.5"></circle> </pattern> </defs> <g fill="url(#grad)"> <path id="path3" d="M0,0 1000,0 1000,1000 0,1000z" fill="url(#bg)"></path> </g> </svg>中删除GetToursComponent，并将其添加到AppModule的导出和声明数组中。