web-dev-qa-db-ja.com

エラー：angle2 / httpをロードするXHRエラー（404 Not Found）

私はAngular2アプリケーションにangular-cliを使用しています。コンポーネント/サービスでangle2/httpをロードしようとすると、CLIターミナルにエラーは表示されませんが、ブラウザのコンソールにはこれが表示されます-

GET http：// localhost：4200/angular2/http 404（見つかりません）

未処理のPromiseの拒否：エラー：XHRエラー（404 Not Found）の読み込み http：// localhost：4200/angular2/http XMLHttpRequest.desc.setで。 wrapFn [as _onreadystatechange]（ http：// localhost：4200/vendor/zone.js/dist/zone.js：769：30 ）ZoneDelegateで.invokeTask（ http：// localhost：4200/vendor/zone.js/dist/zone.js：356：38 ）Zone.runTask（ http：// localhost：4200/vendor/zone.js/dist/zone.js：256：48 ）at XMLHttpRequest.ZoneTask.invoke（ http：// localhost：4200/vendor/zone.js/dist/zone.js：423：34 ）読み込みエラー http：// localhost：4200/angular2/httphttp：// localhost：4200/app/js-からの「angular2/http」としてtree.component.js ;ゾーン： ;タスク：Promise.then;値：エラー：エラー：XHRエラー（404 Not Found）の読み込み http：// localhost：4200/angular2/http at XMLHttpRequest.desc.set。 wrapFn [as _onreadystatechange]（ http：// localhost：4200/vendor/zone.js/dist/zone.js：769：30 ）ZoneDelegateで.invokeTask（ http：// localhost：4200/vendor/zone.js/dist/zone.js：356：38 ）Zone.runTask（ http：// localhost：4200/vendor/zone.js/dist/zone.js：256：48 ）at XMLHttpRequest.ZoneTask.invoke（ http：// localhost：4200/vendor/zone.js/dist/zone.js：423：34 ）読み込みエラー http：// localhost：4200/angular2/httphttp：// localhost：4200/app/js-からの「angular2/http」としてtree.component.js

私のangular-cliバージョンは0.0.39です

ノード：4.2.2

ここに私のsystem-config.tsがあります

const map: any = {
};

/** User packages configuration. */
const packages: any = {
};


const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/tree',
  'app/tree/item',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

そして、私のpackage.json

{
  "name": "pankha",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng server",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "format": "clang-format -i -style=file --glob=src/**/*.ts",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "angular-cli": "0.0.*",
    "clang-format": "^1.0.35",
    "codelyzer": "0.0.14",
    "ember-cli-inject-live-reload": "^1.4.0",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.4.0",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "TypeScript": "^1.8.10",
    "typings": "^0.8.1"
  }
}

と私のindex.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pankha</title>
  <base href="/">
  {{content-for 'head'}}
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Service worker support is disabled by default.
       Install the worker script and uncomment to enable.
       Only enable service workers in production.
  <script type="text/javascript">
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/worker.js').catch(function(err) {
        console.log('Error installing service worker: ', err);
      });
    }
  </script>
  -->
</head>
<body>
  <pankha-app>Loading...</pankha-app>

  <script src="vendor/es6-shim/es6-shim.js"></script>
  <script src="vendor/reflect-metadata/Reflect.js"></script>
  <script src="vendor/systemjs/dist/system.src.js"></script>
  <script src="vendor/zone.js/dist/zone.js"></script>
  <!-- <script src="node_modules/angular2/bundles/http.dev.js"></script> -->




  <script>
    System.import('system-config.js').then(function () {
      System.import('main');
    }).catch(console.error.bind(console));
  </script>
</body>
</html>
angularangular2-httpangular-cli
12
pd farhad

私は解決策を見つけました。私はangular2のベータ版を使用していなかったので、package.jsonを開き、依存関係の下にこの行を追加する必要がありました

"@angular/http": "2.0.0-rc.1",

次に、端末を開いて入力しました

npm install

System-config.tsを更新しました

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/tree',
  'app/tree/item',
  /** @cli-barrel */
];

それがあった場所

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/tree',
  'app/tree/item',
  /** @cli-barrel */
];
6
pd farhad

メインのHTMLファイルにhttp.dev.jsファイルを含めるのを忘れたと思います。

<script src="node_modules/angular2/bundles/http.dev.js"></script>

これはベータ版（rcバージョンではない）にのみ適用されることに注意してください。ただし、angular2/httpモジュールを使用しているため、ベータ版を使用していると思います。

8
Thierry Templier