locked
using components of shared module in the others module for angular 4 RRS feed

  • Question

  • User620843474 posted

    this is the structure of my project, I have a common component named StarComponent is in <g class="gr_ gr_20 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="20" data-gr-id="20">sharedModule</g>. How can I use StarComponent in <g class="gr_ gr_42 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Punctuation multiReplace" id="42" data-gr-id="42">ClientListComponent.</g>

    needless to say, I have added StarComponent to export and declaration array in <g class="gr_ gr_21 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="21" data-gr-id="21">sharedModule</g> and import <g class="gr_ gr_22 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="22" data-gr-id="22">sharedModule</g> in (app.module or <g class="gr_ gr_23 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="23" data-gr-id="23">adminModule</g> or <g class="gr_ gr_24 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="24" data-gr-id="24">clinetModule</g> ) none of them works!

    ---app
    ------app.module.ts
    ------sharedModule
    ------------------StarComponent
    ------adminModule
    -----------------clinetModule
    -----------------------------ClientListComponent

    example : 

    //shared.module.ts
    @NgModule({
        imports:[],
        declarations: [StartComponent],
        exports: [StartComponent]
    })
    export class SharedModule { }
    
    //appmodule.ts
    @NgModule({
      declarations: [
        AppComponent,
        ...
      ],
      imports: [
        SharedModule,
        AdminModule,
        ....
      ],
      providers: [
        ....
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    //You can use StartComponent in your ClientListComponent
    
    //ClientListComponent.ts
    import { StartComponent } from '../../../sharedModule/StartComponent.ts;
    
    @Component({
      selector: 'app-root',
      template: `
        <app-client-list></app-client-list>
        `
    })

    It does not work! you can test for sample project!

    and it says :

    [Angular]
    'app-start' is not a known element:
    1. If 'app-start' is an Angular component, then verify that it is part of this module.
    2. If 'app-start' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to <g class="gr_ gr_26 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="26" data-gr-id="26">suppre</g>

    Updated: 

    This is an example that does not work correctly : 

    demo: https://stackblitz.com/edit/angular-aceiz9

    thanks in advance!

    Monday, April 30, 2018 8:58 PM

All replies

  • User1163516801 posted

    Import the SharedModule in your ClientModule. 

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { ClientListComponent } from './client-list/client-list.component';
    import { ClientRoutingModule } from './client-routing'; 
    import { SharedModule } from '../../shared/shared.module';
    
    @NgModule({
      imports: [
        CommonModule,
        ClientRoutingModule,
        SharedModule
      ],
      declarations: [ClientListComponent]
    })
    export class ClientModule { }

    <audio controls="controls" style="display: none;"></audio>

    Wednesday, May 2, 2018 3:23 AM
  • User620843474 posted

    Import the SharedModule in your ClientModule. 

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { ClientListComponent } from './client-list/client-list.component';
    import { ClientRoutingModule } from './client-routing'; 
    import { SharedModule } from '../../shared/shared.module';
    
    @NgModule({
      imports: [
        CommonModule,
        ClientRoutingModule,
        SharedModule
      ],
      declarations: [ClientListComponent]
    })
    export class ClientModule { }

    hi,

    thanks for replying, I think it's not ok to import SharedModule to ClientModule because we have added SharedModule to AppModule. Is it true?

    Wednesday, May 2, 2018 6:03 AM