Search code examples
angularyeoman-generator

Custom Angular Library Import multiple Modules not barrel


Hi I am trying to build a custom Angular Library. Using yeoman-generator (link) I get a template to build upon, that works just fine. The problem is that it uses a (not anymore best practice) barrel index.ts, and what I want is to be able to have one module per component and import accordingly.


Solution

  • In case someone faces the same problem, here is how my files are now structured and connected:

    I have a component with the desired functionality HelloWorld

    Then a module for this component:

    import { NgModule, ModuleWithProviders } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { HelloWorld } from './hello-world.component';
    
    export * from './hello-world.component';
    
    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [
        HelloWorld,
      ],
      exports: [
        HelloWorld,
      ]
    })
    export class HelloWorldModule {}
    

    And finally inside the index.ts file is only this line:

    export * from './hello-world.module';
    

    To use in the projects the app.module.ts import is:

    import { HelloWorldModule } from 'test-lib'
    

    and also add HelloWorldModule to the imports array.