Angular2＆amp; typescript获取导入错误

Question

我开始基于角度2实现一个简单的组件，但是我遇到了问题tsconfig.json和import

这是我的结构

Root | node_modules | | | @angular | | | Core | platform-broswer-dynamic Script | Components | MyFirstComponent.ts MyFirstComponentService.ts

这是我的代码

＆＃13;

＆＃13;

import { bootstrap } from '@angular/platform-browser-dynamic'; // this line is ok 
import { Component } from '@angular/core';  // this line is ok 
import { FirstService } from 'Root/Script/Components/MyFirstComponentService'; // this line get error

@Component({
    selector: 'firstcomponent',
    template: '<div>My First Component</div>',
})
export class MyFirstComponent {
    constructor(public abc : FirstService)
    {
        console.log(abc.doSomething());
    }
}
bootstrap(MyFirstComponent, [FirstService]);

＆＃13;

＆＃13;

＆＃13;

但我在

得到错误

  

从＆lt;根/脚本/组件/ MyFirstComponent＆＃39;中导入{ABCService};

因为某些原因我不想使用import { ABCService } from ./MyFirstComponent';

我应该在tsconfig.json中使用哪个配置来使三个import工作？我曾尝试使用rootDir，但没有帮助

我使用VS2015，打字稿1.8.32

非常感谢你！

Answer 1

使用./MyFirstComponent代替完整路径..它可以正常使用

Answer 2

您无需指定完整路径，服务和组件都位于同一文件位置，因此您需要使用./，如下所示：

import { FirstService } from './MyFirstComponentService';

编辑：按照你的评论，我认为你问这个问题。假设您的Root内有另一个子文件夹，Components内有另一个子文件夹，所以您现在拥有此文件夹：

Root | node_modules | | | @angular | | | Core | platform-broswer-dynamic Script | Components | | | MyFirstComponent.ts | MyFirstComponentService.ts | | | navbar | | | navbar.component.ts | navbar.component.html | Shared | authservice.component.ts

如果您想从同一文件中访问navbar.component，请使用：

import { FirstService } from './navbar/navbar.component';

您需要从当前文件夹./指定，转到navbar文件夹，然后在那里获取组件。

现在，如果您想访问authservice.component，请执行以下操作：

import { FirstService } from '../Shared/authservice.component';

原因是Shared文件夹位于比您当前文件夹高一个文件夹的位置，这就是您使用../的原因，这主要是你是一个文件夹＆＃34;更高＆＃34;。

这能解释得更好吗？我刚刚添加随机＆＃34;常见＆＃34;组件。也可以考虑更改文件夹结构，并将文件夹/组件命名为小写。