我正在尝试在我的 app.ts 中导入自定义组件，但出现错误“TS2307:找不到模块‘MyComponent’”我已经查看过了，找不到任何对我有帮助的东西。
有些人写道:使用 "moduleResolution": "classic"，但如果我这样做，除了 MyComponent 之外的所有其他内容(所有 angular2/...)都会出现 TS2307 错误。 p>
其他人写了“run 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 都在同一个文件夹中。无论如何，我也试过这样的路径:从“/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，希望它能接受一个数组。 ..但似乎没有)。接下来我该做什么？
P.S. 尽管如此，这还是令人失望，我希望将 MyComponent 导入到 app.ts 中就是一切，并且我会找到 MyComponent 类 + 来自 MyComponent.ts 的所有内容 + 我的转译后的 app.ts 文件全部在一个 app.js 文件中，没有另一个 js 文件:(
最佳答案
我知道它早就应该了，但也许其他人可能会从答案中受益。 我确实意识到最终的问题是什么(除了我已经在原始问题中编辑过的内容)。这里是: 我确实提到我有一个自定义文件夹结构并且不愿意更改它。如果我有，它会通过简单地遵循 angular 2 quickstart 来工作。但它不会让我意识到我的具体情况下的问题，我也不会理解 System.js 是如何工作的。
问题出在我的 System.config() - 在包部分。 这是错误的代码:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('my/path/to/app_main_file');
我的错误是认为键“app”只是一个通用键，来自“application”一词。事实证明，在 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'
}
});
我认为“ map ”的作用以及如何使用它是不言自明的。
附言我知道在我的回答中我没有遵循与原始问题完全相同的文件夹结构，但我认为这样解释更有意义。如果重要，只需将上面的“my/app/public”替换为我最初在问题中的内容:“resources/dist/js/”，它们是一样的。
关于typescript - 无法导入自定义组件 - Angular2 和 TypeScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34878830/