Question

我有以下目录结构：

根
- 应用
  - app.module.ts
  - app.component.ts
  - app.component.html
  - test.component.ts
  - 服务
    - auth.service.ts
  - 测试
    - test.component.ts

使用以下文件：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//Modules/Components
import { AppComponent } from './app.component';

import { TestComponent } from './test.component';
import { AuthService } from './services/auth.service';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, TestComponent],
    bootstrap: [AppComponent],
    providers: [AuthService]
})
export class AppModule { }

app.component.ts

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

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html',
})
export class AppComponent {
}

app.component.html

<!DOCTYPE html>
<div style="display:table; height: 100%; width:100%">
    <div style="margin:10px; height:100%">
        <test></test>
    </div>
</div>

auth.service.ts

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

@Injectable()
export class AuthService {
    constructor() {
        console.log("Creating Auth Service");
    }
}

test.component.ts

import { Component, AfterViewInit, Inject } from '@angular/core';
import { AuthService } from './services/auth.service';

@Component({
    selector: 'test',
    template: '<div></div>'
})
export class TestComponent {
    constructor(private authService: AuthService) {
    }
}

此代码工作正常。但是如果我使用子文件夹TestComponent和此应用模块：

测试/ test.component.ts

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
    selector: 'test',
    template: '<div></div>'
})
export class TestComponent {
    constructor(private authService: AuthService) {
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//Modules/Components
import { AppComponent } from './app.component';

import { TestComponent } from './test/test.component';
import { AuthService } from './services/auth.service';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, TestComponent],
    bootstrap: [AppComponent],
    providers: [AuthService]
})
export class AppModule { }

我收到错误：

http://localhost:9893/app/app.component.html:4:8导致的错误：没有AuthService的提供者！

唯一的区别是服务导入的路径和测试组件的路径。我不明白为什么这应该使任何区别，但显然它打破了依赖注入器。如果重要，我将使用Visual Studio 2015与TypeScript 2.0和SystemJS（基于快速入门）。

为什么会这样，除了将所有文件放在同一个文件夹中之外我还能做些什么来修复它（看起来这种方法会很快失控）。

更新创建一个“app”子目录并将所有应用程序文件放入其中（因此每个文件使用相同的相对路径）确实允许嵌套的test.component.ts工作;所以至少我不需要同一目录中的所有内容。尽管如此，我仍然很高兴知道我做错了什么。

为什么在（子）目录中打破依赖注入？

0 个答案: