I'm trying to import a custom component within my app.ts, but getting the error "TS2307: Cannot find module 'MyComponent'" I've looked it over, couldn't find anything that would help me.
Some people wrote: use "moduleResolution": "classic", but if I do that then I get the TS2307 error for everything else (all angular2/...) except MyComponent.
Others wrote "run tsc --declaration MyComponent.ts" - which does generate a MyComponent.d.ts file (while throwing errors in the console, like "Cannot compile unless the --module flag is provided" - which IS provided in tsconfig as an option - or "Cannot find module 'angular2/common'" for whatever I am importing in MyComponent.ts - but it does generate a .d.ts file), but when trying to compile app.ts it still gives the same TS2307 error. Nohting I've found worked.
This is my project structure:
| /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
|
This is my 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"
]
}
My 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 ]);
And here's my 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');
}
}
My app.ts and MyComponent.ts are both in the same folder. Anyway, I've also tried path like this: import { MyComponent } from "/app/resources/dev/ts/MyComponent". Also, I've tried adding it to the files array in tsconfig (some people wrote that I should do that)... Still... Nothing worked! I've also checked the js output, because some people wrote that even though it throws the error, it might still be compiled... No luck!
====================
EDIT:
Ok, as inoabrian suggests in the first comment... I thought I tried everything, but it seems I haven't tried "./MyComponent" for the import part.
import { MyComponent } from './MyComponent';
Now the transcompiler does it's job. Thank you inoabrian, but now I have another issue. When I try running in the browser, I check my console and both systemjs and angular2-pollyfills scream:
http://my-app/resources/dist/js/MyComponent 404 (Not Found)
respectively:
XHR error (404 Not Found) loading http://my-app/resources/dist/js/MyComponent(…)
Don't be thrown off by the path (when comparing to my project folder structure), I have my local server pointing at /app when I access http://my-app
This is my index.html with system config and all included js files:
<!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>
I have the feeling that I should do one more thing with the transcompiled file "MyComponent.js", but don't know what (I've tried to add it to System.import, hoping it would accept an array... but it seems it doesn't). What should I do next?
P.S. This is disappointing nevertheless, I hoped that importing MyComponent into app.ts would be everything, and that I would find the MyComponent class + everything from MyComponent.ts + my transcompiled app.ts file ALL IN ONE app.js file, not haveing yet another js file :(
