我試圖導入我的app.ts中的自定義組件，但得到錯誤「TS2307：找不到模塊'MyComponent'」我已經看過它，找不到任何幫助我的東西。無法導入自定義組件 - Angular2和TypeScript
有人寫道：使用「moduleResolution」：「經典」，但如果我這樣做，那麼我得到的一切（所有angular2/...），除了爲MyComponent的TS2307錯誤。
其他人寫了「run tsc --declaration MyComponent.ts」 - 它會生成一個MyComponent.d.ts文件（同時在控制檯中引發錯誤，比如「除非提供了--module標誌，否則無法編譯」 - IS在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 ]);
這是我的我的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');
}
}
我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(…)
不要路徑（當比較揭去我的項目文件夾結構），當我訪問時我有本地服務器指向/ app http://my-app
這是我的索引。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>
我有我應該做的一件事與transcompiled文件「MyComponent.js」，但不知道什麼（我試過的感覺將其添加到System.import，希望它會接受一個數組......但它似乎沒有）。接下來我應該做什麼？
P.S.然而，這是令人失望的，我希望導入MyComponent到app.ts將是一切，並且我會找到MyComponent類+從MyComponent.ts +我的經過編譯的app.ts文件中的所有內容ALL IN ONE app.js文件，沒有另一個js文件:(
你是否已將導入位置更改爲'./MyComponent'？ – inoabrian
我以爲我已經嘗試了一切，但似乎我沒有。它與「./MyComponent」一起工作......但現在事情引發了另一個問題，我編輯了我的問題，並在「編輯：」 – MrCroft
之後在最後添加了該問題。現在，這部分似乎是您的服務器的目錄問題。 當您有嵌套的開發和dist的目錄時，可能會發生這種情況。 所以你可以發佈你的服務器端代碼的樣子..？ 我跑斷精簡版服務器 的，我通過設置一系列送達我的目錄 [ ] – inoabrian