How to recover a project using Angular 2 that was damaged with "npm update"

Asked

Viewed 115 times

0

I’ve resumed my studies with Angular 2, and I’m trying to rebuild the design of this link step by step, but when executing the update of packages with npm update I can no longer test the project with ng serve, receiving various package absence or other error messages.

for example: 

ERROR in ./~/@angular/material/esm5/icon.es5.js
Module not found: Error: Can't resolve '@angular/common/http' in 'C:\Users\Admin\workspace\islan\angular2-rss-reader2\node_modules\@angular\material\esm5'
 @ ./~/@angular/material/esm5/icon.es5.js 9:0-50
 @ ./~/@angular/material/esm5/material.es5.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

Considering a standard installation made of Angular 2 on the date of 10/07/2019, and a project created with ng new, what are the versions of the packages below most indicated for the project to be successfully compiled?

"dependencies": {
   "@angular/common": "",
   "@angular/compiler": "",
   "@angular/core": "",
   "@angular/forms": "",
   "@angular/http": "",
   "@angular/platform-browser": "",
   "@angular/platform-browser-dynamic": "",
   "@angular/router": "",
   "@angular/material": "",
   "@angular/cdk": "",
   "@angular/animations": "",
   "core-js": "",
   "rxjs": "",
   "ts-helpers": "",
   "zone.js": ""
},
"devDependencies": {
   "@angular/compiler-cli": "",
   "@types/jasmine": "",
   "@types/node": "",
   "angular-cli": "",
   "codelyzer": "",
   "jasmine-core": "",
   "jasmine-spec-reporter": "",
   "karma": "",
   "karma-chrome-launcher": "",
   "karma-cli": "",
   "karma-jasmine": "",
   "karma-remap-istanbul": "",
   "protractor": "",
   "ts-node": "",
   "tslint": "",
   "typescript": ""
}

Grateful

angular npm workspace

1 answer

1

Boy... A lot has changed from version 2 to version 8 (currently), certain packages have changed their name or been replaced.

In your case, I would create a new project, and would be part by part (Lazy loading, observable, ...)

Here’s a website that tells you what you need to upgrade from one version to another:

Update Angular Cli

There are several articles on the site Medium that help you with this:

Lazy Loading Angular 7

Lazy Loading Angular 8

And there are videos of Loiane’s classes, which teach how to make a CRUD and everything else (the latter are the most updated): Loiane Groner - Angular Course

I hope I’ve helped.

  • 1

    I confess that I get very lost when using Angular, are many versions totally incompatible, I use Nativescript and always receive messages saying I must migrate to version 6, I can not use now neither the 7 nor the 8 and it is not productive to keep changing version continuously, I’m trying to do exactly this, I created the new project, and I’ve been copying the app fonts, but it never works, and in the end it turns into a version room.

  • Another interesting fact, when creating a new project with ng new packages are used in version 2.., already in nativescript is using version packages ^8.*.*.

  • ng new refers to the angular version - cli installed

  • Well, I use the nativescript and everything is ok, and I don’t want to change anything because I confess that I fear for the health of the project. I will act globally to see what happens.

  • Unfortunately I can not upgrade to the latest version, it requires the Node 10 and I will have problems with other projects, and now maintain several installations will not be viable.

  • Look, I have a teammate who uses two versions of Angular (7 and 8 in the case). I don’t know how he did it, but I believe it would help you in this problem, and move the other projects to the most current version, and let the others run in the production in the old version.

  • The interesting thing is to update yourself. Loiane (youtuber) has videos showing how to move from one version to the other. Maybe this will help you in the future migration.

Show 2 more comments

Browser other questions tagged angular npm workspace

You are not signed in. Login or sign up in order to post.