Angular app not using es5 transpiled library

Question

I'm following the guide at https://angular.io/guide/creating-libraries to create a library. I build it using this config:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es5",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

The only thing I've changed from what's included out of the box, is that I've changed the target from es2015 to es5. After publishing it to npm, and installing it in my app, I try to run my app (Angular 8) using ng serve --configuration es5.

The es5 configuration says:

 "configurations": {
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
}

tsconfig.es5.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "ES5",
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "ESNext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "ES2018",
      "DOM"
    ],
    "paths": {
      "@config/*": ["app/config/*"],
      "@core/*": ["app/core/*"],
      "@environments/*": ["environments/*"],
      "@modules/*": ["app/modules/*"],
      "@requests/*": ["app/core/request-interfaces/*"],
      "@responses/*": ["app/core/response-interfaces/*"],
      "@shared/*": ["app/shared/*"]
    }
  },
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

When running my app as described, I'm getting this error from the imported library: Uncaught TypeError: Class constructor MyClass cannot be invoked without 'new'

It's triggered by me extending a class from the package: export class MyClass extends PackageClass {}

I understand that this error is triggered by es2015 not supporting the class keyword, but shouldn't building the library with es5 target prevent my app from using it like this? I can't find anything in the library documentation saying anything about supporting es5 browsers.

Answer 1

Turns out that this is due to the fact that Angular Libraries are not backward compatible, only forward compatible: https://github.com/angular/angular-cli/issues/19909