Question

TL; DR - ＆gt;为什么引用服务直接起作用，但通过存储桶文件引用会导致＆＃34;未定义＆＃34;错误？

当我尝试注入通过＆＃34;桶＆＃34;引用的服务时，我收到以下错误index.ts文件。

platform-browser.umd.js:2311 EXCEPTION: TypeError: Cannot read property 'parameters' of undefined

该项目非常庞大，但我已将场景简化为产生给定错误的内容。这再现了我是通过子组件引用服务还是foo.component - 我在调试期间首先用子组件命中它。

文件夹结构如下：

-/app
|-/foo
||-/foo-A
|||-/foo-A.component.ts
|||-/index.ts
||-/foo.component.ts
||-/foo.service.ts
||-/index.ts
|-/app.component.ts
|-/main.ts

服务使用@Injectable：

// foo.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

@Injectable()
export class FooService{
  constructor(private http: Http) { }
}

通过桶app/foo/index.ts文件公开服务：

export * from './foo.service'
export * from './foo.component'

组件（FooA）通过index.ts文件

引用

// foo-A.component.ts - **broken**
import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/common';

import { FooService } from '../index'

@Component({
    selector: 'foo-a',
    moduleId: module.id,
    templateUrl: 'foo-a.component.html',
    providers: [FooService]
})

export class FooAComponent {

    constructor(private fooService: FooService) {}

}

这是在我根据样式指南重构了一堆代码之后，从非常扁平的结构到带有桶文件的稍微更多的分组结构。我最初一次完成所有操作并得到了这个错误，无法弄清楚由于错误消息过时而破坏了什么，并且单步执行代码并不是非常富有成效，尽管它看起来确实来自于此文件。然后我逐行逐个文件地逐行完成，直到出现此错误。

有趣的是，如果我直接引用该文件，它就可以工作：

// foo-A.component.ts - **works**
import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/common';

import { FooService } from '../foo.service'

@Component({
    selector: 'foo-a',
    moduleId: module.id,
    templateUrl: 'foo-a.component.html',
    providers: [FooService]
})

export class FooAComponent {

    constructor(private fooService: FooService) {}

}

System.config.js：

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ng2-ace':                    'node_modules/ng2-ace'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ng2-ace':                    { main: 'index.js', defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

为什么直接引用服务有效，但通过存储桶文件引用会导致＆＃34;未定义＆＃34;错误？

间接引用时找不到服务，直接引用时工作 - Angular2

0 个答案: