René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"forwardRef breaks at runtime with ES2015","articleBody":"\u003c!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅\r\n\r\nOh hi there! 😄\r\n\r\nTo expedite issue processing please search open and closed issues before submitting a new one.\r\nExisting issues often contain information about workarounds, resolution, or progress updates.\r\n\r\n🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅--\u003e\r\n\r\n\r\n# 🐞 bug report\r\n\r\n### Affected Package\r\n\u003c!-- Can you pin-point one or more @angular/* packages as the source of the bug? --\u003e\r\n\u003c!-- ✍️edit: --\u003e The issue is caused by package @angular/core\r\n\r\n\r\n### Is this a regression?\r\n\r\n\u003c!-- Did this behavior use to work in the previous version? --\u003e\r\n\u003c!-- ✍️--\u003e No.\r\n\r\n\r\n### Description\r\n\r\nUsing `forwardRef` as described in https://angular.io/api/core/forwardRef while targeting ES2015 results on a `Uncaught ReferenceError: Cannot access 'Lock' before initialization` runtime error.\r\n\r\n\r\n## 🔬 Minimal Reproduction\r\n- make a new project `ng new forward-ref-project \u0026\u0026 cd forward-ref-project`\r\n- ensure `tsconfig.json` contains `\"target\": \"es2015\",`\r\n- replace the contents of `src/main.ts` with:\r\n```\r\nimport { Inject, forwardRef, ReflectiveInjector } from '@angular/core';\r\nclass Door {\r\n  lock: Lock;\r\n\r\n  // Door attempts to inject Lock, despite it not being defined yet.\r\n  // forwardRef makes this possible.\r\n  constructor(@Inject(forwardRef(() =\u003e Lock)) lock: Lock) { this.lock = lock; }\r\n}\r\n\r\n// Only at this point Lock is defined.\r\nclass Lock { }\r\n\r\nconst injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);\r\nconst door = injector.get(Door);\r\nconsole.log(door instanceof Door);\r\nconsole.log(door.lock instanceof Lock);\r\n```\r\n- `ng serve -o`\r\n\r\n## 🔥 Exception or Error\r\n```\r\nUncaught ReferenceError: Cannot access 'Lock' before initialization\r\n    at Module../src/main.ts (main.ts:21)\r\n    at __webpack_require__ (bootstrap:78)\r\n    at Object.2 (main.ts:30)\r\n    at __webpack_require__ (bootstrap:78)\r\n    at checkDeferredModules (bootstrap:45)\r\n    at Array.webpackJsonpCallback [as push] (bootstrap:32)\r\n    at main.js:1\r\n```\r\n\r\n\r\n## 🌍  Your Environment\r\n\r\n**Angular Version:**\r\n\u003cpre\u003e\u003ccode\u003e\r\nAngular CLI: 8.0.0-beta.18\r\nNode: 10.10.0\r\nOS: win32 x64\r\nAngular: 8.0.0-beta.14\r\n... animations, common, compiler, compiler-cli, core, forms\r\n... language-service, platform-browser, platform-browser-dynamic\r\n... router\r\n\r\nPackage                           Version\r\n-----------------------------------------------------------\r\n@angular-devkit/architect         0.800.0-beta.18\r\n@angular-devkit/build-angular     0.800.0-beta.18\r\n@angular-devkit/build-optimizer   0.800.0-beta.18\r\n@angular-devkit/build-webpack     0.800.0-beta.18\r\n@angular-devkit/core              8.0.0-beta.18\r\n@angular-devkit/schematics        8.0.0-beta.18\r\n@angular/cli                      8.0.0-beta.18\r\n@ngtools/webpack                  8.0.0-beta.18\r\n@schematics/angular               8.0.0-beta.18\r\n@schematics/update                0.800.0-beta.18\r\nrxjs                              6.4.0\r\ntypescript                        3.4.5\r\nwebpack                           4.30.0\r\n\u003c/code\u003e\u003c/pre\u003e\r\n\r\n**Anything else relevant?**\r\n\r\n`forwardRef` is provided specifically for the purpose of referencing something that isn't defined. This is useful in breaking [circular dependencies](https://angular.io/guide/dependency-injection-in-action#break-circularities-with-a-forward-class-reference-forwardref), and when declaring both services and components in the [same file](https://angular.io/guide/dependency-injection#create-and-register-an-injectable-service).\r\n\r\n`forwardRef` works because it delays the resolution of the reference to a time at which it is already declared through the callback indirection. In the [API example](https://angular.io/api/core/forwardRef), the symbol we want to delay resolution is `Lock`:\r\n```\r\nclass Door {\r\n  lock: Lock;\r\n\r\n  // Door attempts to inject Lock, despite it not being defined yet.\r\n  // forwardRef makes this possible.\r\n  constructor(@Inject(forwardRef(() =\u003e Lock)) lock: Lock) { this.lock = lock; }\r\n}\r\n\r\n// Only at this point Lock is defined.\r\nclass Lock { }\r\n```\r\n\r\nBut `Lock` is actually being referenced in more places than just inside `forwardRef`. It is also being used as a TS type in the class property, and in the constructor parameter.\r\n\r\nTypes don't usually have a runtime representation so that shouldn't be a problem. But constructor types are an exception and actually do have a runtime representation. We can see this by looking at the transpiled code:\r\n\r\n```\r\nimport * as tslib_1 from \"tslib\";\r\nimport { Inject, forwardRef, ReflectiveInjector } from '@angular/core';\r\nlet Door = class Door {\r\n    // Door attempts to inject Lock, despite it not being defined yet.\r\n    // forwardRef makes this possible.\r\n    constructor(lock) { this.lock = lock; }\r\n};\r\nDoor = tslib_1.__decorate([\r\n    tslib_1.__param(0, Inject(forwardRef(() =\u003e Lock))),\r\n    tslib_1.__metadata(\"design:paramtypes\", [Lock])\r\n], Door);\r\n// Only at this point Lock is defined.\r\nclass Lock {\r\n}\r\nconst injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);\r\nconst door = injector.get(Door);\r\nconsole.log(door instanceof Door);\r\nconsole.log(door.lock instanceof Lock);\r\n```\r\n\r\nThe `Lock` type in the for the constructor parameter was transpiled into `tslib_1.__metadata(\"design:paramtypes\", [Lock])`. This reference does not have a delayed resolution like the injected `forwardRef` and is instead immediately resolved, resulting in `Uncaught ReferenceError: Cannot access 'Lock' before initialization`.\r\n\r\nThis error isn't observed when targetting ES5 however. We can understand why by looking at the code when transpiled to ES5 :\r\n```\r\nimport * as tslib_1 from \"tslib\";\r\nimport { Inject, forwardRef, ReflectiveInjector } from '@angular/core';\r\nvar Door = /** @class */ (function () {\r\n    // Door attempts to inject Lock, despite it not being defined yet.\r\n    // forwardRef makes this possible.\r\n    function Door(lock) {\r\n        this.lock = lock;\r\n    }\r\n    Door = tslib_1.__decorate([\r\n        tslib_1.__param(0, Inject(forwardRef(function () { return Lock; }))),\r\n        tslib_1.__metadata(\"design:paramtypes\", [Lock])\r\n    ], Door);\r\n    return Door;\r\n}());\r\n// Only at this point Lock is defined.\r\nvar Lock = /** @class */ (function () {\r\n    function Lock() {\r\n    }\r\n    return Lock;\r\n}());\r\nvar injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);\r\nvar door = injector.get(Door);\r\nconsole.log(door instanceof Door);\r\nconsole.log(door.lock instanceof Lock);\r\n```\r\n\r\nIn ES5 there are no `class` declarations, so TS instead uses a `var`. One important different between `var` and `class/let/const` is that the latter are all subject to the [Temporal Dead Zone](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone). \r\n\r\nIn practical terms the TDZ means that using a `var` before it is declared resolves to `undefined`, but using a `class/let/const` instead throws a `ReferenceError`. This is the error we are seeing here.\r\n\r\nA possible workaround is to **not** declare the type in the constructor:\r\n```\r\n// Instead of adding the type in the parameter\r\nconstructor(@Inject(forwardRef(() =\u003e Lock)) lock: Lock) { \r\n  this.lock = lock;\r\n}\r\n\r\n// Add it as a cast in the constructor body\r\nconstructor(@Inject(forwardRef(() =\u003e Lock)) lock) {\r\n  this.lock = lock as Lock;\r\n}\r\n```\r\n\r\nThis will change the transpiled code and remove the reference, avoiding the `ReferenceError`:\r\n```\r\nDoor = tslib_1.__decorate([\r\n    tslib_1.__param(0, Inject(forwardRef(() =\u003e Lock))),\r\n    tslib_1.__metadata(\"design:paramtypes\", [Object])\r\n                                             ^^^^^^ was Lock before\r\n], Door);\r\n```\r\n\r\nOne important note is that the `ReferenceError` does not come up on Angular CLI projects compiled with AOT. This is because there we actually transform transpiled TS code and remove Angular decorators, so the metadata reference (`tslib_1.__metadata(\"design:paramtypes\", [Lock])`) never reaches the browser and thus there is no `ReferenceError`.\r\n","author":{"url":"https://github.com/filipesilva","@type":"Person","name":"filipesilva"},"datePublished":"2019-04-25T08:56:10.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":19},"url":"https://github.com/30106/angular/issues/30106"}