无法导入自定义组件 – Angular2和TypeScript

我正在尝试在我的app.ts中导入一个自定义组件,但得到错误“TS2307：找不到模块’MyComponent’”我看了一遍,找不到任何可以帮助我的东西.

有些人写道：使用“moduleResolution”：“经典”,但如果我这样做,那么除了MyComponent之外,其他所有内容(所有angular2 / …)都会出现TS2307错误.

其他人写了“run tsc –declaration MyComponent.ts” – 它会生成一个MyComponent.d.ts文件(同时在控制台中抛出错误,比如“除非提供了–module标志,否则无法编译”) – 这是在tsconfig中提供的作为一个选项 – 或者“无法找到模块’angular2 / common’”,无论我在MyComponent.ts中导入什么 – 但它确实生成.d.ts文件),但在尝试编译app.ts时它仍然提供相同的TS2307错误. Nohting我找到了工作.

这是我的项目结构：

| /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都在同一个文件夹中.无论如何,我也试过这样的路径：从“/ app / resources / dev / ts / MyComponent”导入{MyComponent}.
另外,我已经尝试将它添加到tsconfig中的文件数组中(有些人写道我应该这样做)……还是……没有用！我也检查了js输出,因为有些人写道,即使它抛出错误,它仍然可能被编译…没有运气！

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

编辑：

好吧,正如inoabrian在第一条评论中建议的……我以为我尝试了一切,但似乎我没有为导入部分试过“./MyComponent”.

import { MyComponent } from './MyComponent';

现在,转编译器完成了它的工作.谢谢inoabrian,但现在我有另一个问题.当我尝试在浏览器中运行时,我检查我的控制台,并且systemjs和angular2-pollyfills都尖叫：

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

分别：

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

不要被路径抛弃(与我的项目文件夹结构比较),当我访问http://my-app时,我的本地服务器指向/ 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,希望它能接受一个数组……但是它似乎没有).接下来我该怎么办？

附：尽管如此,这是令人失望的,我希望将MyComponent导入app.ts将是一切,并且我会从MyComponent.ts找到MyComponent类,我的转换后的app.ts文件ALL IN ONE app.js文件,而不是另外一个js档案:(

我知道它已经姗姗来迟,但也许其他人可能从答案中受益.
我确实意识到最后的问题是什么(除了我在原始问题中编辑过的内容).这里是：
我确实提到我有一个自定义文件夹结构,并不愿意改变它.如果我有,它只需遵循角度2快速启动即可.但它不会让我意识到在我的具体情况下的问题,我不会理解System.js如何工作.

问题出在我的System.config()中 – 在packages部分.
这是糟糕的代码：

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

我的错误是认为关键的“app”只是一个通用密钥,来自“应用程序”这个词.事实证明,在packages对象中,每个键实际上代表一个路径(该包的位置 – 它的文件 – 驻留在您的应用程序中).因此,假设我的转换文件所在的文件夹是“my / app / public”,而“app_main_file”是我的应用程序的主要js文件,那么我应该实际上有这样的事情：

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

或者,您可以更好地编写配置部分,如下所示：

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

我认为“地图”的作用以及如何使用它是非常不言自明的.

附：我知道在我的回答中我并没有遵循与原始问题完全相同的文件夹结构,但我认为这样解释它更有意义.如果重要的话,只需将上面的“my / app / public”替换为我原来在问题中的内容：“resources / dist / js /”,它就是一样的.

无法导入自定义组件 – Angular2和TypeScript

相关文章