My goal:
- To only import part of an Angular library.
Let say I have MyAppUI
library which have 2 NgModules:
- MyAppButtonModule
- MyAppCheckboxModule
Then I have a /app3/view1
path which import MyAppButtonModule
.
My expected result:
- when I visit
/app3/view1
, the browser will only downloadMyAppButtonModule
.
My actual result:
- when I vist the page, in
common.js
, I see thatMyAppCheckboxModule
is also present.
The solution (which is not desirable):
- import to projects instead of
@@myAppUI
:import { MyAppButtonModule } from 'projects/my-app-ui/src/lib/my-app-button/my-app-button.module'
import { MyAppCheckboxModule } from 'projects/my-app-ui/src/lib/my-app-checkbox/my-app-checkbox.module'
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';