面对困难，而在Angular2依赖进口 [英] Facing difficulty while importing dependency in Angular2

问题描述

基本上我已经提到Angular2快速入门教程创建了一个示例应用程序。为进一步挖掘我创建 ./服务/ dataService.ts 服务文件象下面这样。

 进口{}注射从'angular2 /核心;
@Injectable（）
出口类的DataService {
    项目：数组＆LT;号取代;
    构造函数（）{
        this.items = [1，2，3，4〕;
    }
    getItems（）{
        返回this.items;
    }
}
 

我OUTDIR：../的wwwroot /应用，在 tsconfig 提到的选项，transpile app.ts ＆安培; dataService.ts 下面的路径。

   -  wwwroot文件
 |应用
   | --app.js
   | --services
      |  -  dataService.js
 

MyAppComponent

 进口{组件，景观，注入，forwardRef}从'angular2 /核心;
进口{} NgFor从'angular2 /通用';
从angular2 /平台/浏览器的进口{}引导;
进口{}的DataService从'./services/dataService';@零件（{
    选择：我的应用，
    模板：`
            ＆LT; D​​IV * ngFor =＃项目项＆GT;
                {{项目}}
            ＆LT; / DIV＆GT;
        `
    指令：[NgFor]
    供应商：[DataService的]
}）
出口类MyAppComponent {
    项目：数组＆LT;号取代;
    构造函数（服务：DataService的）{
        this.items = service.getItems（）;
    }
}
引导（MyAppComponent）
 

  

code被没有错误编译，但在应用程序运行我
  下面的错误，的http：//本地主机：8413 /应用程序/服务/ DataService的

无法加载资源：服务器的状态为回应404（未找到）

我用低于code从 index.html的加载页面上的应用程序文件。

  System.config（{包：{SRC：{defaultExtension：'JS'}}}）;
System.import（应用程序/ app.js'），然后（NULL，console.error.bind（控制台））。
 

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

修改

新增 .tsconfig 来直接拿到整顿的时候有问题。

  {
  compilerOptions：{
    noImplicitAny：假的，
    noEmitOnError：真实，
    模块：CommonJS的
    removeComments：假的，
    sourceMap：真实，
    目标：ES5
    OUTDIR：../wwwroot/app，
    experimentalDecorators：真实，
    emitDecoratorMetadata：真
  }，
  排除：[
    node_modules
    wwwroot的
  ]
}
 

解决方案

的问题是与系统配置，previously我有低于code加载组件。

  System.config（{包：{SRC：{defaultExtension：'JS'}}}）;
System.import（应用程序/ app.js'），然后（NULL，console.error.bind（控制台））。
 

基本上 System.config 设置告诉包是属于的src 文件夹和文件 defaultExtension 是 JS 。所以我改变了我的包的的src 到应用为我有应用文件夹，而不是的src 。

除此之外，我改变了 System.import（应用程序/ app.js'）到 System.import（应用程序/应用程序） 为文件的默认扩展名是 JS ，所以我不需要理会它。所以，我的组件加载脚本改为如下。

  System.config（{包：{应用程序：{defaultExtension：'JS'}}}）;
System.import（应用程序/应用程序），然后（NULL，console.error.bind（控制台））。
 

Basically I have created a sample application by referring to Angular2 quickstart tutorial. For further digging I've created ./services/dataService.ts service file like below.

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

I had "outDir": "../wwwroot/app", option mentioned in tsconfig which transpile app.ts & dataService.ts to below path.

--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)

Code gets compiled with no-error, but after application Ran I got below error, http://localhost:8413/app/services/dataService.

Failed to load resource: the server responded with a status of 404 (Not Found)

I used below code from index.html to load app files on page.

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

My question is how could I import the dataService.js, why does is give 404 error still its there in a place? I Researched alot on this problem, but didn't find anything helpful. Any help would appreciated.

Edit

Added .tsconfig to directly get rectify when there is issue

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

解决方案

The problem was with configuration of System, previously I was having below code to load component.

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

Basically System.config settings tells that packages would be belongs to src folder and the files defaultExtension is js. So I changed my packages's src to app as I was having app folder, not src.

Other than that I changed System.import('app/app.js') to System.import('app/app') as default extensions of files is js, so I don't need to bother about it. So my component loading script changed to below.

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

这篇关于面对困难，而在Angular2依赖进口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！