Angular 2 component doesnt render even if i put it in NgModule

Question

I have a problem with rendering custom component. Even if i put my shared module in NgModule it doesnt render. I get an error where it says that i should add component to NgModule or add property schemas with parameter CUSTOM_ELEMENTS_SCHEMA. As i said i added component to shared module and shared module to component where i want to use it. And then i tried with CUSTOM_ELEMENTS_SCHEMA and i got rid of and error but it doesnt render the content of "custom" component it just renders the tag od the comp.

Custom component module

checkbox.module.ts

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { CheckboxComponent } from './checkbox.component';

@NgModule({
    imports: [FormsModule],
    exports: [CheckboxComponent],
    declarations: [CheckboxComponent]
})
export class CheckboxModule { }

Shared module

shared.module.ts

Edit:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckboxModule, CheckboxComponent } from '../components/checkbox';
@NgModule({
    imports: [
        CommonModule,
        CheckboxModule
    ],
    declarations: [],
    exports: [ CheckboxComponent ]
})
export class SharedModule { }

Module where i am trying to use shared module and custom component tag:

dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { SharedModule } from '../shared/shared.module';
@NgModule({
    imports: [
        SharedModule,
        CommonModule
    ],
   declarations: [DashboardComponent]
})

export class DashboardModule { }

And it renders like a tag with no content

<app-checkbox _ngcontent-c1 name="sth"></app-checkbox>

score 0 · Answer 1 · answered Dec 07 '17 at 09:28

0

You are declaring CheckboxComponent in two modules. It should be enough to declare it in shared module

answered Dec 07 '17 at 09:28

jbojcic

954
1
11
25

I tried to remove declaration in checkbox.module.ts but an issue still persist but thanks on seeing that – A. Omahen Dec 07 '17 at 09:32

Michael Kang · Answer 2 · 2017-12-07T09:39:18.210

You have declared the same component too many times. Based on your use case, every component should be declared in exactly one module. Think of it the same way as declaring a variable - you only do it once, and then you can start using it. If a component is declared and exported from the same module, then the component can also be used downstream as well and not just the module where it was declared.

Since you already declared CheckboxComponent from FormsModule, you don't need to declare or export it again. That being said, you may want to consider exporting the entire module if it makes sense to do so:

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { CheckboxComponent } from './checkbox.component';

@NgModule({
    imports: [FormsModule],
    exports: [FormsModule]
})
export class CheckboxModule { }

Sorry my mistake I c/p wrong code.. i edited the post, but good point — A. Omahen, Dec 07 '17 at 09:39

score 0 · Answer 3 · answered Dec 07 '17 at 18:39

0

I found where the problem was. In app.module.ts I had to import dashboard.module.ts module instead of declaring dashboard.component.ts componnent. I guess that everything should be done through modules if possible :)

I hope this helps someone.

answered Dec 07 '17 at 18:39

A. Omahen

11
2

Angular 2 component doesnt render even if i put it in NgModule

3 Answers3