Angular 13: Getting Uncaught SyntaxError: Unexpected token 'export' when I run the app

Type of Issue

[x ] Bug Report
[ ] Feature Request

Description

I have updated the Angular from 12 to 13. When I run the app I am getting the error “Uncaught SyntaxError: Unexpected token 'export”. Adding below few details to get the context.

Earlier in angular.json config, I had below dependent entries in scripts section.

“scripts”: [ “./node_modules/@angular/core/bundles/core.umd.min.js”, “./node_modules/@angular/common/bundles/common.umd.min.js”, ]

After the angular update to 13, I noticed that in place of umd JS files we have .mjs file (Modular JS files) “./node_modules/@angular/core/esm2020/core.mjs”. So I have added .mjs file location inside scripts section of angular json configuration

When I run the app I’m getting the error from scripts.js and it’s pointing to the line “export * from ‘./index’;” (this line is from core.mjs file)

Please let me know how to fix this issue?

I tried adding the type “module” in main package.json. But still getting the same issue.

Note: If I execute the above script manually eg: node --es-module-specifier-resolution=node ./node_modules/@angular/core/esm2020/core.mjs it works fine

How To Reproduce

1. Take any Angular 13 app and add below entries like “./node_modules/@angular/core/esm2020/core.mjs” in scripts section of Angular.json configuration file
2. Build and run the app
3. In browser console, you will see the error Uncaught SyntaxError: Unexpected token ‘export’

Expected Behaviour

1. App should run without any JS errors
2. Should be able to identify the export keyword

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr: ^13.3.0
@angular/compiler: ~13.3.0 
typescript: ~4.6.2
rxjs: ^6.6.7
node: 12.20.2/14.15.5/16.10.0 (Tried with all these Node versions)
npm: 6.14.11

Please include all version numbers that might be relevant, e.g. third-party libraries

[alan-agius4]

This is expected as the ESM modules are not a 1 to 1 replacement for UMDs and cannot be used in the scripts configuration.

In general the Angular framework in not intended to be used as a global script as this will cause opt-out of a number of optimisations to reduce bundle size.

If for one reason or another you do still need to use UMD bundles which is discouraged, you’d need to do the transformations yourself.

[github-actions[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

_{This action has been performed automatically by a bot.}