web-dev-qa-db-ja.com

angular 4 to angular 5モジュール '@ angular / router'が見つかりません

  • angular 2からangular 5。
  • アップグレード後、tsファイルに次のエラーが表示されます。
  • angular5では、@ angular/coreと@ angular/routerを削除する必要がありますか
  • package.jsonも提供するアップグレード後
  • 以下にエラーとコードスニペットを提供します。
  • 修正方法を教えてください。

エラー

[ts]モジュール '@ angular/core'が見つかりません。
[ts]モジュール '@ angular/router'が見つかりません。

コード

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"
  }
}
javascriptangularnpmangular2-routingangular5
6
user9201591

これらの依存関係を手動でインストールする必要があります。

$ npm i @angular/core -s
$ npm i @angular/router -s

npmが原因で、アップグレード中に同じ問題に直面しました。代わりに糸を使い始めることをお勧めします。

14
Melchia

子を持つ各ルーターモジュールでRouterModuleをエクスポートしていることを確認してください。 angularドキュメンテーションでは、これは必要であると明示的には述べられていません-例に含まれているだけです-しかし、それは必要です。ため息、edit-run-shout、edit-run-google-editWithHope-scream-considerSmashingKeyboard、edit-run-cry、edit-run-solveByAccident-feelMomentaryPride（繰り返し）。

結論：include RouterModule。メタの結果：公式ドキュメントにある一見不要なコードに注意してください。

1
Jai Preston

  1. このエラーはコンパイラまたはIntellisenseのようなIDEツールですか？インストール/ブランチの切り替えで時々見つけることがありますIDEこのようなツールは混乱し、 IDEの再起動。

  2. コンパイルできない場合、モジュールは実際にnode_modules?にあります。そうでない場合は、package-lock.jsonまたはshrinkwrap.jsonを削除して、再度インストールしてください。 NPMはデフォルトで5.0の時点でパッケージロックを追加しますが、複雑な依存関係があると、時々混乱することがあります。

  3. 存在する場合は、npm Pruneおよびnpm installを再度実行します。

  4. それでもうまくいかない場合は、ロックファイルと一緒にnode_modulesを削除してから、再度インストールしてください。

  5. サードパーティのライブラリには更新が必要ですか？ Angular 5には、いくつかの重大なAPIの変更がありました。その場合は、ドキュメントを確認してください。

  6. 糸を検討してください。

それが最初のものであると確信していますが、完了のために通常行うすべてのステップは残しておきます。

1
joh04667