Nie można zaimportować komponentu użytkownika - Angular2 i TypeScript

Question

Próbuję zaimportować komponent niestandardowy w mojej aplikacji.ts, ale pojawia się błąd "TS2307: Nie można znaleźć modułu" MyComponent "" Sprawdziłem to, nie mogłem znaleźć niczego, co by mi pomogło.

Niektórzy ludzie napisali: użyć "moduleResolution": "classic", ale jeśli to zrobię, otrzymam błąd TS2307 dla wszystkiego innego (wszystkie kątowe2/...) z wyjątkiem MyComponent.

Inni napisali "run tsc --declaration MyComponent.ts" - który generuje plik MyComponent.d.ts (podczas gdy wyrzucanie błędów w konsoli, np. "Nie można skompilować, chyba że podano flagę --module" - która IS jest dostarczany w tsconfig jako opcja - lub "Can not find module" angle2/common "" dla tego, co importuję w MyComponent.ts - ale generuje plik .d.ts), ale gdy próbuję skompilować app.ts to nadal daje ten sam błąd TS2307. Nohting, które znalazłem, działało.

To jest mój struktury projektu:

| /app 
|  /resources 
|   /dev 
|    /ts 
|     app.ts 
|     MyComponent.ts 
|   /dist 
|    /js 
|     app.js   // transcompiled app.ts 
|     MyComponent.js // transcompiled MyComponent.ts 
|    /modules   // files copied from the /node_modules/**/ folders (because node_modules is outside versioning and also outside public root (public root is the /app folder) 
|     es6-shim.js 
|     angular2-polyfills.js 
|     system.src.js 
|     Rx.js 
|     http.dev.js 
|     angular2.dev.js 
|  index.html 
| 
| /node_modules 
|  /angular2   // 2.0.0-beta.1 
|  /es6-promise   // 3.0.2 
|  /es6-shim   // 0.33.3 
|  /rxjs    // 5.0.0-beta.0 
|  /reflect-metadata // 0.1.2 
|  /systemjs   // 0.19.6 
|  /zone.js    // 0.5.10 
| 

To mój tsconfig.json:

{ 
    "compilerOptions": { 
     "target": "ES5", 
     "module": "system", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "removeComments": true, 
     "noImplicitAny": false, 
     "outDir": "app/resources/dist/js" 
    }, 
    "files": [ 
     "app/resources/dev/ts/app.ts" 
    ] 
} 

Moi app.ts:

import { bootstrap } from "angular2/platform/browser"; 
import { Component, View } from "angular2/core"; 
import { HTTP_PROVIDERS, Http, Response } from "angular2/http"; 

//My Custom Components: 
import { MyComponent } from 'MyComponent'; 

/** 
* APP 
*/ 
@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    directives: [MyComponent], 
    template: ` 
     <my-component></my-component> 
     plus other html 
    ` 
}) 
class MyApp { 
    public whatever; 

    constructor(public http: Http) { 
     // initialize this.whatever 
    } 

    makeRequest(): void { 
     this.http.request('/_http/response.json') 
      .subscribe((res:Response) => { 
       this.whatever = res.json(); 
      }); 
    } 
} 

bootstrap(MyApp, [ HTTP_PROVIDERS ]); 

A oto moja Mój Component.ts:

import { Component } from 'angular2/core'; 
import { NgFor, NgIf } from 'angular2/common'; 

@Component({ 
    selector: 'my-component', 
    template: ` 
     <div>MY IMPORTED COMPONENT</div> 
    ` 
}) 
export class MyComponent { 

    constructor() {} 

    doSomething(): void { 
     console.log('Doing something'); 
    } 
} 

Moi app.ts i MyComponent.ts są zarówno w tym samym folderze. Tak czy inaczej, wypróbowałem również taką ścieżkę: import {MyComponent} z "/ app/resources/dev/ts/MyComponent". Próbowałem też dodać go do tablicy plików w tsconfig (niektórzy ludzie napisali, że powinienem to zrobić) ... Wciąż ... Nic nie działało! Sprawdziłem również wyjście js, ponieważ niektórzy ludzie napisali, że mimo tego, że to powoduje błąd, nadal może być skompilowany ... Bez powodzenia!

====================

EDIT:

Ok, jak inoabrian sugeruje w pierwszym komentarzu ... Myślałem Próbowałam wszystko, ale wydaje się, że nie próbowałem "./MyComponent" dla części importu.

import { MyComponent } from './MyComponent'; 

Teraz transcompiler wykonuje swoją pracę. Dziękuję, Inoabrian, ale teraz mam inny problem. Kiedy próbuję działa w przeglądarce, mogę sprawdzić konsolę i oba systemjs i angular2-pollyfills krzyczeć:

http://my-app/resources/dist/js/MyComponent 404 (Not Found) 

odpowiednio:

XHR error (404 Not Found) loading http://my-app/resources/dist/js/MyComponent(…) 

Nie być wyrzucony przez ścieżkę (porównując do moja struktura folderów projektu), mam lokalny serwer wskazujący na/app, gdy uzyskuję dostęp do http://my-app

To jest mój indeks .html z konfiguracji systemu i wszystko wliczone js pliki:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!-- ... Meta tags & CSS assets --> 

    <script src="resources/dist/modules/es6-shim.js"></script> 
    <script src="resources/dist/modules/angular2-polyfills.js"></script> 
    <script src="resources/dist/modules/system.src.js"></script> 
    <script src="resources/dist/modules/Rx.js"></script> 
    <script src="resources/dist/modules/http.dev.js"></script> 
    <script src="resources/dist/modules/angular2.dev.js"></script> 
</head> 
<body> 
<script> 
    System.config({ 
     packages: { 
      app: { 
       format: 'register', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
    System.import('resources/dist/js/app.js') 
      .then(null, console.error.bind(console)); 
</script> 

<my-app></my-app> 

</body> 
</html> 

mam wrażenie, że muszę zrobić jeszcze jedną rzecz z transcompiled plik „MyComponent.js”, ale nie wiem co (Próbowałam dodać go do System.import, mając nadzieję, że zaakceptuje tablicę ... ale wygląda na to, że tak nie jest). Co powinienem zrobić dalej?

P.S. Jest to jednak niezadowalające, miałem nadzieję, że importowanie MyComponent do app.ts będzie wszystkim i że znajdę klasę MyComponent + wszystko z MyComponent.ts + mój skompresowany plik app.ts ALL IN ONE plik app.js, nie mający kolejny plik js :(

Answer 1

Wiem, że to już dawno, ale być może inni skorzystają z odpowiedzi. Zdałem sobie sprawę, co było ostatnim problemem (innym niż to, co już edytowałem w pierwotnym pytaniu). Tutaj jest: Wspomniałem, że mam niestandardową strukturę folderów i nie chciałem jej zmieniać. Gdybym to zrobił, zadziałałby po prostu podążając za 2 ostrym początkiem. Ale nie sprawiłoby mi to problemu w moim konkretnym przypadku i nie zrozumiałbym, jak działa System.js.

Problem był w moim System.config() - w sekcji pakietów. To zły kod:

System.config({ 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    } 
}); 
System.import('my/path/to/app_main_file'); 

Mój błąd myślał, że kluczem „aplikacja” jest po prostu kluczem generycznym, nadchodzi od słowa „wniosek”. Okazuje się, że w obiekcie pakietów każdy klucz faktycznie reprezentuje ścieżkę (gdzie ten pakiet - jego pliki - znajduje się w aplikacji).Zakładając więc, folder, w którym pliki są moi transpiled byłoby „my/app/publiczny” i „app_main_file” to główny plik js z mojego wniosku, to ja powinienem był rzeczywiście miał coś takiego:

System.config({ 
    packages: { 
     'my/app/public': { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    } 
}); 
System.import('my/app/public/app_main_file') 
    .then(null, console.error.bind(console)); 

albo, możesz napisać do sekcji config nawet ładniejszy, na przykład:

System.config({ 
    packages: { 
     'my-app': { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    }, 
    map: { 
     'my-app': 'my/app/public' 
    } 
}); 

Myślę, że to dość oczywiste, co „map” robi i jak go używać.

P.S. Wiem, że w mojej odpowiedzi nie podążałem za dokładnie taką samą strukturą folderów, jak w pierwotnym pytaniu, ale uważam, że rozsądniej jest to wyjaśnić. Jeśli to ma znaczenie, po prostu zamień "moje/app/public" powyżej na to, co pierwotnie miałem w pytaniu: "resources/dist/js /", i to jest to samo.

Answer 2

Co jest trochę dziwne jest to, że nie masz MyComponent.js w tym samym folderze niż app.js. w moim przypadku, kiedy dodać outDir w pliku tsconfig.json, wszystkie moje pliki są maszynopis . kompilowane do kodu JavaScript w tym folderze

Oto moja konfiguracja w moim pliku tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "app/resources/dist/js" 
}, 
    "exclude": [ 
    "node_modules" 
    ] 
} 

Uruchamiam fazę kompilacji za pomocą komendy: tsc -w.

Nadzieję, że to pomaga, Thierry

Answer 3

wierzę brakuje odpowiedniego parametru w konfiguracji systemu. dodać go tak:

System.config({ 
    defaultJSExtensions: true 
}) 

Answer 4

Dodaj .js rozszerzenie swojej importu modułu. Najprawdopodobniej wyrzuci błąd IDE. Ale gdy odświeżysz działa. To jest również problem, z którym miałem do czynienia. To działało wczoraj w pracy i dzisiaj spróbowałem innego przykładu w domu, dałoby to 404 błędy.

import {MyComponent} from 'MyComponent.js' 

Kolejny dylemat, który pracował dla mnie jest: miałem wszystkie pliki .TS w folderze głównym. Stworzyłem kolejną aplikację pod folderów i tam je przeniosłem. Od tego momentu mogłem się do nich odnieść bez rozszerzenia. Nie wiem, dlaczego nie działało w folderze głównym. Ale przeniesienie ich do innego folderu załatwiło sprawę. Mam nadzieję, że pomaga