Load one module from Angular Library Instead of loading the whole library

Question

I have an angular library that has been generated with the following command:

ng generate library cac-models

In this library, I have two modules named Admin and Client Module.When I'd like to use Admin module I have to load it like the following command and then import it:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminModule } from 'cac-models';  //=> this line

@NgModule({
  declarations: [AppComponent],
  imports:
    [
      BrowserModule,
      AdminModule,
      AppRoutingModule
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This way, Angular loads the whole library (both admin and client module), because I import AdminModule from cac-models.

I'd like to load only the Admin Module. like below:

 import { AdminModule } from 'cac-models/lib/admin/admin.module'; // I get error

In this way, I get the following error

Module not found: Error: Can't resolve 'cac-models/lib/admin/admin.module'

Is it possible to do?

Abolfazl Roshanzamir · Accepted Answer · 2020-01-08 21:14:55Z

According to your question, you have the following structure in the projects folder :

-projects
---------cac-models
-------------------src
----------------------lib
-------------------------Admin(module)
--------------------------------------admin-component-one
--------------------------------------admin-component-two
--------------------------------------admin-component-three
-------------------------Client(module)
---------------------------------------client-component-one
---------------------------------------client-component-two
---------------------------------------client-component-three
----------------------public-api.ts

AdminModule :

@NgModule({
  declarations:
    [
      AdminComponentOneComponent,
      AdminComponentTwoComponent,
      AdminComponentThreeComponent
    ],
  imports:
    [
      CommonModule
    ],
  exports:
    [
      AdminComponentOneComponent,
      AdminComponentTwoComponent,
      AdminComponentThreeComponent
    ]
})
export class AdminModule { }

ClientModule :

@NgModule({
  declarations:
    [
      ClientComponentOneComponent,
      ClientComponentTwoComponent,
      ClientComponentThreeComponent
    ],
  imports:
    [
      CommonModule
    ],
  exports:
    [
      ClientComponentOneComponent,
      ClientComponentTwoComponent,
      ClientComponentThreeComponent
    ]
})
export class ClientModule { }

your public-api should be like the following:

export * from './lib/admin/admin.module';
export * from './lib/client/client.module';

then , build the cac-models library with the following command :

ng build cac-models

wherever you want to use only AdminModule, you have to import it like the following :

import { AdminModule } from 'cac-models';

maybe you ask your self, here Angular loads the whole library , the answer is : no , here Angular loads only AdminModule of cac-models instead the whole library .

for test:

import AdminModule in the AppModule then install Augury extension to see the result (here you will see that angualr loads only AdminModule(along with 3 exported components) insted of the whole library)

Barkha · Accepted Answer · 2019-08-22 13:27:10Z

1

If you are importing AdminModule specifically only that will be a part of the final build and all the dead code will be removed. This happens as a part of tree shaking which you read about here https://webpack.js.org/guides/tree-shaking/

answered Aug 22, 2019 at 13:27

Barkha

7223 silver badges8 bronze badges

1 Comment

Abolfazl Roshanzamir Over a year ago

@Barkha- Thanks, Your explanation is awesome. In development mode angular loads everything from our custom library but in production mode Angular loads only Whatever is needed.

Collectives™ on Stack Overflow

Load one module from Angular Library Instead of loading the whole library

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related