@angular/localize loadTranslations can only be default-imported using the 'allowSyntheticDefaultImports' flag. #45179
Description
Which @angular/* package(s) are the source of the bug?
localize
Is this a regression?
Yes
Description
When an app imports loadTranslations() from @angular/localize in v13.x.x this throws an error when running ng build.
During testing I narrowed this down to import { loadTranslations } from '@angular/localize';. This only happens on v13.x.x of @angular packages.
Steps to reproduce:
- Create a new project using
ng new - Confirm that the project can be build
ng build - Install @angular/localize
npm install @angular/localize - Import
loadTranslationsinmain.ts(don't have to call it just importing will be enough) - Run
ng buildagain, the build will error
Adding allowSyntheticDefaultImports to tsconfig fixes the error but unsure if this is recommended or not.
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
~/C/b/angular-13-2 (main *) ng build
✔ Browser application bundle generation complete.
Error: node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/compiler_host.d.ts:9:8 - error TS1259: Module '"/Users/robertrhoades/Code/bmj/angular-13-2/node_modules/typescript/lib/typescript"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
9 import ts from 'typescript';
~~
node_modules/typescript/lib/typescript.d.ts:7594:1
7594 export = ts;
~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
Error: node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/logical.d.ts:9:8 - error TS1259: Module '"/Users/robertrhoades/Code/bmj/angular-13-2/node_modules/typescript/lib/typescript"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
9 import ts from 'typescript';
~~
node_modules/typescript/lib/typescript.d.ts:7594:1
7594 export = ts;
~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
Error: node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/util.d.ts:9:8 - error TS1259: Module '"/Users/robertrhoades/Code/bmj/angular-13-2/node_modules/typescript/lib/typescript"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
9 import ts from 'typescript';
~~
node_modules/typescript/lib/typescript.d.ts:7594:1
7594 export = ts;
~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
Please provide the environment you discovered this bug in (run ng version)
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 13.2.4
Node: 14.18.1
Package Manager: npm 6.14.15
OS: darwin x64
Angular: 13.2.3
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1302.4
@angular-devkit/build-angular 13.2.4
@angular-devkit/core 13.2.4
@angular-devkit/schematics 13.2.4
@angular/cli 13.2.4
@schematics/angular 13.2.4
rxjs 7.5.4
typescript 4.5.5
Anything else?
Confirmed this by making a new angular 13 project and also upgrading a new angular 12 project to 13. In both cases same result. Commenting out the loadTranslations import resolves the issue.