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.
Related
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'm building an npm package that depends on #angular/material.
I've included in my package.json (hiding irrelevant info)
{
"main": "dist/index.js",
"module": "dist/index.js",
"types": "./dist/index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "ngc"
},
"peerDependencies": {
"#angular/core": ">=4.0.0 <5.0.0 || >=4.0.0-beta <5.0.0",
"#angular/animations": "^5.2.0",
"#angular/cdk": "^5.0.4",
"#angular/material": "^5.0.4",
"hammerjs": "^2.0.8",
},
"devDependencies": {
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.4.6",
"#angular/compiler-cli": "^4.4.6",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/animations": "^5.2.0",
"#angular/cdk": "^5.0.4",
"#angular/material": "^5.0.4",
"hammerjs": "^2.0.8",
"core-js": "^2.4.1",
"rollup": "^0.50.0",
"rxjs": "^5.4.1",
"typescript": "^2.6.1",
"uglify-js": "^3.1.6",
"zone.js": "^0.8.4"
}
}
I build the package with ./node_modules/.bin/ngc without any problem. But when I use this package in my local project, I'm getting the following error:
ERROR in /Users/me/myPackage/dist/myPackage.module.js
Module not found: Error: Can't resolve '#angular/material/slider/' in '/Users/me/myPackage/dist'
# /Users/me/myPackage/dist/morpheus.module.js 49:0-60
# /Users/me/myPackage/dist/index.js
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.
You need to move some dependencies from devDependencies to either dependencies or peerDependencies (according to your requirements). This regards dependencies, that need to be available in the project that uses your package. Also, you should not have them in both groups, as e. g. "#angular/material": "^5.0.4".
Most of your dependencies should probably be peerDependencies, such that those dependencies won't be installed multiple times in different versions in the project that uses your package.
For further information about the differences, have a look at this SO answer.
Changed react and react-dom to 16.2.0 in my package JSON and receiving the following error.
Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook"
Have tried clearing my node_modules, reinstalling everything, starting with a fresh project and adding dependencies in small chunks to narrow down the issue, and trying just about every option already seen on stack overflow.
my package.json is as follows:
{
"name": "",
"version": "0.0.1",
"description": "",
"main": "index.js",
"repository": {
"type": "git",
"url": "..."
},
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p"
},
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"classnames": "^2.2.5",
"connect-mongo": "^2.0.0",
"cookie-parser": "^1.4.3",
"express": "^4.16.2",
"express-session": "^1.15.6",
"moment": "^2.19.3",
"mongoose": "^4.13.6",
"multer": "^1.3.0",
"node-sass": "^4.7.2",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"qs": "^6.5.1",
"react": "^16.2.0",
"react-click-outside": "^3.0.0",
"react-dom": "16.2.0",
"react-redux": "5.0.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.0.0",
"redux-thunk": "^2.2.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"redux-devtools": "^3.4.1",
"sass-loader": "^6.0.6",
"serve": "^6.4.1",
"style-loader": "^0.19.0",
"svg-sprite-webpack-plugin": "^1.1.0",
"svg-spritemap-webpack-plugin": "^1.0.3",
"url-loader": "^0.6.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^3.10.0"
},
"author": "",
"license": "ISC",
"homepage": ""
}
After placing a breakpoint at the line erroring out, it seems that the stack trace is coming form the import of react-dom, but if that is at the latest version matching react, i don't understand why i am having this issue.
Out of options that I can think of, would appreciate any help. Thanks.
Have tried clearing my node_modules, reinstalling everything
Remember that since NPM 5-th version it generates package lock file, without purging that reinstalling modules will not work appropriately.
Also check following - if some package has own dependency on old react package version, it will be installed into nested node_modules directory, and then everything is dependent on project/loaders structure. In come circumstance, invalid new or old package version will be loaded. In some npm packages, like graphql, special warning added for that case: "Maybe you have installed different version of package".
So, check other packages' versions, and maybe update them.
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.
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.