Angular call component from one module to another module

Question

I have two modules gridusers module and users module.The grid module will list the all users in data table , when I click the action item edit it will open a popup to edit the users. With the edit user, I'm trying to create a component in user module. When I try to use that edit user component in gridusers module, I'm getting an error:

template parse error and Uncaught (in promise): Error: Template parse errors: 'app-edit-user' is not a known element:

If 'app-edit-user' is an Angular component, then verify that it is part of this module.

If 'app-edit-user' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Any help on this?

gridmodule
  -- gridmodule.ts
  -- gridcomponent.ts
  -- gridcomponent.html
  -- gridcomponent.scss

usermodule
  -- usermodule.ts
  -- usercomponent.ts
  -- usercomponent.html
  -- editusercomponent.ts
  -- editusercomponent.html
  -- usercomponent.scss
  -- editusercomponent.scss

editusercomponent.ts

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

@Component({
  selector: 'app-edit-user',
  templateUrl: './editusercomponent.html',
  styleUrls: ['./editusercomponent.scss']
})
export class editusercomponent{
  title = 'edit user';
}

gridmodule.ts

@NgModule({
    declarations: [
        editusercomponent
    ],
    imports: [
        .-----
    ],
})

please provide any code, and I think the problem is you didn't declare your component in your module. — John Velasquez

Vikas Vikas · Accepted Answer · 2018-04-21T12:01:57

Use @ngModule's exports array. Every element defined in the declarations array is private by default. you should only export whatever the other modules in our application need to perform its job.

usermodule.ts

import { CommonModule } from '@angular/common';
    @NgModule({
       imports:[CommonModule],
        declarations: [
            editusercomponent
        ],
       exports:[ editusercomponent]
    })

gridmodule.ts
Regsiter usermodule in gridmodule's imports array

 import { UserModule } from '../user-module/user.module';
    @NgModule({
      imports: [
        BrowserModule,
       UserModule
      ],
      declarations: [],
      bootstrap: []
    })

Angular call component from one module to another module

2 Answers