templateUrl in Angular2 Component not loading URL - asp.net-mvc

Question

this is my Component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'homeView',
templateUrl: '/home/home'
})
export class HomeViewComponent implements OnInit {
ngOnInit(): void {}
}
I am using AngularJS 2 with TypeScript 1.8.5 and trying to create component that will load template from Controller Action.
I am getting this error
main.bundle.js:667 Uncaught Error: Cannot find module ".//home/home"
I also tried it with home/home, the error is almost the same
main.bundle.js:667 Uncaught Error: Cannot find module "./home/home"
Error is not compile time error however - it pops up in browser console when page and the component is being loaded
So as you can see i dont want to load static template like home.template.html - that is working correctly. I want to load an HTML template from asp.net MVC Controller Action. I am not even hitting the debug point in the HomeController Home action.
Is there any way to make this work ? Seems like Angular keeps inserting this './' sign. Is there a way to configure this ? I ve read several tutorials on angular2 + mvc and it seems that this should be possible, but for some reason its not working for me.
My app.routes.ts
import {Routes} from "#angular/router";
import {MainViewComponent} from "../views/main-view/main-view.component";
import {MinorViewComponent} from "../views/minor-view/minor-view.component";
import {HomeViewComponent} from "../views/home-view/home-view.component";
export const ROUTES:Routes = [
// Main redirect
{ path: '', redirectTo: 'mainView', pathMatch: 'full'},
// App views
{path: 'mainView', component: MainViewComponent},
{path: 'minorView', component: MinorViewComponent},
{path: 'homeView', component: HomeViewComponent}
// Handle all other routes
//{path: '**', component: MainViewComponent }
];
app.module.ts
#NgModule({
declarations: [AppComponent],
imports : [
// Angular modules
BrowserModule,
HttpModule,
// Views
MainViewModule,
MinorViewModule,
// Modules
NavigationModule,
FooterModule,
TopnavbarModule,
RouterModule.forRoot(Approutes.ROUTES)
],
providers : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap : [AppComponent]
})
export class AppModule {}
EDIT : Some more info :
packages.json
{
"name": "inspinia_angular2_starter",
"version": "1.0.0",
"description": "Inspinia Admin Theme",
"repository": "https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S",
"scripts": {
"typings-install": "typings install",
"postinstall": "npm run typings-install",
"build": "webpack --inline --colors --progress --display-error-details --display-cached",
"server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src",
"start": "npm run server"
},
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"animate.css": "3.1.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.6.1",
"ie-shim": "^0.1.0",
"jquery": "^3.1.0",
"metismenu": "^2.5.0",
"pace": "0.0.4",
"pace-progress": "^1.0.2",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"typings": "^1.3.2",
"zone.js": "^0.6.23"
},
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^1.1.1",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"imports-loader": "^0.6.5",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"typescript": "~1.8.5",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"webpack-merge": "^0.8.4"
}
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"outDir": "dist",
"rootDir": ".",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"bower_components"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
App is built using webpack
main.browser.ts
import {platformBrowserDynamic} from "#angular/platform-browser-dynamic";
import {AppModule} from "../src/app/app.module";
/*
* Bootstrap Angular app with a top level NgModule
*/
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

Answer 1

So, after what seemed like an eternity I finally got the the bottom of this.
The problem was in webpack using angular2-template-loader.
This module is responsible for inlining html template. In other words, it will do a require (using your templateUrl) behind the scenes on the template tag of your component. This, of course, breaks the functionality if you are using actual URLs as templateUrl and not PATHs, therefore the template is not there.
Based on what i read, it seems like the authors wont support this in the future. (If template is not found -> try to load it from URL)
More info here - https://github.com/angular/angular-cli/issues/1605
So, basically I just removed this component from config file :
webpack.config.js
BEFORE
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.css$/,
loader:
AFTER
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader']
},
{
test: /\.css$/,
loader: