Component relative path not working. Angular 2

Question

My configurations are below I wanted to use relative-path for the component. But it's giving me this error:

404 GET /js/some.component.html

I am using SystemJS.

some.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
    moduleId: module.id,
    selector: 'relative-path',
    templateUrl: 'some.component.html',
    styleUrls: ['some.component.css'],

})

export class SomeRelativeComponent {
}

app.component.ts

import { Component } from '@angular/core';
import { SomeRelativeComponent } from './some.component';
@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
  <relative-path></relative-path>
  `,
  directives: [SomeRelativeComponent]
})
export class AppComponent { }

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "./js"
  }
}

Folder Structure:

Clearly there is no some.component.html in the /js directory. But how to save it there, as I add up my components in /app directory?

Answer 1

In your ts.config.json, you specify the outdir, where the .js are exported.

Either you need to modify your outdir, or you can also use a tool such as Gulp which allows you to manipulate your files as streams. You can then define tasks that allow you to move, concat, minify, etc. your .css / .js files where you want.

package.json

"devDependencies": {
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "gulp": "^3.9.1",
    "path": "^0.12.7",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-typescript": "^2.13.1",
    "gulp-tsc": "^1.1.5",
    "run-sequence": "^1.2.2"
}

You need to add gulp dependencies in your package.json, and install it with npm : https://www.npmjs.com/package/gulp

Then in a single gulpfile.cs you have in your project solution, you can defines tasks and even do pre-compilation with watchers, which I find very useful.

For example, since you use TypeScript,

gulpfile.js

var destPathComponents = './wwwroot/app/';

var tsProject = ts.createProject('tsconfig.json');
gulp.task('Components_JS', function () {
    var tsResult = tsProject.src() // instead of gulp.src(...)
        .pipe(ts(tsProject));

    return tsResult.js.pipe(gulp.dest(destPathComponents));
});

NB :I'm not really sure about this point, but I remember that using the tsconfig.json with gulp like this you actually use the outDir value of the tsconfig.json file instead of the path you set in the gulpfile.js

I really recommend using Gulp though.

Here is another example to use gulp with simple CSS :

gulp.task('Components_HTML', function () {
    return gulp.src([
        '*.html'
    ], {
        cwd: "Sources/**"
    })
        .pipe(gulp.dest(destPathComponents));
});

Basically, this defines a gulp task nammed "Components_HTML" and will take all HTML files and copy them to the destination path which is './wwwroot/app/' in my case. Hope this helps.