Question

我正在构建一个ionic2应用程序，我一直在关注离子框架官方网站上的Heroes示例，但一直很难导入路由器指令。

    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)
];

这段代码产生的错误是：

未解析的提供者

未解决的RouterConfig

无法解析目录@angular

为什么会出现这种情况？

package.json文件如下所示：

 {
  "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": []
}

按照@MatWiligora的建议手动插入路由器依赖项后，当我尝试 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.

和

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/common@2.0.0-rc.3 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/router@3.0.0-beta.2 wants @angular/common@^2.0.0-rc.4
npm ERR! peerinvalid Peer @angular/platform-browser@2.0.0-rc.3 wants @angular/common@2.0.0-rc.3
npm ERR! peerinvalid Peer @angular/platform-browser-dynamic@2.0.0-rc.3 wants @angular/common@2.0.0-rc.3
npm ERR! peerinvalid Peer ionic-angular@2.0.0-beta.10 wants @angular/common@^2.0.0-rc.3

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

Answer 1

确保您正在安装“@ angular / router”：“3.0.0-beta.2”作为您在package.json中的依赖项，即当前版本的路由器。< / p>

您是否也向您的引导程序注入了 APP_ROUTER_PROVIDERS ？

Angular2 - 未解决的路由器导入

1 个答案: