templateUrl中角度为4的相对URL且帆不起作用

Question

In my app.component.ts I have to define the templateUrl as this:

import {Component} from '@angular/core';
@Component({
  selector: 'root-component',
  templateUrl: './app/app.component.html'
})
export class AppComponent { }

If I define it simply as ./app.component.html it gives this error in console:

So basically this means that the app.component.html is accebile from http://localhost:1337/app/app.component.html because my sailsroot/asset folder structure is like this:

It would be very inconvenient to write templateUrls this way because for example in the sidebar component inside asset/app/sidebar folder the templateUrl would be written like: ./app/sidebar/sidebar.component.html

I would like the relative urls in templateUrl to be resolved properly and I am not sure how to do that.

If it helps, I am following this tutorial. (all my tsconfig.json, package.json etc.. are same as given here).

Answer 1

You can try to add moduleId to the decorator like this :

@Component({
  moduleId: module.id,
  selector: 'root-component',
  templateUrl: './app/app.component.html'
})

However, according to angular.io change log, you should use relative path and you don't have to use moduleId, so I'm surprised your code doesn't work.

All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)

We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.

Source : https://angular.io/docs/ts/latest/guide/change-log.html