Ng build with Path mapping is not transpiling ES6 class when making changes

[mengzhen94]

Search Terms: Transpile, es6, Path mapping

I am using path mapping to import ES6 modules and here is tsconfig.json:

Code

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "baseUrl": "./src/",
    "paths": {
      "@shared/*": ["../../shared/*"] -> this is the ES6 modules
    },
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5", -> targeting to es5
    "types": [
      "underscore"
    ],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "plugins": [
      {
        "name": "tslint-language-service"
      }
    ],
    "module": "es2015",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

Here is the example of the ES6 js classes:

class A {
  constructor () {
    this.a = 1;
  }
}
export default A;

Class B is extending class A

import A from './A';
class B extends A {
  constructor () {
    this.B = 2;
    super();
  }
}

export default B;

Here is how I import it:

import B from '@shared/B';

Reproduce Steps:

• Compile typescript modules with
  "node ../node_modules/@angular/cli/bin/ng build --watch --output-path ../dist --base-href /src/ --progress;"
• load page, it works well, both class A and class B are transpiled to ES5
• Make a change to class A
• Refresh page

Expected behavior:
Should transpile changed Class A to ES5 and load classes

Actual behavior:
Giving an error:

TypeError: Class constructor A cannot be invoked without 'new'

Because Class A is now ES6 and Class B is still ES5 so class B cannot extend A anymore

🌍 Your Environment

Angular Version:

Angular CLI: 7.3.9
Node: 11.3.0
OS: linux x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.2
typescript                        3.2.4
webpack                           4.29.6

[mgechev]

This seems related to #7200?

[alan-agius4]

Hi @mengzhen94, is this still reproducible using Angular CLI version 8?

[mengzhen94]

@alan-agius4 I am still using version 7. Not sure if it happens with 8

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[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.}