templateUrl does not work - node.js

Question

I'm trying to make angular2-material app
It works when I template: ~ but If I use templateUrl: ~, <my-app> contains nothing even Loading... and a Network log Informed me the template successfully loaded 200 GET /app/mainLayout.html
Basically, I followed quick start guide of angular2 docs and these are what I did
installing angular2-materialize by npm
import "angular2-materialize" in main.ts
add System.config in index.html
index.html
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.config({
defaultJSExtensions: true,
packages: {
"materialize-css": {
"main": "dist/js/materialize"
},
"materialize": {
"main": "dist/materialize-directive",
"defaultExtension": "js"
}
},
map: {
"materialize-css": "node-modules/materialize-css",
"materialize": "node_modules/angular2-materialize",
"angular2-materialize": "node_modules/angular2-materialize"
}
});
System.import('app').catch(function(err){ console.error(err); });
</script>
add MaterializeDirective in app.component.ts
app.component.ts
import { Component } from '#angular/core';
import { MaterializeDirective } from 'angular2-materialize';
#Component({
selector: 'my-app',
directives: [MaterializeDirective],
templateUrl: 'app/views/mainLayout.html',
styleUrls: ['/app/css/mainLayout.css']
})
export class AppComponent { }
This is my working dir
|
|-app
| |-css
| | |-mainLayout.css
| |-views
| | |-mainLayout.html
| |
| |-app.component.ts
| |-main.ts
|
|-node_modules
| |-(....)
|-typings
| |-globals
| | |-(...)
| |-index.d.ts
|-package.json
|-systemjs.config.js
|-tsconfig.json
|-typings.json
one more thing. I think --regardless of template: statement-- it seems some path are setted wrong. *.js files are loaded successfully but *.map files are not.
[1] 16.06.21 20:17:15 200 GET /node_modules/rxjs/Subject.js
[1] 16.06.21 20:17:15 404 GET /node_modules/systemjs/dist/Subject.js.map
like this

Answer 1

Try
#Component({
selector: 'my-app',
directives: [MaterializeDirective],
templateUrl: './app/views/mainLayout.html',
styleUrls: ['/app/css/mainLayout.css']
})
The key difference being './app/. This makes Angular look for the "mainLayout.html" in the current root /app/views/.

Answer 2

Although I don't know what happend, I resolved the problem somehow. Few more restarting npm and app/views/mainLayout.html were solution. but the angular2 still find .map in wrong path. Please let me know why it happen if there are someone who have a idea.