I have been facing an issue with my module setup where ModuleA is importing ModuleB to use a component declared within it. The specific problem arises when ModuleAComponentC attempts to utilize ModuleBComponentA. While logic dictates that ModuleA should import ModuleB to use its components, and therefore ModuleB needs to export ModuleBComponentA, the implementation seems flawed in my case.
The error message I am encountering reads as follows: "Can't bind to 'name' since it isn't a known property of 'module-b-component-a'."
src/a/moduleA.module.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from "@angular/common"
import { ModuleAComponentC } from './c.component'
import { ModuleAComponentD } from './d.component'
import { ModuleB } from './../b/b.module'
@NgModule({
imports: [
BrowserModule,
CommonModule,
ModuleB
],
declarations: [
ModuleAComponentC,
ModuleAComponentD
]
})
export class ModuleA {}
src/b/moduleB.module.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CommonModule } from "@angular/common"
import { ModuleBComponentA } from './a.component'
import { ModuleBServiceA } from './a.service'
@NgModule({
imports: [
BrowserModule,
CommonModule
],
declarations: [
ModuleBComponentA
],
providers: [
ModuleBServiceA
],
exports: [
ModuleBComponentA
]
})
export class ModuleB {}
src/b/a.component.ts
@Component({
selector: 'module-b-component-a'
})
export class ModuleBComponentA {
@Input('@') name: string
}
src/a/c.component.html
<module-b-component-a name="{{ test }}"></module-b-component-a>