How can I load only one module from Angular library instead of all modules

问题

I have generated an angular library and created two modules named Admin and Client in it. In each module, I have one service.

lib
   admin
      admin.service.ts
      amdin.module.ts
   client
      client.service.ts
      client.module.ts
public-api.ts

The content of public-api.ts is:

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

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

Then:

ng build core

This way, if I import AdminModule in AppModule like the following:

import { AdminModlue } from 'core';

Why does Angular load AdminModule and ClientModuel and their services while it must only load AdminModule?

If we inspect the Network tab of our browser we will see in the main.js.

How can I load only AdminModule?

回答1:

You need to research about lazy loading. With it you could load your app modules when these will be required. But your first goal must be split your app in nice domain driven modules and configure your main routing config to load with loadChildren.

Some references:

https://angular.io/guide/lazy-loading-ngmodules

https://khalilstemmler.com/articles/typescript-domain-driven-design/chain-business-logic-domain-events/

https://medium.com/angular-in-depth/angular-code-splitting-or-how-to-share-components-between-lazy-modules-432c755e389c

https://blog.bitsrc.io/boost-angulars-performance-by-lazy-loading-your-modules-ca7abd1e2304

回答2:

Do not call any component of module in routing module (app-routing-module.ts).

Just call via loadChildren method. You may also search for lazy loading.

const routes: Routes = [
    { path: 'login', loadChildren: './login/login.module#LoginModule' },
];

来源：https://stackoverflow.com/questions/62489230/how-can-i-load-only-one-module-from-angular-library-instead-of-all-modules

标签

angular

angular-library