Angular 4 Component of sub module is not working when using in root/main module

1
votes

I have a angular module (@ngModule) named SubModule which contains a component named SubComponent with css selector 'app-subcomp'.

I have imported this sub module into my AppModule (application shell). So my AppModule (@ngModule) contains AppComponent with 'app-root' css selector and one sub module (SubModule).

When i write '< app-subcomp >' into my app.component.html, it is not rendering sub.component.html.

but when i directly declare my SubComponent into AppModule, its working fine.

Not sure why it is not rendering in first case?

Please suggest.

Thank You

sub.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { SubComponent } from './sub.component'; 

@NgModule({ 
     imports: [ CommonModule ], 
     declarations: [SubComponent], 
}) 
export class SubModule { }
1
angular
We can play a million posts or you can share your code - Iancovici
did you export the SubComponent in sub module? Share the sub module.ts code - Deepak Kumar T P
Hi Deepak,Below is the submodule code - import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SubComponent } from './sub.component'; @NgModule({ imports: [ CommonModule ], declarations: [SubComponent], }) export class SubModule { } - Atul
@Atul not recommended posting question code in comment section. Just edit question, copy-paste code to your post, highlight pasted code and hit ctrl+k to convert to code format - Iancovici

1 Answers

5
votes

You have to export SubComponent:

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