Unable to reproduce fully treshakeable icon library
See original GitHub issueIβve been trying to follow the steps outlined in the README and the Guide on Medium, but Iβm unable to get a fully tree-shakeable library.
All icons always end up in the main bundle, even when I clone the PoC repo .
I have been able to create a fully tree-shakeable icon lib, but it requires additional steps. I had to configure ng-packagr to treat each icon as a secondary entry point.
I moved each icon.ts file into its own directory with the following structure
my_icon_package
βββ src
| βββ public_api.ts
| βββ icon.model.ts
βββ ng-package.json
βββ package.json
βββ icons
βββ svg-icon-home
| βββ src
| | βββ public_api.ts
| | βββ svg-icon-home.ts
| βββ package.json
βββ svg-icon-back
| βββ src
| | βββ public_api.ts
| | βββ svg-icon-back.ts
| βββ package.json
βββ svg-icon-forward
| βββ src
| | βββ public_api.ts
| | βββ svg-icon-forward.ts
| βββ package.json
public_api exports the single icon file and package json just contains
{
"ngPackage": {}
}
Now when I try to build my lib, it actually builds each icon seperately.
Now I have to import each icon from its own secondary entry point
Before:
import { mySvgIcon } from '@myorg/shared/ui/icons';
now: `import { mySvgIcon } from β@myorg/shared/ui/icons/my-svg-iconβ;
This produces the same result you have gotten in your article.
Is this expected or has something changed?
Should support for a new generator βpackagesβ be added?
The setup I have used actually mimics what is being done in the @angular/components and @angular/angular repo
Sample build output:
> ng run shared-ui-icons:build:production
Building Angular Package
------------------------------------------------------------------------------
Building entry point '@myorg/shared-ui-icons'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Writing package metadata
Built @myorg/shared-ui-icons
------------------------------------------------------------------------------
Building entry point '@myorg/shared-ui-icons/src/icons/svg-access-point-network'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Writing package metadata
Built @myorg/shared-ui-icons/src/icons/svg-access-point-network
------------------------------------------------------------------------------
Building entry point '@myorg/shared-ui-icons/src/icons/svg-access-point'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Writing package metadata
Built @myorg/shared-ui-icons/src/icons/svg-access-point
------------------------------------------------------------------------------
Building entry point '@myorg/shared-ui-icons/src/icons/svg-account-alert'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Writing package metadata
Built @myorg/shared-ui-icons/src/icons/svg-account-alert
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (6 by maintainers)
@kreuzerk Thanks for answering. It works fine when the files from the dist folder. Iβm not sure the ng-packagr converter I mentioned earlier is needed now. Let me know if you want to have a look anyway. It basically just creates one package subentry for each icon, but the build process is much slower compared to the way you do it now.
I did experiment with creating an angular builder for svg-to-ts, making you able to just run
ng run icons:build
to produce the tree-shakeable icon files.The cool thing about it is that if you use it inside an Nx Workspace, nx can cache the build output and you can even configure nx to know that it has to rebuild the library if a new svg-file is added to the svg-directory or if the svg-to-ts configuration changes in package.json.
I think I also want to create some angular-cli schematics to set up the projects you need to create an icon library using svg-to-ts.
Do you think this belongs in a separate project, or would you be interested in having it as part of this repo?
Hi, @glenngr I researched a bit why this doesnβt work for you and I figured out that there is still something wrong in the description of my post. Sorry for that π₯
The issue is that the showcase I was using used the library from the
projects
folder instead of thedist
folder. In such cases, the output is different because we are missing the library build step. The library is built as part of the showcase build an therefore the tree shaking is working.However, I also used
svg-to-ts
in a big enterprise client, and there tree shakable icons are working. Basically you need to letsvg-to-ts
handle the icons and notng-packagr
.ng-packagr
produces one big bundle with all icons that break tree shaking. To letsvg-to-ts
handle the icon compilation you have two options:README
svg-icon-library-starter.svg-to-ts
to build the icons into thedist
folder.