Angular在使用指令时给出@ angular / core 404 not found错误

时间:2016-05-04 03:09:14

标签: angular angular-directive

当我将这行代码添加到@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>

如果我错过了诊断此问题的任何信息,请告诉我,我会将其包含在此处。

3 个答案:

答案 0 :(得分:7)

如果您想使用RC版本的Angular2,您需要以这种方式配置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);

如果您想在node_modules/angular2/bundles/angular2.dev.js元素中包含script文件后使用测试版,请改为导入此软件包:

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

答案 1 :(得分:4)

当我尝试在https://angular.io/docs/ts/latest/tutorial/toh-pt3.html处遵循Angular 2教程时,我遇到了同样的错误。

但是我发现问题是app.component.ts中有一个拼写错误,第一行应该是:

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

但我写了一封'核心'的大写字母:

import { Component } from '@angular/Core'

所以我的建议是确保在尝试修改SystemJS之前写出正确的资源名称。

答案 2 :(得分:0)

更改此

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

到 - &gt;&gt;

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

在你的main.ts