检查filename. ponent.ts中的选择器

在各种html文件中使用标签

<my-first-component></my-first-component>

应该是

<app-my-first-component></app-my-first-component>

例子

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

你是否像这样在app.module.ts中导入它并删除指令位:-

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

你的MyComponentModule应该是这样的

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

你的MyComponentComponent应该在MyComponentModule中。

在MyComponentModule中，你应该把MyComponentComponent放在“exports”中。

类似的代码，请参见下面的代码。

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

并像这样将MyComponentModule放在app.module.ts的导入中(参见下面的代码)。

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

这样做之后，组件的选择器现在可以被应用程序识别。

你可以在这里了解更多信息:https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

在你的components.module.ts中，你应该像这样导入IonicModule 这样的:

import {IonicModule} from '@ionic/angular';

然后像这样导入IonicModule:

  imports: [
    CommonModule,
    IonicModule
  ],

所以你的components.module.ts会像这样:

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

在我的例子中，我在Shared模块中有一个组件。

组件正在加载并且工作良好，但typescript用红线突出显示html标记，并显示此错误消息。

在这个组件中，我注意到我没有导入rxjs操作符。

import {map} from 'rxjs/operators';

当我添加这个导入时，错误消息消失了。

检查组件内的所有导入。

希望它能帮助到别人。

我有一个类似的问题，但没有一个提到的解决方案工作。最后我意识到我有一个路由问题:

我想如果我在应用程序路由中指定我的组件。模块如下:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '', 
    component: MainComponent
  },
]

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

我将不必在我的AppModule中导入MainModule，这是错误的，因为这里只有组件被导入。MainModule中声明的任何其他组件将不可见，这将导致您所描述的错误消息。

解决方案1: 导入声明模块 解决方案2: 惰性加载组件，如下所示:

const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_declaringModule').then(m => m.declaringModule)},
}

这是可行的，因为整个模块都导入到这里。

我意识到你在你的例子中没有使用路由，只是把这个发布给其他可能使用路由并在搜索解决方案时偶然发现这个问题的人，就像我一样。