When developing Angular 2 applications, I often run into an issue with my tsconfig.json file. In this file, I have set the parameter as follows:
"outDir": "dist"
This configuration instructs the TypeScript-to-JavaScript compiler to save the compiled files in a directory called dist.
The issue arises when I work with components that have external template or CSS files and use component-relative paths, as shown below:
@Component({
moduleId: module.id,
selector: 'my-cmp',
templateUrl: 'my.component.html',
styleUrls: ['my.component.css']
})
export class MyComponent { }
When the browser tries to load the .html and .css files, it looks for them in the same folder as the transpiled JavaScript file under dist. However, these files are actually located in the original folder where the TypeScript file exists.
So, how can I resolve this issue?
Just to note, the problem is resolved if I remove moduleId: module.id and use absolute paths like app/my-cmp/my.component.html. But that's not the solution I prefer. ;-)