In the folder generated by ng build simple-lib, I see a more plex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.

I see the piled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.

$ tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-libponent.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-libponent.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-libponent.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json

In the folder generated by ng build simple-lib, I see a more plex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.

I see the piled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.

$ tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-lib.ponent.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-lib.ponent.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-lib.ponent.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json

• javascript
• angular
• typescript
• angular-cli
• node-modules

Share Improve this question Follow asked Dec 21, 2018 at 11:54 David StreidDavid Streid 72433 gold badges1212 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

While updating my angular version, I think I may have found the answer. The library that will be used is dependent on the browser requesting the application - The esm5 build will be used for older browsers that require more polyfills and the esm2015 libraries will be used for newer browsers that require fewer polyfills

"The CLI's build mand now automatically creates a modern ES2015 build with minimal polyfills and a patible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io."

From https://update.angular.io/#7.1:9.0

As per the "Angular Package Format" specs -

In today’s JavaScript landscape, developers will consume packages in many different ways. For example, some may use SystemJS, others could use Webpack. Still, others might consume packages in Node or maybe in the browser as a UMD bundle or through global variable access.

Read more from this link - https://docs.google./document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview