Я пытаюсь импортировать пользовательский компонент в свой app.ts, но получаю сообщение об ошибке "TS2307: не удается найти модуль "MyComponent"". Помоги мне.

Некоторые писали: используйте "moduleResolution": "classic", но если я это сделаю, то получу ошибку TS2307 для всего остального (все angular2/...), кроме MyComponent.

Другие написали «запустить tsc --declaration MyComponent.ts», который генерирует файл MyComponent.d.ts (при этом выдавая ошибки в консоли, такие как «Невозможно скомпилировать, если не указан флаг --module» - который предоставляется в tsconfig как вариант - или «Не удается найти модуль 'angular2/common'» для всего, что я импортирую в MyComponent.ts, но он создает файл .d.ts), но при попытке скомпилировать app.ts он все еще дает то же самое Ошибка TS2307. Ничего из того, что я нашел, не сработало.

Это моя структура проекта:

| /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
| 

Это мой 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"
    ]
}

Мой 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 ]);

А вот мой MyComponent.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');
    }
}

Мои файлы app.ts и MyComponent.ts находятся в одной папке. Во всяком случае, я также пробовал такой путь: импортировать {MyComponent} из "/app/resources/dev/ts/MyComponent". Кроме того, я пытался добавить его в массив файлов в tsconfig (некоторые люди писали, что я должен это сделать)... Тем не менее... Ничего не получилось! Я также проверил вывод js, потому что некоторые люди писали, что даже если он выдает ошибку, он все еще может быть скомпилирован... Не повезло!

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

РЕДАКТИРОВАТЬ:

Хорошо, как предлагает inoabrian в первом комментарии ... Я думал, что перепробовал все, но, похоже, я не пробовал «./MyComponent» для части импорта.

import { MyComponent } from './MyComponent';

Теперь транскомпилятор делает свою работу. Спасибо, inoabrian, но теперь у меня другая проблема. Когда я пытаюсь запустить в браузере, я проверяю свою консоль, и оба systemjs и angular2-polyfills кричат:

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

соответственно:

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

Не сбивайтесь с пути (при сравнении со структурой папок моего проекта), мой локальный сервер указывает на /app, когда я обращаюсь к http://my-app

Это мой index.html с конфигурацией системы и всеми включенными файлами js:

<!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>

У меня есть ощущение, что я должен сделать еще одну вещь с транскомпилированным файлом "MyComponent.js", но не знаю, что (я пытался добавить его в System.import, надеясь, что он примет массив... но вроде нет). Что я должен делать дальше?

P.S. Тем не менее это разочаровывает, я надеялся, что импорт MyComponent в app.ts будет всем, и что я найду класс MyComponent + все из MyComponent.ts + мой транскомпилированный файл app.ts ВСЕ В ОДНОМ app.js, не имея еще одного файла js :(