Child Component not loading after adding CUSTOM_ELEMENTS_SCHEMA to the app module

Question

I have a component named HostComponent , when I put this component as a start up component everything is working and my application working fine.

Then I create one more module called AppModule and Wrap the host component inside the app component

import { Component, Input } from '@angular/core';
@Component({
  selector: 'main-app',
  template: '<ds-framework-host >Loading...</ds-framework-host>'
})
export class AppComponent {
constructor(){

}
}

AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ,HostModule 
  ],
  schemas:[],
  bootstrap: [AppComponent],
  entryComponents: [
     SomeOtherEntryComponentsHere
  ]
})
export class AppModule {

}

Index.html

<body>
           <main-app></main-app>
</body>

Host Module(where Host Component exist)

@NgModule({
  declarations: [
    HostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DashboardModule,
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  exports:[]

})
export class HostModule {

 }

When I try to run the application I am getting the below error

To suppress this error I have added CUSTOM_ELEMENTS_SCHEMA to app module based on the below reference. CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

My error goes way but my <ds-framework-host> shows loading.. but nothing is executing inside this child component. In developer tools no error is showing

Angular Version - 4.0.0.0

How Can I resolve this error and why it's happening?

You need to import ds-framework-host component into your AppComponent . Can you also add your ds-framework-host component codes. — sa_, Jul 17 '17 at 19:56
@junky I dentified the issue it's because I missed exports in my host module — Jameel Moideen, Jul 17 '17 at 20:05

score 0 · Answer 1 · answered Jul 17 '17 at 19:56

0

you don't have your ds-framework-host component in your declarations array in your app.module. You should only use CUSTOM_ELEMENTS_SCHEMA if ds-framework-host is a native custom element

answered Jul 17 '17 at 19:56

Danny Blue

463
4
16

we no need to put in to declarations if the component is in another module. I have fixed my issue after I exports the component in my host module – Jameel Moideen Jul 17 '17 at 20:09

score 0 · Answer 2 · answered Jul 17 '17 at 19:58

Unfortunately there wasn't enough information on what exactly is your "HostComponent". All you had to do was add HostComponent to declarations in your AppModule to use in AppComponent.

@NgModule({
  declarations: [
    AppComponent,
    HostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
    .
    .
    .
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    SomeOtherEntryComponentsHere
  ]
})

export class AppModule {}

score 0 · Answer 3 · answered Jul 17 '17 at 20:14

I have fixed my issue by exports HostComponent in host module. Because this component is another module in order to use in App module we should export.

@NgModule({
  declarations: [
    HostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DashboardModule,
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  exports:[HostComponent]

})
export class HostModule {

 }

Child Component not loading after adding CUSTOM_ELEMENTS_SCHEMA to the app module

3 Answers3