2016-07-12 10 views
0

Ich beginne eine einfache Komponente Winkel 2 basierend auf zu implementieren, aber ich bekomme ein Problem tsconfig.json und importAngular2 & Typoskript get Fehler mit dem Import

Hier ist meine Struktur

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

Hier mein Code

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

aber ich bekomme Fehler bei

Import {ABCService} von 'Root/Script/Komponenten/MyFirstComponent';

Da einiger Grund, warum ich will nicht import { ABCService } from ./MyFirstComponent';

verwenden, was config-i in tsconfig.json verwenden sollte drei import Arbeit zu machen? Ich habe versucht, mit rootDir, aber es hilft nicht

Ich verwende VS2015, Typoskript 1.8.32

Dank you very much!

Antwort

0

Sie müssen nicht gut funktionieren den vollständigen Pfad angeben, der Service und die Komponente sind beide in der gleichen Dateipfad so werden Sie verwenden müssen ./ wie so:

import { FirstService } from './MyFirstComponentService'; 

EDIT: gehen von Ihrem Kommentar, ich glaube, Sie dies zu fragen. Angenommen, Sie haben einen anderen Unterordner in Ihrem Root, und einen anderen Unterordner in Ihrem Components, so können Sie dies jetzt haben:

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

, wenn Sie die die navbar.component aus dem Inneren der gleichen Datei zugreifen wollten, würden Sie verwenden :

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

würden Sie, dass ./, gehen Sie auf die navbar Ordner, dann bekommen Sie die Komponente dort aus dem aktuellen Ordner angeben würde.

Nun, wenn Sie die authservice.component zugreifen wollen, würden Sie wie folgt vor:

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

Der Grund dafür ist, dass die Shared Ordner einen Ordner höher als die aktuellen Ordner sind Sie befinden, das ist warum würden Sie ../ verwenden, das im Wesentlichen Sie einen Ordner "höher".

Erklärt das besser? Ich habe nur zufällige "gemeinsame" Komponenten hinzugefügt. Vielleicht sollten Sie auch Ihre Ordnerstruktur ändern und Ihren Ordner/Ihre Komponenten nur als Kleinbuchstaben benennen.

+0

Aber aus irgendwelchen Gründen möchte ich 'Import {ABCService} von./MyFirstComponent' nicht verwenden, was ich brauche, ist der vollständige Pfad. Hast du eine Lösung dafür? danke dir – Trada

+0

@Trada Ich aktualisierte meine Antwort, ist das, was du verstehst zu verstehen? –

0

Verwendung ./MyFirstComponent anstelle des vollständigen Pfad .. es mit diesem

+0

Aber aus irgendwelchen Gründen möchte ich 'Import {ABCService} nicht verwenden./ MyFirstComponent', was ich brauche, ist der vollständige Pfad. Hast du eine Lösung dafür? Danke dir – Trada

Verwandte Themen