Issue
in my Angular 13 project I have a npm dependency which has fesm2020
and fesm2015
module: see package.json
"module": "fesm2015/ds-components.mjs",
"es2020": "fesm2020/ds-components.mjs",
"esm2020": "esm2020/ds-components.mjs",
"fesm2020": "fesm2020/ds-components.mjs",
"fesm2015": "fesm2015/ds-components.mjs",
when i serve the angular project, the fesm2020
module is used. After lots of debugging I found out that the fesm2020
module has strange behaviour but the fesm2015
module would work. How can I tell angular to use the fesm2015
module instead?
Solution
So first of all with Angular before 14 you could control partly down-levelling with tsconfig.json Starting with Angular 14 it will be controlled by browserlist So for your Angular 13 application, the best way to do it is to use a custom webpack config. Because Angular team do not allow override webpack configuration, you might want to use this one (it will be applied over the angulars)
extra-webpack.config.ts
import { Configuration } from 'webpack';
export default {
resolve: {
conditionNames: ['es2020', 'es2015', '...'],
// conditionNames: ['es2015', '...'],
},
} as Configuration;
You can check the demo I've created
- clone & run npm I
- run npm run start
- open browser console - FESM2020 will be displayed
- stop build, delete .angular folder in the root with cached files
- modify extra-webpack.config.ts to allow only es2015
- repeat steps 2-3, you will see FESM2015
Answered By - Lonli-Lokli
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.