webpack seems to be breaking dependency injection in angular - ruby-on-rails

Question

I have a rails app which is using webpacker (6.0.0-rc.5) which uses webpack (5.73.0) and I have created a simple app consisting of one NgModule, and one component.
# main.ts (entrypoint)
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from 'app.module';
import 'zone.js';
platformBrowserDynamic().bootstrapModule(AppModule).catch(console.error);
# app.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule
],
bootstrap: [
AppComponent
],
})
export class AppModule { }
# app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: '<h1>hello from rails<h1>',
})
export class AppComponent { }
This works fine... However, if I try to put ANYTHING in the constructor of the component, such as:
# my.service.ts
import { Injectable } from '#angular/core';
#Injectable({ providedIn: 'root' })
export class MyService {}
# app.component.ts
import { Component } from '#angular/core';
import { MyService } from './my.service';
#Component({
selector: 'app-root',
template: '<h1>hello<h1>',
})
export class AppComponent {
constructor (private service: MyService) {
}
}
I get:
core.mjs:7640 ERROR Error: NG0202: This constructor is not compatible
with Angular Dependency Injection because its dependency at index 0 of
the parameter list is invalid. This can happen if the dependency type
is a primitive like a string or if an ancestor of this class is
missing an Angular decorator.
Please check that 1) the type for the parameter at index 0 is correct
and 2) the correct Angular decorators are defined for this class and
its ancestors.
at ɵɵinvalidFactoryDep (core.mjs:4791:1)
at NodeInjectorFactory.AppComponent_Factory [as factory] (ɵfac.js? [sm]:1:1)
at getNodeInjectable (core.mjs:3516:1)
at instantiateRootComponent (core.mjs:12587:1)
at createRootComponent (core.mjs:14092:1)
at ComponentFactory.create (core.mjs:13969:1)
at ApplicationRef.bootstrap (core.mjs:27442:1)
at core.mjs:27102:1
at Array.forEach ()
at PlatformRef._moduleDoBootstrap (core.mjs:27102:1)
As an experiment, I manually bootstrapped the component, and did:
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
console.log(platformRef.injector.get(MyService));
}
I can see the service, so it IS in the injector..
For a test, used angular cli to create a new project, and copied over the .ts files from the rails project, and ran them via ng serve. Everything works fine.. Dependency injection works and my service is available via the constructor function...
So the only thing I can think of is, SOMEHOW, dependency injection tokens are getting messed up by webpack...
The js generated from webpack in the rails app is:
"use strict";
(self["webpackChunkmy_app"] = self["webpackChunkmy_app"] || []).push([["main"],{
/***/ "./app/javascript/entrypoints/main.ts":
/*!********************************************!*\
!*** ./app/javascript/entrypoints/main.ts ***!
\********************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _angular_platform_browser_dynamic__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! #angular/platform-browser-dynamic */ "./node_modules/#angular/platform-browser-dynamic/fesm2020/platform-browser-dynamic.mjs");
/* harmony import */ var _ng_app_module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../ng/app.module */ "./app/javascript/ng/app.module.ts");
/* harmony import */ var zone_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! zone.js */ "./node_modules/zone.js/fesm2015/zone.js");
/* harmony import */ var zone_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(zone_js__WEBPACK_IMPORTED_MODULE_1__);
(0,_angular_platform_browser_dynamic__WEBPACK_IMPORTED_MODULE_2__.platformBrowserDynamic)().bootstrapModule(_ng_app_module__WEBPACK_IMPORTED_MODULE_0__.AppModule).catch(console.error);
/***/ }),
/***/ "./app/javascript/ng/app.component.ts":
/*!********************************************!*\
!*** ./app/javascript/ng/app.component.ts ***!
\********************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "AppComponent": function() { return /* binding */ AppComponent; }
/* harmony export */ });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! #angular/core */ "./node_modules/#angular/core/fesm2020/core.mjs");
/* harmony import */ var _my_service__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./my.service */ "./app/javascript/ng/my.service.ts");
var __decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = undefined && undefined.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
let AppComponent = class AppComponent {
constructor(service) {
this.service = service;
console.log(service);
}
};
AppComponent = __decorate([(0,_angular_core__WEBPACK_IMPORTED_MODULE_1__.Component)({
selector: 'app-root',
template: '<h1>hello from rails<h1>'
}), __metadata("design:paramtypes", [_my_service__WEBPACK_IMPORTED_MODULE_0__.MyService])], AppComponent);
/***/ }),
/***/ "./app/javascript/ng/app.module.ts":
/*!*****************************************!*\
!*** ./app/javascript/ng/app.module.ts ***!
\*****************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "AppModule": function() { return /* binding */ AppModule; }
/* harmony export */ });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! #angular/core */ "./node_modules/#angular/core/fesm2020/core.mjs");
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! #angular/platform-browser */ "./node_modules/#angular/platform-browser/fesm2020/platform-browser.mjs");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! #angular/common */ "./node_modules/#angular/common/fesm2020/common.mjs");
/* harmony import */ var _app_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./app.component */ "./app/javascript/ng/app.component.ts");
var __decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let AppModule = class AppModule {};
AppModule = __decorate([(0,_angular_core__WEBPACK_IMPORTED_MODULE_1__.NgModule)({
declarations: [_app_component__WEBPACK_IMPORTED_MODULE_0__.AppComponent],
imports: [_angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__.BrowserModule, _angular_common__WEBPACK_IMPORTED_MODULE_3__.CommonModule],
providers: [],
bootstrap: [_app_component__WEBPACK_IMPORTED_MODULE_0__.AppComponent]
})], AppModule);
/***/ }),
/***/ "./app/javascript/ng/my.service.ts":
/*!*****************************************!*\
!*** ./app/javascript/ng/my.service.ts ***!
\*****************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "MyService": function() { return /* binding */ MyService; }
/* harmony export */ });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! #angular/core */ "./node_modules/#angular/core/fesm2020/core.mjs");
var __decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
let MyService = class MyService {};
MyService = __decorate([(0,_angular_core__WEBPACK_IMPORTED_MODULE_0__.Injectable)({
providedIn: 'root'
})], MyService);
/***/ })
},
/******/ function(__webpack_require__) { // webpackRuntimeModules
/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
/******/ __webpack_require__.O(0, ["vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_localhost_por-54b5bb","vendors-node_modules_zone_js_fesm2015_zone_js-node_modules_angular_platform-browser-dynamic_f-70e316"], function() { return __webpack_exec__("./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=localhost&port=3035&pathname=%2Fws&logging=info&reconnect=10"), __webpack_exec__("./app/javascript/entrypoints/main.ts"); });
/******/ var __webpack_exports__ = __webpack_require__.O();
/******/ }
]);
//# sourceMappingURL=main.js.map
And compared to the source code generated from webpack via ng serve
"use strict";
(self["webpackChunkmy_app"] = self["webpackChunkmy_app"] || []).push([["main"],{
/***/ 5041:
/*!**********************************!*\
!*** ./src/app/app.component.ts ***!
\**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "AppComponent": () => (/* binding */ AppComponent)
/* harmony export */ });
/* harmony import */ var _my_service__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./my.service */ 9676);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! #angular/core */ 2560);
class AppComponent {
constructor(service) {
this.service = service;
console.log(service);
}
}
AppComponent.ɵfac = function AppComponent_Factory(t) { return new (t || AppComponent)(_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdirectiveInject"](_my_service__WEBPACK_IMPORTED_MODULE_0__.MyService)); };
AppComponent.ɵcmp = /*#__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineComponent"]({ type: AppComponent, selectors: [["app-root"]], decls: 2, vars: 0, template: function AppComponent_Template(rf, ctx) { if (rf & 1) {
_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵelementStart"](0, "h1");
_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵtext"](1, "hello from ng-serve");
_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵelementEnd"]();
} }, encapsulation: 2 });
/***/ }),
/***/ 6747:
/*!*******************************!*\
!*** ./src/app/app.module.ts ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "AppModule": () => (/* binding */ AppModule)
/* harmony export */ });
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! #angular/platform-browser */ 4497);
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! #angular/common */ 4666);
/* harmony import */ var _app_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./app.component */ 5041);
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! #angular/core */ 2560);
class AppModule {
}
AppModule.ɵfac = function AppModule_Factory(t) { return new (t || AppModule)(); };
AppModule.ɵmod = /*#__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineNgModule"]({ type: AppModule, bootstrap: [_app_component__WEBPACK_IMPORTED_MODULE_0__.AppComponent] });
AppModule.ɵinj = /*#__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineInjector"]({ providers: [], imports: [[
_angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__.BrowserModule,
_angular_common__WEBPACK_IMPORTED_MODULE_3__.CommonModule
]] });
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵsetNgModuleScope"](AppModule, { declarations: [_app_component__WEBPACK_IMPORTED_MODULE_0__.AppComponent], imports: [_angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__.BrowserModule,
_angular_common__WEBPACK_IMPORTED_MODULE_3__.CommonModule] }); })();
/***/ }),
/***/ 9676:
/*!*******************************!*\
!*** ./src/app/my.service.ts ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "MyService": () => (/* binding */ MyService)
/* harmony export */ });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! #angular/core */ 2560);
class MyService {
}
MyService.ɵfac = function MyService_Factory(t) { return new (t || MyService)(); };
MyService.ɵprov = /*#__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineInjectable"]({ token: MyService, factory: MyService.ɵfac, providedIn: 'root' });
/***/ }),
/***/ 4431:
/*!*********************!*\
!*** ./src/main.ts ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! #angular/platform-browser */ 4497);
/* harmony import */ var _app_app_module__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./app/app.module */ 6747);
/* harmony import */ var zone_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! zone.js */ 4946);
/* harmony import */ var zone_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(zone_js__WEBPACK_IMPORTED_MODULE_1__);
_angular_platform_browser__WEBPACK_IMPORTED_MODULE_2__.platformBrowser().bootstrapModule(_app_app_module__WEBPACK_IMPORTED_MODULE_0__.AppModule).catch(console.error);
/***/ })
},
/******/ __webpack_require__ => { // webpackRuntimeModules
/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
/******/ __webpack_require__.O(0, ["vendor"], () => (__webpack_exec__(8202), __webpack_exec__(4431)));
/******/ var __webpack_exports__ = __webpack_require__.O();
/******/ }
]);
//# sourceMappingURL=main.js.map
One of the differences I see is there is a bunch of Reflect stuff in the code generated from webpack with rails. I don't know where this is coming from, as it's no where in the actual code.....
But more importantly, it appears stuff like:
MyService.ɵprov = /*#__PURE__*/ _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineInjectable"]( ... )
is completely missing from the javascript generated from webpacker from the rails app.....
Does anyone have any ideas about what is going on here and how I might troubleshoot this further?
** UPDATE **
Looking at the inject() usage notes in fesm2020/core.mjs says:
In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a field initializer:
So as an experiment, I changed:
...
export class AppComponent {
constructor (private service: MyService) {
}
...
to:
import { inject } from '#angular/core';
...
export class AppComponent {
service: MyService;
constructor () {
this.service = inject(MyService);
}
...
works fine.
WHY can I not get injectables in the constructor function, but I can get them from the injector?!