I have two super simple not-standalone angular components in two different modules. ModThree module contains a component RxtriggerComponent has the selector app-rxtrigger, the html of this component only contains a button with no action for it. I am calling this selector in the componeponent.html that belong to the module modone. But getting the error:

NG8001: 'app-rxtrigger' is not a known element:

1. If 'app-rxtrigger' is an Angular component, then verify that it is part of this module.
2. If 'app-rxtrigger' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the >'@NgModule.schemas' of this component to suppress this message. src/app/modone/compone/componeponent.html:3:4

The code sample:

modThree.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RxtriggerComponent } from './rxtrigger/rxtriggerponent';

@NgModule({
  declarations: [
    RxtriggerComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[
    RxtriggerComponent
  ]
})
export class ModthreeModule { }

rxtriggerponent.html

<button>Click</button>

rxtriggerponent.ts: contains just default code

import { Component } from '@angular/core';

@Component({
  selector: 'app-rxtrigger',
  templateUrl: './rxtriggerponent.html',
  styleUrl: './rxtriggerponent.scss'
})
export class RxtriggerComponent {
}

I am calling the above component with selector app-rxtrigger in componeponent.html

<div>
    <p>compone works!</p>
    <app-rxtrigger/>
</div>

componeponent.ts contains the default code.

And the module modone.module.ts of this component looks like:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponeComponent } from './compone/componeponent';
import { ModthreeModule } from '../modthree/modthree.module';

@NgModule({
  declarations: [
    ComponeComponent
  ],
  imports: [
    CommonModule,
    ModthreeModule
  ]
})
export class ModoneModule { }

I also try adding CUSTOM_ELEMENTS_SCHEMA but nothing really has changed.

Angular version: 17

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));