web-dev-qa-db-ja.com

Angularディレクティブを使用すると@ angular / core 404 not foundエラーが発生する

このコード行を@Componentに追加すると：

directives: [HeroDetailComponent]

コードが壊れ、次のエラーが表示されます。

GET http://localhost:3000/@angular/core 404 (Not Found)

これらは私のindex.htmlのスクリプトです。

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

この問題を診断するための情報が不足している場合は、お知らせください。ここに記載します。

angularangular-directive
6
Lucas

Angular2のRCバージョンを使用する場合は、次のようにSystemJSを構成する必要があります。

var packages = {
  'app': { main: 'main.js',  defaultExtension: 'js' },
  'rxjs': { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { defaultExtension: 'js' },
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core', // <--------
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
  map: map,
  packages: packages
}

System.config(config);

ベータ版を使用する場合は、script要素にnode_modules/angular2/bundles/angular2.dev.jsファイルを含めた後、代わりにこのパッケージをインポートします。

import {Component, Directive, ...} from 'angular2/core';
7
Thierry Templier

Angular 2 tutorial at ）を実行しようとしたときに同じエラーが発生しましたhttps://angular.io/docs/ts/latest/tutorial/toh -pt3.html 。

しかし、問題はapp.component.tsにタイプミスがあったことであり、最初の行は次のようになります。

import { Component } from '@angular/core';

しかし、私は「コア」の大文字を書きました：

import { Component } from '@angular/Core'

したがって、私のアドバイスは、SystemJSを改訂する前に、リソースの正しい名前を書くことを確認することです。

4
Rafy

これを変える

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';

へ->>

import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/in-memory-backend.service';

あなたのmain.ts

0
AutoMEta