Angular 17 Library build size is too large (40MB)

I have made an Angular 17 library that I want to publish, but I have noticed that one file in particular in my build is very large.

My dist folder has a fesm2022 directory, which contains an .mjs file which is over 38MB. I used source-map-explorer and found that the file contains most of the components in my library, which all take up close to 3.4MB.

Interestingly there are 3 components which are much smaller, but I can't see a difference between them.

I was wondering if I am somehow doing the imports for things from @angular/core incorrectly, or if there is a problem with my library config.

Here is an example of one of the components which is 3.4MB:

import {Component} from '@angular/core';
import {TooltipPosition} from './rainbow-tooltip.enums';
import {NgClass} from '@angular/common';

@Component({
selector: 'rainbow-tooltip',
standalone: true,
imports: [NgClass],
templateUrl: './rainbow-tooltip.component.html',
styleUrl: './rainbow-tooltip.component.less'
})
export class RainbowTooltipComponent {
tooltip = '';
left = 0;
top = 0;
position: TooltipPosition = TooltipPosition.ABOVE;
visible = false;
protected readonly TooltipPosition = TooltipPosition;
}


And here is an example of one of the components which is much less at 11KB:

import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
import {IconType, RainbowIconService} from './rainbow-icon.service';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {NgClass} from '@angular/common';

@Component({
selector: 'rainbow-icon',
standalone: true,
imports: [NgClass],
templateUrl: './rainbow-icon.component.html',
styleUrl: './rainbow-icon.component.less',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [RainbowIconService]
})
export class RainbowIconComponent {
@Input() name: IconType;
@Input() color = 'inherit';
@Input() size = 24;

@Output() clicked = new EventEmitter<void>();

protected get svg(): SafeHtml {
const svgContent = this.iconService.getSvgForName(this.name);
return this.sanitizer.bypassSecurityTrustHtml(svgContent);
}

constructor(
private sanitizer: DomSanitizer,
private iconService: RainbowIconService
) {}
}


Here is the package.json for my library:

{
"name": "@my-org/rainbow-library",
"version": "0.0.1",
"main": "fesm2022/my-org-rainbow-library.mjs",
"module": "fesm2022/my-org-rainbow-library.mjs",
"es2022": "fesm2022/my-org-rainbow-library.mjs",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng run build-storybook",
"test": "ng test --no-watch --no-progress",
"storybook": "ng run storybook"
},
"peerDependencies": {
"@angular/cdk": "^17.3.10",
"@angular/common": "^17.3.10",
"@angular/core": "^17.3.10"
},
"dependencies": {
"tslib": "^2.3.0"
},
"sideEffects": false
}


And here is the tsconfig.lib.json

{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/rainbow-library",
"target": "ES2022",
"declaration": true,
"declarationMap": false,
"sourceMap": false,
"inlineSources": false,
"inlineSourceMap": false,
"emitDeclarationOnly": false,
"importHelpers": true
},
"exclude": [
"**/*.spec.ts"
],
"angularCompilerOptions": {
"compilationMode": "partial",
"sourceMap": false
}
}


And also the ng-package.json

{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/rainbow-library",
"lib": {
"entryFile": "src/public-api.ts",
"cssUrl": "inline",
"styleIncludePaths": [
"src/lib/styles",
"src/lib/assets/fonts",
"./lib/assets/"
]
},
"allowedNonPeerDependencies": ["tslib"],
"assets": [
"./src/lib/styles",
"./src/lib/assets/fonts"
]
}


Any ideas what I am doing wrong that is leading to the fesm2022 .mjs file to be so large?

Thanks for any suggestions

Continue reading...