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

Edit: Also sharing angular.json

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "component-lib": { "schematics": { "@schematics/angular:component": { "style": "less" } }, "projectType": "library", "root": "projects/component-lib", "sourceRoot": "projects/component-lib/src", "prefix": "", "architect": { "build": { "builder": "@angular-devkit/build-angular:ng-packagr", "options": { "project": "projects/component-lib/ng-package.json", "tsConfig": "projects/component-lib/tsconfig.lib.json" }, "configurations": { "production": { "tsConfig": "projects/component-lib/tsconfig.lib.prod.json" }, "development": { "tsConfig": "projects/component-lib/tsconfig.lib.json" } }, "defaultConfiguration": "production" }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "codeCoverage": true, "tsConfig": "projects/component-lib/tsconfig.spec.json", "polyfills": [ "zone.js", "zone.js/testing" ], "karmaConfig": "karma.conf.js" } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { "lintFilePatterns": [ "./**/*.ts", "./**/*.html" ] } } } }, } } 

Also just for clarification this library is part of an angular workspace