Abstracting @Injectable with Angular Ivy does not work

[GregOnNet]

🐞 bug report

Affected Package

• @angular/core
• @angular/compiler
• @angular/platform-browser-dynamic

Is this a regression?

• It works, if Ivy is disabled.

Description

Without Ivy, it is possible to build an abstraction for @Injectable (e.g. for configuring the provider dynamically, enhancing the service class).

The following snippet shows an example how @Injectable can be wrapped.

export function InjectableEnhanced() {
  return <T extends new (...args: any[]) => InstanceType<T>>(target: T) => {
    Injectable({ providedIn: "root" })(target);
  };
}

Using the decorator @InjectableEnhanced (see above) does not work while Ivy is enabled. The following code snipped causes a runtime error (see "🔥 Exception or Error").

@InjectableEnhanced() // -> does not work, having Ivy enabled
export class MyService {
  constructor() {}
}

🔬 Minimal Reproduction

See error

git clone https://github.com/GregOnNet/ng-9-inject.git temp
cd temp
yarn
yarn start # open localhost:4200, see error in browser console

See it working

• Turn off ivy in tsconfig.json
• Execute yarn start --open to see it working

🔥 Exception or Error

core.js:597 Uncaught Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at getCompilerFacade (core.js:597)
    at Function.get (core.js:18078)
    at Module../src/app/my.service.ts (my.service.ts:20)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.component.ts (app.component.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.module.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.8
Node: 12.13.1
OS: darwin x64

Angular: 9.0.0-rc.8
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.8
@angular-devkit/build-angular     0.900.0-rc.8
@angular-devkit/build-optimizer   0.900.0-rc.8
@angular-devkit/build-webpack     0.900.0-rc.8
@angular-devkit/core              9.0.0-rc.8
@angular-devkit/schematics        9.0.0-rc.8
@ngtools/webpack                  9.0.0-rc.8
@schematics/angular               9.0.0-rc.8
@schematics/update                0.900.0-rc.8
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

Anything else relevant?

• I asked this question on StackOverflow before to get proof that this is an unexpected behaviour: https://stackoverflow.com/questions/59671530/abstracting-injectable-with-angular-ivy-does-not-work

[alxhub]

This is not supported in Angular.

It worked previously because @Injectable previously had no effect at compilation time. It existed to cause TypeScript to emit constructor metadata when compiling the class to allow for JIT compilation.

In Ivy, @Injectable is resolved at compilation time like every other Angular decorator, and thus cannot be wrapped (just like none of the other decorators can be wrapped). Sorry :(

The good news is that we'll likely make providedIn: 'root' the default behavior at some point.

[GregOnNet]

Hi Alex,

thank you for the quick answer.
According to our direct conversation I hacked a "custom injectable" instrumenting the internal APIs ɵɵdefineInjectable and ɵɵinject .

For everyone interested. The example can be found at StackOverflow: https://stackoverflow.com/questions/59671530/abstracting-injectable-with-angular-ivy-does-not-work?answertab=active#tab-top

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