Angular2组件中的templateUrl未加载URL

时间:2016-10-21 15:03:11

标签: asp.net-mvc angular typescript angular2-template

这是我的组件

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

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

我正在使用带有TypeScript 1.8.5的AngularJS 2并尝试创建将从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
    }
}

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));

1 个答案:

答案 0 :(得分:1)

所以,在看似永恒之后,我终于明白了这一点。

问题出在使用 angular2-template-loader 的webpack中。 该模块负责内联html模板。换句话说,它将在组件的模板标签后面的幕后执行require(使用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: