templateUrl в Angular2 компонента не загружается URL

Question

это мой компонент

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'homeView', 
    templateUrl: '/home/home' 
}) 
export class HomeViewComponent implements OnInit { 
    ngOnInit(): void {} 
} 

Я использую AngularJS 2 с машинопись 1.8.5 и при попытке создать компонент, который будет загружать шаблон из контроллера действий.

Я получаю эту ошибку

main.bundle.js:667 Uncaught Error: Cannot find module ".//home/home" 

Я также попробовал это дома/дома, ошибка почти такой же

main.bundle.js:667 Uncaught Error: Cannot find module "./home/home" 

• Ошибка не ошибка компиляции времени, однако - он хлопает в консоли браузера, когда страница и компонент загружаются

Так как лет u может видеть, что я не хочу загружать статический шаблон, например home.template.html, который работает правильно. Я хочу загрузить шаблон HTML из asp.net MVC Controller Action. Я даже не попал в точку отладки в действии HomeController Home.

Есть ли способ сделать эту работу? Кажется, что Angular продолжает вставлять этот знак «./». Есть ли способ настроить это? Я прочитал несколько руководств по angular2 + mvc, и кажется, что это должно быть возможно, но по какой-то причине оно не работает для меня.

Мои 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: Некоторые больше информации:

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 построен с использованием 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

Итак, после того, что казалось вечностью, я, наконец, получил дно этого.

Проблема была в webpack, используя angular2-template-loader. Этот модуль отвечает за встраивание html-шаблона. Другими словами, он потребует (используя ваш templateUrl) за кулисами тэга шаблона вашего компонента. Это, разумеется, нарушает функциональность, если вы используете фактические URL-адреса как templateUrl, а не PATH, поэтому шаблона там нет.

Основываясь на том, что я читал, похоже, авторы не поддержат это в будущем.(Если шаблон не найден -> попытаться загрузить его из URL)

Больше информации здесь - https://github.com/angular/angular-cli/issues/1605

Таким образом, в основном я только удалил этот компонент из конфигурационного файла: webpack.config.js

ПЕРЕД

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
     }, 
     { 
      test: /\.css$/, 
      loader: 

ПОСЛЕ

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: ['awesome-typescript-loader'] 
     }, 
     { 
      test: /\.css$/, 
      loader: