Angular2 组件中的 templateUrl 未加载 URL

Question

这是我的组件

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

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

我正在使用 AngularJS 2 和 TypeScript 1.8.5，并尝试创建将从 Controller Action 加载模板的组件。

我遇到了这个错误

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

我用home/home也试过了，报错也差不多

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

但是错误不是编译时错误 - 它会在加载页面和组件时在浏览器控制台中弹出

如您所见，我不想加载像 home.template.html 这样的静态模板 - 它工作正常。我想从 asp.net MVC Controller Action 加载一个 HTML 模板。我什至没有达到 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 {}

编辑：更多信息：

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
    }
}

应用是使用 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

所以，在似乎永恒之后，我终于弄清了真相。

问题出在使用 angular2-template-loader 的 webpack 中。该模块负责内联 html 模板。换句话说，它将在幕后对组件的模板标签执行要求（使用您的 templateUrl）。如果您使用实际的 URLs 作为 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:

Angular2 组件中的 templateUrl 未加载 URL

templateUrl in Angular2 Component not loading URL

asp.net-mvc

typescript

angular2-template

angular