CODEWITHSUNDEEP
angularionic2
Damyan
Damyan

Reputation: 307

Angular2 - Unresolved Router Import

I am building an ionic2 application and I have been following the Heroes example on the ionic framework official website but have been having hard times importing the router directives.

    import { provideRouter, RouterConfig } from '@angular/router';

    export const routes: RouterConfig = [
    { path: 'crisis-center', component: CrisisCenterComponent },
    { path: 'heroes', component: HeroListComponent },
    { path: 'hero/:id', component: HeroDetailComponent }];                                

    export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

The error which this piece of code produces is:

Unresolved provideRouter

Unresolved RouterConfig

Cannot resolve directory @angular

Any ideas why this might be?

The package.json file looks like this:

 {
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.2.4",
    "ionicons": "3.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  },
  "name": "test",
  "description": "test: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

After I manually inserted the router dependency as suggested by @MatWiligora, I got the following error when I tried to do npm install

    npm WARN peerDependencies The peer dependency @angular/core@^2.0.0-rc.4 included from @angular/router will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/compiler@^2.0.0-rc.4 included from @angular/router will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/common@^2.0.0-rc.4 included from @angular/router will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/platform-browser@^2.0.0-rc.4 included from @angular/router will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/platform-browser-dynamic@^2.0.0-rc.4 included from @angular/router will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

and

npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package @angular/[email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/[email protected] wants @angular/common@^2.0.0-rc.4
npm ERR! peerinvalid Peer @angular/[email protected] wants @angular/[email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants @angular/[email protected]
npm ERR! peerinvalid Peer [email protected] wants @angular/common@^2.0.0-rc.3

npm ERR! Please include the following file with any support request:
npm ERR!  npm-debug.log

Upvotes: 1

Views: 830

Answers (1)

MatWaligora
MatWaligora

Reputation: 1217

Make sure that you are installing "@angular/router": "3.0.0-beta.2" as your dependency in package.json, that is the current version of the router.

Also did you inject: APP_ROUTER_PROVIDERS to your bootstrap ?

Upvotes: 3

Related Questions