Angular 2 component relative path

Question

My systemjs.config.js file maps the "app" to a "dist" folder. So if I try to reference my component html file relatively, I would get the following error:

Failed to load https://localhost:44337/dist/appComponent.html

Do I have to use gulp to copy the html files to the "dist" folder as well? What other options do I have? Absolute path works perfectly fine.

My system.config.js file:

(function (global) {
System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        app: 'dist',
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

App.component file:

import {Component, OnInit} from "@angular/core";
import {Router} from "@angular/router";

@Component({
    moduleId: module.id,
    selector: "my-app",
    templateUrl: "appComponent.html"
})

Thanks in advance!

Answer 1

If you use external templates, and relative paths in templateUrl, then yes you should copy the html files and place them in dist folder.

A task to move all .html files within dev/ to your dist/ folder

gulp.task('move-html',function(){
    return gulp.src('dev/**/*.html')
               .pipe(gulp.dest('dist/'));
});

You have other options, such as using inline templates (writing the template within the component), or -- even better -- using gulp-inline-ng2-template plugin as a build task to import and inline the external templates for you. This way, fetching the template will not require an additional http request.