Update Angular2 to latest version - node.js

I am trying to update Angular2 to the latest version release candidate 4.
I have executed npm outdated and edited accordingly the package.json file.
Then I have executed npm update which failed. I haven't saved the error message. In the following I googled and tried several different npm commands. Unfortunately I cannot recall them.
The current status is, that npm update does not show anything; so seems to work.
The command npm start starts the server, but the browser console displays multiple errors. The first is:
http://localhost:3000/node_modules/#angular/platform-browser-dynamic/platform-browser-dynamic.umd.js Failed to load resource: the server responded with a status of 404 (Not Found)
Besides npm install shows the following warnings:
typings WARN deprecated 2016-06-02: "registry:dt/core-js#0.0.0+20160317120654" is deprecated (updated, replaced or removed)
typings WARN deprecated 2016-06-22: "registry:dt/node#4.0.0+20160509154515" is deprecated (updated, replaced or removed)
typings WARN deprecated 2016-06-22: "registry:dt/jasmine#2.2.0+20160505161446" is deprecated (updated, replaced or removed)
├── core-js (global)
├── jasmine (global)
└── node (global)
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents#1.0.12
npm WARN optional Skipping failed optional dependency /lite-server/browser-sync/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents#1.0.12
npm WARN #angular/core#2.0.0-rc.4 requires a peer of rxjs#5.0.0-beta.6 but none was installed.
npm WARN #angular/http#2.0.0-rc.4 requires a peer of rxjs#5.0.0-beta.6 but none was installed.
npm WARN #angular/router#3.0.0-beta.2 requires a peer of rxjs#5.0.0-beta.6 but none was installed.
npm WARN #angular/router-deprecated#2.0.0-rc.1 requires a peer of #angular/core#2.0.0-rc.1 but none was installed.
npm WARN #angular/router-deprecated#2.0.0-rc.1 requires a peer of #angular/common#2.0.0-rc.1 but none was installed.
npm WARN #angular/router-deprecated#2.0.0-rc.1 requires a peer of #angular/platform-browser#2.0.0-rc.1 but none was installed.
npm WARN angular2-in-memory-web-api#0.0.14 requires a peer of rxjs#5.0.0-beta.6 but none was installed.
The package.json relevant parts are currently:
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/router": "3.0.0-beta.2",
"#angular/upgrade": "2.0.0-rc.4",
"angular2-in-memory-web-api": "0.0.14",
"angular2-uuid": "^1.0.7",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.9",
"systemjs": "0.19.31",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.7.4",
"lodash": "^4.11.1",
"jasmine-core": "~2.4.1",
"karma": "^1.1.0",
"karma-chrome-launcher": "^1.0.1",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"protractor": "^3.3.0",
"rimraf": "^2.5.2"
},

Follow these steps:
Delete node_modules folder.
Take latest package.json from https://angular.io/guide/quickstart
Run 'npm install' command.

In typings.json one must update to new registry value, if problem shows up for core-js
"core-js": "registry:dt/core-js#0.0.0+20160317120654"
to
"core-js": "registry:dt/core-js#0.0.0+20160725163759"
https://github.com/mgechev/angular2-seed/commit/8a8c64e0e8b18cd0c19c1ab2f1dc71a30bbd6174

This might be outdated but your typings were never addressed. Given that you would want to always keep them up to date. Also for anyone else seeking to know about the update process
Here is how you could update/reinstall them
Example:
For your node to update it simply type
typings install dt~node --save --global
The following will update your node typings which would be in /typings/global/node
If you did not have node the same command would suffice and your index.d.ts will also be update with a new entry!

Related

Same exact package.json file works in empty brand new project but doesn't in old project

I get this error when I try to upgrade to Angular 8.
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an
old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from
the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: comprehensivedashboard#0.0.0
npm ERR! Found: #angular/animations#7.2.6
npm ERR! node_modules/#angular/animations
npm ERR! #angular/animations#"~8.2.14" from the root project
npm ERR! peer #angular/animations#">=7.0.0" from
#angular/material#7.3.3
npm ERR! node_modules/#angular/material
npm ERR! #angular/material#"~8.2.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! #angular/animations#"~8.2.14" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #angular/core#8.2.14
npm ERR! node_modules/#angular/core
npm ERR! peer #angular/core#"8.2.14" from #angular/animations#8.2.14
npm ERR! node_modules/#angular/animations
npm ERR! #angular/animations#"~8.2.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency
resolution.
npm ERR!
npm ERR! See
C:\Users\vakkinen\AppData\Local\npm-cache\eresolve-report.txt for a
full report.
npm ERR! A complete log of this run can be found in:
npm ERR!
C:\Users\vakkinen\AppData\Local\npm-cache_logs\2021-10-05T12_19_50_257Z-debug.log
So decided to create a brand new Angular8 app and see what the package.json file looks like. That file is attached below. Then I added all the packages I need to this brand new empty project one at a time. The application build succeeded and I was able to run the application. So I copied and pasted all the dependencies and devDependencies to the old project package.json. That project still fails npm i because of the same error above. So I tried to clone the repo into a new directory and replaced the contents of the package.json with the contents of the package.json from the brand new empty project, still the same error. What am I doing wrong ?
{
"name": "dashboard",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "~8.2.3",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#ng-bootstrap/ng-bootstrap": "^5.3.0",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"#swimlane/ngx-charts": "^11.0.0",
"fusioncharts": "^3.15.0-sr.1",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ngx-bootstrap": "^3.2.0",
"ngx-csv": "^0.3.1",
"ngx-export-as": "1.4.2",
"ngx-scrollbar": "^4.1.1",
"ngx-select-dropdown": "^1.0.1",
"node-sass": "^4.14.0",
"rxjs": "~6.4.0",
"sass-loader": "^8.0.2",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.13.0",
"#angular/cli": "~8.3.29",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
There should be a file called package-lock in the same folder as the package file. Delete it and the error should go away. The package-lock file contains all dependencies of your dependencies and their versions. Deleting it doesn’t affect your project since it’s regenerated on npm install.
The error message warns you that the package-lock.json file is the issue. Just delete it and a new one will be generated.
The issue stems from having incorrect files in the node_modules directory and the package-lock.json.
Most probably the easiest solution is to delete both the node_modules directory and the package-lock.json and then running a npm install to get a clean node_modules directory and a new package-lock.json according to your package.json
I recommend reading more about what the package-lock.json file is for here: https://medium.com/coinmonks/everything-you-wanted-to-know-about-package-lock-json-b81911aa8ab8
Steps to fix this issue:
Delete node_modules folder.
Delete package-lock.json.
Run npm i --force.

npm install doesn't install dependencies in Angular project

I have an Angular project. When I run npm install I see some errors and dependencies don't appear in node_modules folder. However, I think none of the errors explain the problem. I see some deprecation warnings and 404 for one dependency, but nothing more.
Here is my package.json:
{
"name": "my-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.0.0",
"#angular/cdk": "^9.1.0",
"#angular/common": "~9.0.0",
"#angular/compiler": "~9.0.0",
"#angular/core": "~9.0.0",
"#angular/forms": "~9.0.0",
"#angular/material": "^9.1.0",
"#angular/platform-browser": "~9.0.0",
"#angular/platform-browser-dynamic": "~9.0.0",
"#angular/router": "~9.0.0",
"#css-pkg/circular-std": "^2.0.0",
"#fortawesome/fontawesome-free": "^5.12.1",
"#syncfusion/ej2-angular-calendars": "^18.1.44",
"#types/jquery": "^3.3.38",
"alertifyjs": "^1.13.1",
"angular-mat-datepicker": "0.0.2",
"angular-material": "^1.1.21",
"angularx-qrcode": "^2.1.1",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"material-steppers": "^2.0.0",
"popper.js": "^1.16.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.900.4",
"#angular/cli": "~9.0.1",
"#angular/compiler-cli": "~9.0.0",
"#angular/language-service": "~9.0.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
And here is the log output:
npm WARN deprecated popper.js#1.16.1: You can find the new Popper v2 at #popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#css-pkg%2fcircular-std - Not found
npm ERR! 404
npm ERR! 404 '#css-pkg/circular-std#^2.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'traveler-frontend'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mac/.npm/_logs/2020-06-16T20_33_51_531Z-debug.log
Remove "#css-pkg/circular-std": "^2.0.0", line. Because it's not found in the npm package registry. Try npm install again.
The error says #css-pkg/circular-std can't be found. That package may be removed from npm directory. While searching the package I couldn't find it in the directory.

Not able to install react-dom for react version v0.13.x

I am getting following error when I am trying to run the command npm install react react-dom
npm install react react-dom
- base62#1.2.0 node_modules/base62
- esprima-fb#15001.1.0-dev-harmony-fb node_modules/jstransform/node_modules/esprima-fb
- object-assign#2.1.1 node_modules/jstransform/node_modules/object-assign
- source-map#0.4.4 node_modules/jstransform/node_modules/source-map
- jstransform#11.0.3 node_modules/jstransform
- envify#3.4.1 node_modules/envify
/prd/dir/UI
├─┬ UNMET PEER DEPENDENCY react#16.2.0
│ └── fbjs#0.8.16
└─┬ UNMET PEER DEPENDENCY react-dom#16.2.0
└── fbjs#0.8.16
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents#1.1.3
npm WARN enoent ENOENT: no such file or directory, open '/prd/dir/UI/package.json'
npm WARN react-simple-dropdown#3.2.0 requires a peer of react#0.14.x || 15.x but none was installed.
npm WARN react-simple-dropdown#3.2.0 requires a peer of react-dom#0.14.x || 15.x but none was installed.
npm WARN reflux#0.2.13 requires a peer of react#>=0.12.2 <0.15.0 but none was installed.
npm WARN UI No description
npm WARN UI No repository field.
npm WARN UI No README data
npm WARN UI No license field.
npm ERR! code 1
Follow are my dev dependencies:
"devDependencies": {
"babel-core": "^5.8.25",
"babelify": "^6.1.x",
"browser-sync": "^2.7.13",
"browserify": "^10.2.6",
"debowerify": "^1.3.1",
"del": "^1.2.0",
"eslint-plugin-react": "^3.6.3",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.3.0",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.0.x",
"gulp-sourcemaps": "^1.5.2",
"gulp-streamify": "0.0.5",
"gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.6",
"history": "^1.12.5",
"humps": "^0.6.0",
"lodash": "^3.10.0",
"react": "^0.13.x",
"react-document-title": "^1.0.2",
"react-router": "^1.0.0-rc1",
"reflux": "^0.2.9",
"run-sequence": "^1.1.1",
"superagent": "^1.2.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.2.x"
}
In order to install a specific version of the npm package, you can mention the version at the end like
npm install -S react#0.13.x
However, I would highly recommend you to go with the latest versions. Also React-DOM was created as a separate package only from version 0.14.0 and hence is not needed before that. Check this answer react vs react DOM confusion

Ionic 2 : Warn after "npm install"

I use Ionic v2.1.8 and when I run the command "npm install" I have a lot of warn like this :
C:\xampp\htdocs\AppFineMobile>npm install
npm WARN #angular/compiler#2.4.8 requires a peer of #angular/core#2.4.8 but none was installed.
npm WARN #angular/compiler-cli#2.4.8 requires a peer of #angular/core#2.4.8 but none was installed.
npm WARN #angular/forms#2.4.8 requires a peer of #angular/core#2.4.8 but none was installed.
npm WARN #angular/forms#2.4.8 requires a peer of #angular/common#2.4.8 but none was installed.
npm WARN #angular/http#2.4.8 requires a peer of #angular/core#2.4.8 but none was installed.
npm WARN #angular/http#2.4.8 requires a peer of #angular/platform-browser#2.4.8 but none was installed.
npm WARN #angular/platform-browser-dynamic#2.4.8 requires a peer of #angular/core#2.4.8 but none was installed.
npm WARN #angular/platform-browser-dynamic#2.4.8 requires a peer of #angular/common#2.4.8 but none was installed.
npm WARN #angular/platform-browser-dynamic#2.4.8 requires a peer of #angular/platform-browser#2.4.8 but none was installed.
npm WARN #angular/platform-server#2.4.8 requires a peer of #angular/core#2.4.8 but none was installed.
npm WARN #angular/platform-server#2.4.8 requires a peer of #angular/common#2.4.8 but none was installed.
npm WARN #angular/platform-server#2.4.8 requires a peer of #angular/platform-browser#2.4.8 but none was installed.
npm WARN ionic-angular#2.2.0 requires a peer of #angular/common#2.4.8 but none was installed.
npm WARN ionic-angular#2.2.0 requires a peer of #angular/core#2.4.8 but none was installed.
npm WARN ionic-angular#2.2.0 requires a peer of #angular/platform-browser#2.4.8 but none was installed.
npm WARN ionic-angular#2.2.0 requires a peer of rxjs#5.0.1 but none was installed.
npm WARN ionic-angular#2.2.0 requires a peer of zone.js#0.7.2 but none was installed.
My package.json file :
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"test": "ng test"
},
"config": {
"ionic_copy": "./config/copy.config.js"
},
"dependencies": {
"#angular/common": "^2.4.0",
"#angular/compiler": "^2.4.0",
"#angular/compiler-cli": "^2.4.0",
"#angular/core": "^2.4.0",
"#angular/forms": "^2.4.0",
"#angular/http": "^2.4.0",
"#angular/platform-browser": "^2.4.0",
"#angular/platform-browser-dynamic": "^2.4.0",
"#angular/platform-server": "^2.4.0",
"#angular/router": "^3.4.0",
"#ionic/storage": "2.0.0",
"font-awesome": "^4.7.0",
"ionic-angular": "2.2.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"rxjs": "^5.1.0",
"sw-toolbox": "3.4.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"#angular/cli": "^1.0.0",
"#ionic/app-scripts": "1.1.4",
"codecov": "^2.1.0",
"jasmine-core": "^2.5.2",
"karma": "^1.5.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.3",
"karma-remap-istanbul": "^0.6.0",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"ionic-plugin-keyboard",
"cordova-plugin-splashscreen"
],
"cordovaPlatforms": [],
"description": "AppFineMobile: An Ionic project"
}
I don't understand because I have these modules on my node_modules folder. And when I tried to install one of them, I keep the warn with another npm install.
I really don't understand and I don't know how to solve that
You just need to update all your angular packages to 2.4.8.Also your ionic-angular package is 2.2.0.
Change:
"#angular/common": "^2.4.8",
"#angular/compiler": "^2.4.8",
"#angular/compiler-cli": "^2.4.8",
"#angular/core": "^2.4.8",
"#angular/forms": "^2.4.8",
"#angular/http": "^2.4.8",
"#angular/platform-browser": "^2.4.8",
"#angular/platform-browser-dynamic": "^2.4.8",
"#angular/platform-server": "^2.4.8",
Also
"rxjs": "^5.0.1",
"zone.js" :"0.7.2"
Clear your node_modules folder in case of issues and do:
npm install

How to solve npm "UNMET PEER DEPENDENCY"

I am having issues with my package.json file.
It should work fine as as I use most of the node modules in other projects, but I have this package.json below:
"dependencies": {
"#angular/common": "^2.0.0-rc.1",
"#angular/compiler": "^2.0.0-rc.1",
"#angular/core": "^2.0.0-rc.1",
"#angular/platform-browser": "^2.0.0-rc.1",
"#angular/platform-browser-dynamic": "^2.0.0-rc.1",
"#angular/router": "^2.0.0-rc.1",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.0.0-beta.6",
"systemjs": "^0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"body-parser": "^1.15.1",
"express": "^4.13.4",
"jsonwebtoken": "^6.2.0",
"mongoose": "^4.4.15"
}
and they should all run fine as all dependencies exist as angular is now in rc.4 and rxjs is on 5.0.0-beta.10.
But I get 3 unmet dependencies on
npm install
'rxjs#5.0.0-beta.10'
'rxjs#5.0.0-beta.6'
'#angular/core#2.0.0-rc.1'
I get these warnings too:
npm WARN #angular/core#2.0.0-rc.4 requires a peer of rxjs#5.0.0-beta.6 but none was installed.
npm WARN #angular/http#2.0.0-rc.1 requires a peer of rxjs#5.0.0-beta.6 but none was installed.
npm WARN #angular/http#2.0.0-rc.1 requires a peer of #angular/core#2.0.0-rc.1 but none was installed.
I have also done:
npm cache clean
npm update registry > with the registry link
npm update -g
node is on latest version and still same issue... so just wondering if there is something wrong?
I think its because the dependency resolution is a bit broken, see https://github.com/isaacs/npm/issues/1341#issuecomment-20634338
You may need to manually install top-level modules that have unmet dependencies:
npm install findup-sync#0.1.2
Or structure your package.json such that any top-level modules that are also dependencies of other modules are listed lower down.
Your problem could also be that npm failed to download the package, timed-out or whatnot. Sometimes re-running npm install remedies it.
You can also install the failed packages manually as well using npm install
Other steps that may help before attempting npm install again are:
Removing node_modules using:
rm -rf node_modules/
then
npm cache clean
To explain why removing node_modules sometimes is necessary:
Apparently if a nested module fails to install during npm install, subsequent npm install won't detect those missing nested dependencies. If that's the case, sometimes it's sufficient to remove the top-level dependency of those missing nested modules, and running npm install again.
See https://github.com/npm/npm/issues/1336

Resources