jerkovicl
commented
3 years ago got the same error for HttpClient
Closed mrctrifork closed 3 years ago
jerkovicl
commented
3 years ago got the same error for HttpClient
ghaschel
commented
3 years ago I solved this by running:
rm -rf node_modules && npm cache clear --force && npm install
petebacondarwin
commented
3 years ago Yes, please try removing node_modules and reinstalling.
jerkovicl
commented
3 years ago @petebacondarwin i did that still same error HttpClient is not defined
acalvo
commented
3 years ago I'm having the same problem as OP, and neither npm ci nor rm -rf node_modules && npm cache clear --force && npm install solved it π¬
petebacondarwin
commented
3 years ago Please can one of you provide a reproduction that we can debug?
mrctrifork
commented
3 years ago I've removed node_modules, cleared npm's cache and reinstalled everything. Not fixed
mrctrifork
commented
3 years ago I have a strong belief that is due to the PostCSS update. Before Angular 11 used PostCSS 7 and now I've seen on my package-lock.json plenty of references to PostCSS 8.
I am freaking out a little bit because this error:
Is a PostCSS error when referencing the main.ts file
jerkovicl
commented
3 years ago @mrctrifork if you do npm i postcss -D that error will be gone atleast in my case but HttpClient is still not defined
mrctrifork
commented
3 years ago I confirm that running npm i postcss -D makes the error about PostCSS go away.
I have no injection errors in regards of the HttpClient.
jerkovicl
commented
3 years ago @petebacondarwin where can i send code for you to reproduce ?
petebacondarwin
commented
3 years ago @jerkovicl - I have emailed you at your protonmail account.
jerkovicl
commented
3 years ago @petebacondarwin yeah i sent app code to you, did you receive it?
leonelvsc
commented
3 years ago Same here, did you run tests before release ?, how can an error like this reach a release
petebacondarwin
commented
3 years ago OK so there are two issues here:
npm i postcss -Dpetebacondarwin
commented
3 years ago Transferring to the CLI project, since we think it is most likely a problem there.
petebacondarwin
commented
3 years ago In the reproduction from @jerkovicl the main.js has the following code:
ApiService.Ι΅fac = function ApiService_Factory(t) { return new (t || ApiService)(_angular_core__WEBPACK_IMPORTED_MODULE_2__["Ι΅Ι΅inject"](_angular_common_http__WEBPACK_IMPORTED_MODULE_3__["HttpClient"])); };
ApiService.Ι΅prov = _angular_core__WEBPACK_IMPORTED_MODULE_2__["Ι΅Ι΅defineInjectable"]({ token: ApiService, factory: ApiService.Ι΅fac });
ApiService = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_ngneat_until_destroy__WEBPACK_IMPORTED_MODULE_1__["UntilDestroy"])({ checkProperties: true }),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [HttpClient])
], ApiService);You can note that there is a bare HttpClient identifier, which has no definition. Earlier on you see _angular_common_http__WEBPACK_IMPORTED_MODULE_3__["HttpClient"], which does work.
Looking at the output of the Angular compiler (before webpack) we see:
ApiService.Ι΅fac = function ApiService_Factory(t) { return new (t || ApiService)(i0.Ι΅Ι΅inject(i1.HttpClient)); };
ApiService.Ι΅prov = i0.Ι΅Ι΅defineInjectable({ token: ApiService, factory: ApiService.Ι΅fac });
ApiService = __decorate([
UntilDestroy({ checkProperties: true }),
__metadata("design:paramtypes", [HttpClient])
], ApiService);
export { ApiService };
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.Ι΅setClassMetadata(ApiService, [{
type: Injectable
}], function () { return [{ type: i1.HttpClient }]; }, null); })();Here you can see that there are i1.HttpClient references, which are the ones that get converted to the webpack imports.
But the __decorate() handler contains the bare HttpClient, which is what is undefined later on.
petebacondarwin
commented
3 years ago Update on the missing HttpClient import... This code that is problematic is being generated by TypeScript because of the tsconfig setting: "emitDecoratorMetadata": true,. Specifically this line:
__metadata("design:paramtypes", [HttpClient])Setting this to false avoids generating this code, which is redundant in almost all cases anyway, and fixes the problem.
The only time when this setting needs to be true is if your application queries the metadata at runtime, which is fairly rare these days and if you are doing so then you probably know what you are doing.
That being said, we should probably work out why this import is being dropped...
chunghha
commented
3 years ago My refrenceError with angular-cli 11.1.0 is with Observable like as
@select('controls') readonly controls$: Observable<RegistrationCompControl>;
Keeping @angular 11.1.0 and downgrading of the cli to 11.0.7 resolved my problem for now.
EDIT: it's difference referenceError (Uncaught ReferenceError: OverlayContainer is not defined) but at least reproduce an error with this public repo, https://github.com/chunghha/docker-ng-cli/tree/develop, when you use the cli 11.1.0 but not with the cli 11.0.7.
JoostK
commented
3 years ago I can reproduce the issues reference errors; disabling the new Ivy integration in the CLI does not show the same issue so there appears to be some bug there. A workaround could be to set the environment variable NG_BUILD_IVY_LEGACY=1 which deactivates the new Ivy plugin.
JoostK
commented
3 years ago Good news for the HttpClient reference errors (and other reference errors): the root cause has already been found and is being addressed in #19841
clydin
commented
3 years ago The postcss errors have been traced to an npm package hoisting inconsistency which causes the wrong version of postcss to be used. From initial tests, it does not appear that yarn is affected. However, a fix is currently pending for the CLI (#19847) that will force the postcss-loader package (using a recently released new option) to use the correct version of postcss even in these cases.
In regards to the reference errors (fix pending as well: #19841), the emitDecoratorMetadata option is responsible for the initial creation of the code that is being subsequently broken. This TypeScript configuration option is no longer required by Angular (8.0.4+) and newly created projects no longer contain the option. Unless a third-party library or application code specifically requires the option, it can be safely removed. The need for this option is generally uncommon. Also of note is that the option generates code (more details) that has the potential to cause runtime errors with certain source code constructs.
However, for the cases where the option is required, a fix will be in the next patch release.
dgp1130
commented
3 years ago Just published v11.1.1 which should contain the necessary fixes for this issue. Please update to that version.
markosiilak
commented
3 years ago I solved this by running:
rm -rf node_modules && npm cache clear --force && npm install
Works like a Magic :)
angular-automatic-lock-bot[bot]
commented
3 years ago 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.
π bug report
Affected Package
the application itself
Is this a regression?
Not a regression
Description
I updated my app from Angular 11.0.9 to Angular 11.1.0 because there was a bug with the HttpClient and now it doesn't compile
π¬ Minimal Reproduction
I ran
ng update @angular/cdk @angular/core @angular/cli @angular/materialProcess finished successfully
And then tried to
ng serveorng buildand yields the output belowπ₯ Exception or Error
π Your Environment
Angular Version:
Anything else relevant? Nothing else, can't build the app