After playing around with angular2 and following angular2 guide in thier website I tryied to move to angular2-cli but angular2-cli project doesnt have the most updated dependencies so the compiler give me some errors about some commands in the code.
I want to upgrade all of the dependencies like core,router and more.
the most updated router need the most updated core but when I try to do: npm install core -g, i get a lots of errors.
What is the best and fast way to upgrade all the exsisting dependencies?
Here are the package.json of angular-cli and angular website:
angular2-cli - orginial package.json:
{
"name": "angular2-projects",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0-rc.3",
"#angular/compiler": "2.0.0-rc.3",
"#angular/core": "2.0.0-rc.3",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.3",
"#angular/platform-browser": "2.0.0-rc.3",
"#angular/platform-browser-dynamic": "2.0.0-rc.3",
"#angular/router": "3.0.0-alpha.8",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.9",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "0.8.1"
}
}
most updated angular2 dependencies from angular2 website:
{
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"#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.1",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.4",
"core-js": "^2.4.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0"
}
}
Once you've updated your dependencies in the packages.json, delete the node_modules directory, and then run "npm install." That will install all the packages from your configuration.
I'm unsure if the question has been answered but to give a direct answer, the easiest and fastest way to upgrade all existing dependencies in a package.json file is to go into the folder that houses said file (or any child thereof) and run the following:
npm update
That will update all dependencies (dev included) to the latest supported versions inside your package.json and install them for you, ready to use. Doing it this way also has the added benefit of meaning that if there are versions of libraries that don't work well together, the update process will steer clear of them.
You can even run npm outdated after the update to see what libraries you have, what you need and if there are any updates on the NPM registry.
Related
I already had angular project that ran in 4 version. While installing new project, unfortunately i have installed 6 version of angular cli. This throw me an error 'Your global Angular CLI version is greater than your local version' while running ng serve command in old project that ran in 4 version. Again i tried to update my anglar local version. But now i have got an error This version of CLI is only compatible with Angular version 5.0.0 or higher. My package.json is following:
{
"name": "authority-client",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/core": "^0.7.2",
"#angular/animations": "^4.2.4",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"#types/file-saver": "^1.3.0",
"angular2-cookie": "^1.2.6",
"core-js": "^2.4.1",
"file-saver": "^1.3.8",
"ng2-toastr": "^4.1.2",
"ngx-bootstrap": "^2.0.1",
"ngx-loading": "^1.0.14",
"npm": "^5.5.1",
"postcss-loader": "^2.0.9",
"rxjs": "^5.4.2",
"sweetalert2": "^7.22.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.7.0",
"#angular/cli": "^6.1.5",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#ngtools/webpack": "^6.1.5",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"angular-ide": "^0.9.44",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.0",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
Can someone fix this error. I have been tried from last 2 days, but i cant find any appropriate solution.
I think this is what you're looking for.
Other answers simply forgot to include the -g parameter.
npm install -g #angular/cli#1.4.9
It's all said in the error itself. You're not installing it globally ;)
Hope this solves your issues.
UPDATE:
To update Angular CLI to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g #angular/cli
npm cache verify // If npm version is < 5 then use `npm cache clean`
npm install -g #angular/cli#latest
Local project package:
// Use rmdir /S/Q node_modules dist in Windows Command Prompt;
// Use rm -r -fo node_modules, dist in Windows PowerShell
rm -rf node_modules dist
npm install --save-dev #angular/cli#latest
npm install
For more info check out the ReadMe file on GitHub.
Use CLI version 1.4.9 with angular 4.
npm install #angular/cli#1.4.9
"devDependencies": {
"#angular-devkit/build-angular": "~0.7.0",
"#angular/cli": "1.4.9",
....
....
}
you can refer
How to install Angular-CLI with Angular v4.x
You can solve your problem by running:
npm install --save-dev #angular/cli#latest
Inside my Angular 5 app , i ve angular-cli 1.6.8
{
"name": "test",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"karma": "ng test",
"test": "jest",
"test:watch": "jest --watch",
"test:ci": "jest --runInBand",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.7",
"#angular/common": "^5.2.7",
"#angular/compiler": "^5.2.7",
"#angular/core": "^5.2.7",
"#angular/forms": "^5.2.7",
"#angular/http": "^5.2.7",
"#angular/platform-browser": "^5.2.7",
"#angular/platform-browser-dynamic": "^5.2.7",
"#angular/platform-server": "^5.2.7",
"#angular/router": "^5.2.7",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"lodash": "^4.12.0",
"moment": "^2.18.1",
"npm": "^5.2.0",
"proxy-polyfill": "^0.1.7",
"rxjs": "^5.5.6",
"sha1": "^1.1.1",
"smoothscroll-polyfill": "^0.3.5",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.8"
},
"devDependencies": {
"#angular/cli": "1.6.8",
"#angular/compiler-cli": "^5.2.7",
"#types/jasmine": "2.5.38",
"#types/jest": "^20.0.5",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"jest": "^20.0.4",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-jest": "^20.0.7",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "2.6.2"
},
}
when running ng --version or ng build inside my app folder , it fails saying that : bash: ng: command not found -> in contrats running npm run build runs normally
i ve node 8.0.0 and npm 4.2.2 installed globally , buti ve not angular-cli installed globally , and i don't want to install it. therfore i think that i may use ng commands inside my app (locally) , no ?
if not how may i do it without installing it globally via npm install -g #angular/cli (as i m not allowed to run global npm install actions)
Sugesstions?
If you want to use ng command as well other commands, you need to install them globally. You can't run local commands because NodeJS does not find them.
I am upgrading from angular 2 to angular 5.
after upgradation I am seeing the below errors in the the ts file.
in angular5 do I need to remove #angular/core and #angular/router
after upgradation providing the package.json also
providing my error and code snippet below.
can you tell me how to fix it.
error
[ts] Cannot find module '#angular/core'.
[ts] Cannot find module '#angular/router'.
code
import {Component, ElementRef, Input,Output,EventEmitter,Inject, OnInit,ViewChild} from '#angular/core';
import {KendoGridComponent} from '../grid/grid.component'
import { Router} from '#angular/router';
package.json
{
"name": "SPORTS",
"version": "1.0.0",
"description": "SPORTS player - v0.2.37.1",
"engines": {
"node": "7.10.1"
},
"license": "ISC",
"dependencies": {
"#angular/animations": "^5.2.2",
"#angular/common": "^5.2.2",
"#angular/compiler": "^5.2.2",
"#angular/compiler-cli": "^5.2.2",
"#angular/core": "^5.2.2",
"#angular/forms": "^5.2.2",
"#angular/http": "^5.2.2",
"#angular/platform-browser": "^5.2.2",
"#angular/platform-browser-dynamic": "^5.2.2",
"#angular/platform-server": "^5.2.2",
"#angular/router": "^5.2.2",
"#angular/upgrade": "2.0.0",
"#ng-idle/core": "2.0.0-beta.2",
"#ng-idle/keepalive": "2.0.0-beta.2",
"#types/jquery": "^3.2.10",
"#types/node": "^8.0.18",
"#types/underscore": "^1.8.1",
"#types/webpack": "^3.0.5",
"angular2-in-memory-web-api": "0.0.21",
"angular2-router-loader": "^0.3.5",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.2.1",
"babel-minify-webpack-plugin": "0.2.0",
"bootstrap": "^3.3.6",
"commander": "^2.6.0",
"compression-webpack-plugin": "1.0.1",
"core-js": "^2.4.1",
"css-loader": "^0.28.7",
"del": "^3.0.0",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"file-saver": "^1.3.3",
"html-webpack-plugin": "^2.30.1",
"http-post": "^0.1.1",
"http-proxy": "^1.8.1",
"jquery": "2.2.3",
"pako": "^1.0.5",
"path": "^0.12.7",
"raw-loader": "^0.5.1",
"reflect-metadata": "^0.1.3",
"require": "^2.4.20",
"rxjs": "^5.5.6",
"style-loader": "^0.18.2",
"text-encoding-shim": "^1.0.0",
"to-string-loader": "^1.1.5",
"ts": "0.0.0",
"typescript": "^2.4.2",
"uglifyjs-webpack-plugin": "^0.4.6",
"underscore": "^1.8.3",
"webpack": "^3.5.6",
"webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0",
"zone.js": "^0.6.23"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean-css": "^3.8.0",
"gulp-concat": "^2.6.1",
"gulp-util": "^3.0.8",
"jasmine-core": "~2.4.1",
"jasmine-expect": "^3.0.1",
"jasmine-jquery": "^2.1.1",
"karma": "^1.2.0",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "^0.1.2",
"karma-coverage": "^1.1.1",
"karma-htmlfile-reporter": "^0.2.2",
"karma-jasmine": "^0.3.8",
"karma-jquery": "^0.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-typescript": "^2.1.4",
"karma-typescript-preprocessor": "^0.3.0"
},
"main": "server.js",
"scripts": {
"dev": "webpack-dev-server --config ./webpack.dev.js --inline --progress --color ",
"postinstall": "webpack -p --config ./webpack.prod.js --progress --profile --bail",
"start": "node server.js"
},
"repository": {
"type": "git",
"url": "https://github.iSPORTS.com/player-Replatform/webcomponent.git"
}
}
You need to install these dependencies manually.
$ npm i #angular/core -s
$ npm i #angular/router -s
I also faced the same issue while upgrading because of npm. I suggest you start using yarn instead.
Is this error coming from the compiler or an IDE tool like Intellisense? I find sometimes with installing/branch switching IDE tools like this can get confused and require a restart of the IDE.
If it won't compile, are the modules actually in your node_modules? If not, delete your package-lock.json or shrinkwrap.json and install again. NPM adds the package lock by default as of 5.0 and I find with complicated dependencies it can mess up sometimes.
If they are there, run npm prune and npm install again.
If that doesn't work, nuke node_modules alongside any lock file and install again.
Do any third-party libraries require an update? Angular 5 had some breaking API changes. Check their docs if that's the case.
Consider Yarn.
I'm pretty sure it's the first one, but I'll leave all the steps I usually take just for the sake of completion.
Make sure you are exporting RouterModule in each router module that has children. In the angular documentation this is not explicitly stated as being necessary -- it's merely included in the examples -- but it is necessary, as one finds out after the customary several hours of edit-run-sigh, edit-run-shout, edit-run-google-editWithHope-scream-considerSmashingKeyboard, edit-run-cry, edit-run-solveByAccident-feelMomentaryPride (repeat).
The upshot: include RouterModule. The meta upshot: pay attention to the little seemingly unnecessary code in official documentation.
I have angular 2 project, after updating #angular/cli ,webpack and typescript version I get this error, confusing side is that I only get error in this angular 2 project, another one works perfectly fine. I share error and package.json below. I have updated angular cli globally and locally. Is there any problem with versions or?
\node_modules\#angular\cli\node_modules\webpack\lib\Compilation.js:329
if(_this.profile) {
^
TypeError: Cannot read property 'profile' of null
package.json
{
"name": "crm-ca",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.3.1",
"#angular/compiler": "^2.3.1",
"#angular/core": "^2.3.1",
"#angular/forms": "^2.3.1",
"#angular/http": "^2.3.1",
"#angular/platform-browser": "^2.3.1",
"#angular/platform-browser-dynamic": "^2.3.1",
"#angular/router": "^3.3.1",
"angular2-cookie": "^1.2.5",
"angular2-text-mask": "^2.1.0",
"bootstrap": "^4.0.0-alpha.3",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/cli": "^1.0.0",
"#angular/compiler-cli": "^2.3.1",
"#types/bootstrap": "^3.3.32",
"#types/jasmine": "2.5.38",
"#types/jquery": "^2.0.40",
"#types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "^2.2.2",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.1.0-beta.9"
}
}
I recommend removing webpack and webpack-dev-server from your package.json. angular-cli uses its own version of webpack which is clashing with what's in your package.json. I had this issue and that's the solution that worked for me.
I found the following here and it worked for me:
npm uninstall --save-dev webpack
sudo rm -R node_modules
npm install
Hey remove the webpack and webpack-dev-server from your package.json and run the npm uninstall --save-dev webpack this should handle your situation.
I started an angular 2.0 project with angular CLI; but when I tried to use routing it is throwing some errors. Currently when I try to run 'npm serve' the error showing is -
"The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
H:/codes/animeSquad/tmp/broccoli_type_script_compiler-input_base_path-XUPT7Vob.tmp/0/src/app/app.routes.ts (5, 10): Module '"H:/codes/animeSquad/node_modules/#angular/router/index"' has no exported mng 'RouterModule'."
My package.json content is as such -
{
"name": "anime-squad",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.0.0-rc.5",
"#angular/compiler": "2.0.0-rc.5",
"#angular/core": "2.0.0-rc.5",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.5",
"#angular/platform-browser": "2.0.0-rc.5",
"#angular/platform-browser-dynamic": "2.0.0-rc.5",
"#angular/router": "3.0.0-alpha.7",
"#angular/upgrade": "2.0.0",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.31",
"zone.js": "0.6.12"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.10",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "1.3.1"
}
}
My target is to enable routing while keeping the CLI setup. I am fairly new to angular so simple detailed explanation will be much appreciated.
Thanks in advance.
Use "#angular/router" : "^3.0.0-rc.1" with angular rc5 and if possible try with latest version of angular release as angular 2.0.0 is released.
You can see answer of question to update to latest angular version :
how to upgrade to angular2 official release from rc6 from webpack
RC.2 is shipped with the RC router, which has been deprecated. You need to install the vladivostok router :)
npm remove #angular/router --save // will remove the RC router
npm install #angular/router#3.0.0-alpha.7 --save // will install the latest router