angular 4 to angular 5 Cannot find module '@angular/router'
Solution 1
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.
Solution 2
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 yourpackage-lock.json
orshrinkwrap.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
andnpm 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.
Solution 3
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.
Admin
Updated on November 20, 2020Comments
-
Admin over 3 years
- 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" } }