title: Angular Multiple Modules - How can I get an external NPM component to work across multiple modules in Angular?
body: <p>I have successfully followed the instructions here <a href="https://www.npmjs.com/package/ngx-avatar" rel="nofollow noreferrer">ngx-avatar</a> to install this component in one of my app's modules.</p>
  
  <p>The module is called <strong>Core</strong>. The component that it is in is called learnerbar. Within the learnerbar html I have placed the tag </p>
  
  <p><code>&lt;ngx-avatar facebookId="123456789" size="150"&gt;&lt;/ngx-avatar&gt;</code></p>
  
  <p>This is working perfectly.</p>
  
  <p>I now also want to use it in a different module called <strong>Features</strong>.</p>
  
  <p>The component is called my-profile and within the html file I have place the identical tag as above.</p>
  
  <p>Firstly I imported the <strong>AvatarModule</strong> into the Features Module in exactly the same way as in the Core Module.</p>
  
  <p>Import statement &amp; added to imports array.</p>
  
  <p>The one in the Core module works fine, The one in the Features module gives me the error </p>
  
  <p><code>'ngx-avatar' is not a known element:</code></p>
  
  <p>Secondly I removed all references to AvatarModule in both the Core and the Features Module, then created a <strong>Shared</strong> module where it imports the Avatar Module, adds it to both the imports and exports arrays, then I imported the shared module into both the Core Module and the Features Module and still the Core one works but the features one does not. It still says </p>
  
  <p><code>'ngx-avatar' is not a known element:</code></p>
  
  <p>What am I doing wrong? Can some external components only be used in one module. Can anybody make this component work across 2 different modules? </p>
  
  <p><strong>EDIT:</strong> Code added</p>
  
  <p>Shared Module</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  import { MenuItems } from './menu-items';
  import { AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from './accordion';
  import { HighlightDirective } from './accordion';
  import { SpinnerComponent } from './spinner.component';
  import { Courses } from './courses';
  
  import { AvatarModule } from 'ngx-avatar';
  
  
  @NgModule({
    declarations: [
      HighlightDirective,
      AccordionAnchorDirective,
      AccordionLinkDirective,
      AccordionDirective,
      // SpinnerComponent
    ],
    exports: [
      HighlightDirective,
      AccordionAnchorDirective,
      AccordionLinkDirective,
      AccordionDirective,
      AvatarModule
      // SpinnerComponent
     ],
     imports: [
      AvatarModule
     ],
    providers: [ MenuItems, Courses ]
  })
  export class SharedModule { }
  </code></pre>
  
  <p>Core Module:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { MaterialModule } from '../shared/module/material.module';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import { FullComponent } from './layouts/full/full.component';
  import { RouterModule } from '@angular/router';
  
  
  import { MenuItems } from '../shared/menu-items';
  import { HighlightDirective, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from 'src/app/shared/accordion';
  import { HeaderComponent } from './layouts/full/header/header.component';
  import { SidebarComponent } from './layouts/full/sidebar/sidebar.component';
  import { SpinnerComponent } from '../shared/spinner.component';
  import { FiltercoursesPipe } from './pipes/filtercourses.pipe';
  import { LearnerbarComponent } from './layouts/full/learnerbar/learnerbar.component';
  // import { AvatarModule } from 'ngx-avatar';
  import { SharedModule } from '../shared/shared.module';
  import { ProfileComponent } from './layouts/full/profile/profile.component';
  
  
  @NgModule({
    declarations: [
      FullComponent,
      HeaderComponent,
      SidebarComponent,
      // SpinnerComponent,
      // HighlightDirective,
      // AccordionAnchorDirective,
      // AccordionLinkDirective,
      // AccordionDirective,
      FiltercoursesPipe,
      LearnerbarComponent,
      ProfileComponent
     ],
    imports: [
      RouterModule,
      CommonModule,
      MaterialModule,
      FlexLayoutModule,
      // AvatarModule
      SharedModule
    ],
    exports: [ FiltercoursesPipe],
    providers: [ MenuItems ]
  })
  export class CoreModule { }
  </code></pre>
  
  <p>Features Module</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { TrainingPlanComponent } from './training-plan/components/training-plan.component';
  import { LisElearningComponent } from './learning-items/components/lis-elearning/lis-elearning.component';
  import { LisInstructorComponent } from './learning-items/components/lis-instructor/lis-instructor.component';
  import { SharedModule } from '../shared/shared.module';
  import { CourseLibraryComponent } from './course-library/course-library.component';
  import { ResourcesComponent } from './resources/resources.component';
  import { MyProfileComponent } from './my-profile/my-profile.component';
  import { SupportComponent } from './support/support.component';
  import { Courses } from '../shared/courses';
  import { FiltercoursesPipe } from '../core/pipes/filtercourses.pipe';
  // import { AvatarModule } from 'ngx-avatar';
  
  
  @NgModule({
    declarations: [
      DashboardComponent,
      TrainingPlanComponent,
      LisElearningComponent,
      LisInstructorComponent,
      CourseLibraryComponent,
      ResourcesComponent,
      MyProfileComponent,
      SupportComponent,
    ],
    imports: [
      CommonModule,
      SharedModule,
      // AvatarModule
    ],
    entryComponents: [],
    providers: [ Courses,
       FiltercoursesPipe ]
  }) 
  export class FeaturesModule { }
  </code></pre>
  
  <p><strong>EDIT2</strong>: - Because I am on a deadline with work I moved the My Profile folder to the same folder as the learnerbar and changed the routing. Now it is using the Core Module and it is working. A workaround and not an answer to my question though.</p>