在Angular2中导入依赖项时遇到困难

基本上我通过引用Angular2快速入门教程创建了一个示例应用程序。为了进一步挖掘，我创建了./services/dataService.ts服务文件，如下所示。在Angular2中导入依赖项时遇到困难

import {Injectable} from 'angular2/core'; 
@Injectable() 
export class DataService { 
    items: Array<number>; 
    constructor() { 
     this.items = [1, 2, 3, 4]; 
    } 
    getItems() { 
     return this.items; 
    } 
}

我在tsconfig其中以下路径transpile app.ts & dataService.ts所提到"outDir": "../wwwroot/app",选项。

--wwwroot 
|app 
    |--app.js 
    |--services 
     |-- dataService.js

MyAppComponent

import {Component, View, Inject, forwardRef} from 'angular2/core'; 
import {NgFor} from 'angular2/common'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {DataService} from './services/dataService'; 

@Component({ 
    'selector': 'my-app', 
    template: ` 
      <div *ngFor="#item of items"> 
       {{item}} 
      </div> 
     `, 
    directives: [NgFor], 
    providers: [DataService] 
}) 
export class MyAppComponent { 
    items: Array<number>; 
    constructor(service: DataService) { 
     this.items = service.getItems(); 
    } 
} 
bootstrap(MyAppComponent)

代码获取无错编译，但经过RAN应用我以下错误，http://localhost:8413/app/services/dataService。

无法加载资源：服务器与404状态（未找到）

我用下面的代码从index.html加载页面上的应用程序文件作出回应。

System.config({ packages: { src: { defaultExtension: 'js' } } }); 
System.import('app/app.js').then(null, console.error.bind(console));

我的问题是我怎么能导入dataService.js，为什么是在一个地方给404错误还是它的存在？我研究了这个问题，但没有发现任何有用的东西。任何帮助将不胜感激。

编辑

新增.tsconfig直接得到纠正时，有问题

{ 
    "compilerOptions": { 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "module": "commonjs", 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5", 
    "outDir": "../wwwroot/app", 
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
}

来源

2016-01-29 Pankaj Parkar

是文件所在的'/ app/services/dataservice'？ –

@MarkPieszak没有运气:(现在它不允许我构建应用程序.. –

似乎不是一个角度问题。建议您发布您的gulp文件，js在另一个帖子中被标记为 –

的问题是与System配置，以前我在下面的代码加载组件。

System.config({ packages: { src: { defaultExtension: 'js' } } }); 
System.import('app/app.js').then(null, console.error.bind(console));

基本上System.config设置告诉packages是属于src文件夹和文件defaultExtension是js。所以我将packages的src更改为app，因为我的文件夹是app，而不是src。

除此之外，我将System.import('app/app.js')更改为System.import('app/app')，因为文件的默认扩展名是js，所以我不需要为此烦恼。所以我的组件加载脚本更改为下面。

System.config({ packages: { app: { defaultExtension: 'js' } } }); 
System.import('app/app').then(null, console.error.bind(console));

来源

2016-01-30 07:22:43

在Angular2中导入依赖项时遇到困难

回答

相关问题