Cannot find module '@angular/common/http/src/response after migrating to Angular 8

[graphicsxp]

🐞 bug report

Affected Package

The issue is caused by package @angular/common/http

Is this a regression?

Yes, the previous version in which this bug was not present was: angular 7.0

Description

after migrating to angular 8.0 using the command
ng update @angular/cli @angular/core
building the application using ng build --prod gives the following error:

error TS2307: Cannot find module '@angular/common/http/src/response'.

I use this for importing the HttpUploadProgressEvent interface 👍

import { HttpUploadProgressEvent } from '@angular/common/http/src/response';

Should I import it from else where ?

🌍 Your Environment

Angular Version: 8..0

Angular CLI: 8.0.1
Node: 12.3.1
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.800.1
@angular-devkit/build-angular 0.800.1
@angular-devkit/build-optimizer 0.800.1
@angular-devkit/build-webpack 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@angular/cdk 7.3.3
@angular/cli 8.0.1
@ngtools/webpack 8.0.1
@schematics/angular 8.0.1
@schematics/update 0.800.1
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0

[sod]

Try @angular/common/http. I'm pretty sure you have to always import from the barrels, aka @angular/common/http ... never from src files, as that is considered private and can change any time.

[sod]

Hm, seems like it's not part of the public api https://github.com/angular/angular/blob/f8096d499324cf0961f092944bbaedd05364eea1/packages/common/http/public_api.ts, even though HttpDownloadProgressEvent is, but HttpUploadProgressEvent isn't. Maybe it was forgotten?

[graphicsxp]

Yes, even if I import it from @angular/common/http, the compiler complains. I believe indeed this is a bug ?

[gkalpak]

This seems indeed to be an unintentional omission in 37797e2. HttpUploadProgressEvent should be added to the public API here (as @sod mentioned above) and also add the @pablicApi annotation here (similar to HttpDownloadProgressEvent), so that it shows up in the docs.

In any case, you should never import from @angular/<package/entrypoint>/src/.... Everything that should be publicly importable, should be part of the public API.

[santoshyadavdev]

Hi @gkalpak ,
Can i work on this.

[santoshyadavdev]

Hi @gkalpak ,
Open for review.

[snahmad]

Is this resolved.

I tried

import { HttpUploadProgressEvent } from '@angular/common/http/src/response';

I update my angular to version=8
Still I get this error.

ERROR in node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts(3,27): error TS2307: Cannot find module '@angular/common/http/src/response'.
src/app/app.module.ts(15,41): error TS2307: Cannot find module '@angular/common/http/src/response'.

[santoshyadavdev]

Hi @snahmad ,
Which version you are using I can see it is available in 8.0.1.

[snahmad]

Angular CLI: 8.1.1
Node: 10.16.0
OS: win32 x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.800.3
@angular-devkit/build-angular 0.800.3
@angular-devkit/build-optimizer 0.800.3
@angular-devkit/build-webpack 0.800.3
@angular-devkit/core 8.0.3
@angular-devkit/schematics 8.1.1
@angular/cdk 8.0.1
@angular/cli 8.1.1
@angular/flex-layout 8.0.0-beta.26
@angular/http 7.2.15
@angular/material 8.0.1
@ngtools/webpack 8.0.3
@schematics/angular 8.1.1
@schematics/update 0.801.1
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0

[santoshyadavdev]

It is available in the version you mentioned, maybe do a clean install and check. https://github.com/angular/angular/blob/8.0.2/packages/common/http/src/response.ts

[snahmad]

no success.

I tried delete my node_modules.
npm install.

Still getting error:
ERROR in node_modules/ngx-restangular/lib/ngx-restangular-http.d.ts(3,27): error TS2307: Cannot find module '@angular/common/http/src/response'.

[gkalpak]

@snahmad, you should be importing it from @angular/common/http now (not @angular/common/http/src/response).

[santoshyadavdev]

Ohh sorry @snahmad my bad, yes it should be imported as @gkalpak said.

[snahmad]

What you mean. not clear to me. Kindly elaborate.

[santoshyadavdev]

Hi @snahmad ,
Sorry it was my fault, the actual issue is you are using ngx-restangular which is still not updated to Angular 8. If you want you can take this and help them update or log an issue.

Here is the link for rep https://github.com/2muchcoffeecom/ngx-restangular.

[snahmad]

ok, Thanks, I have wait for ngx-restangular to be updated for angular 8. I need fix in few days. I guess either revert back to angular 6 or 7 or use HttpClient instead of ngx-restangular

[santoshyadavdev]

ok, Thanks, I have wait for ngx-restangular to be updated for angular 8. I need fix in few days. I guess either revert back to angular 6 or 7 or use HttpClient instead of ngx-restangular

Moving to Angular Package will be a better idea in that case.

[snahmad]

What you mean by
Moving to Angular Package will be a better idea in that case?

[santoshyadavdev]

What you mean by
Moving to Angular Package will be a better idea in that case?

I was just referring to your comment, where you said "use HttpClient instead of ngx-restangular"

[snahmad]

ok, HttpClient is official angular package,

https://angular.io/api/common/http.

Let me try to change from ngx-restangular to HttpClient.

Only issue will be change RestangularConfigFactory to use HttpClient.

// Function for settting the default restangular configuration
export function RestangularConfigFactory (RestangularProvider, router) {

 // by each request to the server receive a token and update headers with it

RestangularProvider.addFullRequestInterceptor((element, operation, path, url, headers, params) => {
console.log("addFullRequestInterceptor(operation='" + operation + "', path='" + path + "'") ;

let bearerToken = "";
let token = localStorage.getItem("token");
if (token) {
  bearerToken = token;
}
return {
    headers: Object.assign({}, headers, {Authorization: `mgs ${bearerToken}`})
};

});

RestangularProvider.addErrorInterceptor((response, subject, responseHandler) => {
if (response.status != 0) {
router.navigate(['error']);
return false; // error handled
} else {
return true;
}

});

[snahmad]

I am using all these three.

import {RestangularModule, Restangular} from 'ngx-restangular';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Http, Response, RequestOptions, ResponseContentType } from '@angular/http';
import { Observable } from 'rxjs/Observable';

I guess I can only use HttpClient to do everything.

Currently doing

getLogSubFiles(folder_name) : Observable<LogFile[]> {
return this.restangular.all('log_files').post({folder: folder_name});
}

I guess I can use HttpClient here instead of restangular

[santoshyadavdev]

Yes @snahmad ,
You can if you need any help in migrating please post on stackoverflow or our gitter channel thanks.

[snahmad]

Yes @snahmad ,
You can if you need any help in migrating please post on stackoverflow or our gitter channel thanks.

Sure, Thanks. for now Try to fix using ngx-restangular. they claim they have fixed it for angular 8.

[snahmad]

I need help in moving from ngx-restangular to HttpClient. ngx-restangular is broken for latest angular.
Where to ask steps migrate from ngx-restangular to HttpClient

[santoshyadavdev]

I need help in moving from ngx-restangular to HttpClient. ngx-restangular is broken for latest angular.
Where to ask steps migrate from ngx-restangular to HttpClient

StackOverflow with Angular Tag.

[snahmad]

ok, sure. Can I hire you or some one. I am runout of time. it is big change.

[santoshyadavdev]

ok, sure. Can I hire you or some one. I am runout of time. it is big change.

That's you call, please feel free to do it.

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