Question

基本上我已经通过参考Angular2快速入门教程创建了一个示例应用程序。为了进一步挖掘，我创建了./services/dataService.ts服务文件，如下所示。

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

我在"outDir": "../wwwroot/app",中提及tsconfig选项，其中app.ts＆amp; dataService.ts以下路径。

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

代码编译时没有错误，但在应用程序之后我得到了低于错误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"
  ]
}

Answer 1

问题在于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));

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

1 个答案: