检查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']
})

在你的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 { }```

你的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

希望你有app.module.ts。 在app.module.ts中添加以下行-

 exports: [myComponentComponent],

是这样的:

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

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

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

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

import {map} from 'rxjs/operators';

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

检查组件内的所有导入。

希望它能帮助到别人。

上述错误从Angular 9开始也会产生。 这本书提供了一个解决方案。

该警告建议使用CUSTOM_ELEMENTS_SCHEMA，但所讨论的元素不是Web组件。我们希望Angular直接忽略这些元素。因此，我们使用NO_ERRORS_SCHEMA，“允许任何元素上的任何属性的模式”。 向各自的.spec文件添加模式:[NO_ERRORS_SCHEMA]可以消除错误。

await TestBed.configureTestingModule({
  declarations: [MyComponent],
  schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();