[@angular-devkit/build-optimizer] Optimization error when using Type-only Imports and emitDecoratorMetadata

[lachieh]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

No, this is a new issue relating to the type-only imports feature added to TypeScript 3.8

Description

When emitDecoratorMetadata is enabled in the tsconfig and a component is using a type-only import, the build --prod command produces an error. The error goes away when architect.build.configurations.production.optimization is set to false in angular.json, but this isn't a valid solution.

🔬 Minimal Reproduction

Repro Repo:
https://github.com/lachieh/type-only-test

run ng build --prod to see the error

🔥 Exception or Error

ERROR in ./src/app/app.component.ts 1:12
Module parse failed: Unexpected token (1:12)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
> import type { SimpleChanges } from '@angular/core';
| import * as i0 from "@angular/core";
| import * as i1 from "@angular/common";

🌍 Your Environment

Angular CLI: 10.1.7
Node: 14.4.0
OS: darwin x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      10.1.7
@angular/cli                    10.1.7
@schematics/angular             10.1.7
@schematics/update              0.1001.7
rxjs                            6.6.3
typescript                      4.0.5

[alan-agius4]

Thanks for reporting this issue. I can confirm that bug.

@lachieh, on a side node, in many cases you don't need to use type-only imports, unless you are hitting some issues with the following TypeScript’s flag isolatedModules, TypeScript’s transpileModule API, or Babel. Which are not in use by Angular CLI.

More info about: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export

[angular-automatic-lock-bot]

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

Read more about our automatic conversation locking policy.

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