How to only import part of an Angular library?

68 Views Asked by At

My goal:

  1. To only import part of an Angular library.

Let say I have MyAppUI library which have 2 NgModules:

  1. MyAppButtonModule
  2. MyAppCheckboxModule

Then I have a /app3/view1 path which import MyAppButtonModule.

My expected result:

  1. when I visit /app3/view1, the browser will only download MyAppButtonModule.

My actual result:

  1. when I vist the page, in common.js, I see that MyAppCheckboxModule is also present.

The solution (which is not desirable):

  1. import to projects instead of @@myAppUI:
    1. import { MyAppButtonModule } from 'projects/my-app-ui/src/lib/my-app-button/my-app-button.module'
    2. import { MyAppCheckboxModule } from 'projects/my-app-ui/src/lib/my-app-checkbox/my-app-checkbox.module'

The repository

The code:

view1.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { View1RoutingModule } from './view1-routing.module';
import { View1Component } from './view1.component';
import { NavModule } from 'src/app/app3/nav/nav.module';
import { MyAppButtonModule } from '@@myAppUI';


@NgModule({
  declarations: [
    View1Component,
  ],
  imports: [
    CommonModule,
    View1RoutingModule,
    NavModule,

    MyAppButtonModule,
  ]
})
export class View1Module { }

tsconfig.json

{
  "compilerOptions": {
...
    "paths": {
...
      "@@myAppUI": [
        "dist/my-app-ui"
      ]
    }
...
  }
}

projects/my-app-ui/src/public-api.ts

/*
 * Public API Surface of my-app-ui
 */

export { MyAppUIModule } from './lib/my-app-ui.module';

export { MyAppCheckboxModule } from './lib/my-app-checkbox/my-app-checkbox.module';
export { MyAppCheckboxComponent } from './lib/my-app-checkbox/my-app-checkbox.component';

export { MyAppButtonModule } from './lib/my-app-button/my-app-button.module';
export { MyAppButtonComponent } from './lib/my-app-button/my-app-button.component';

enter image description here

0

There are 0 best solutions below