在asp mvc中使用Angular 2时找不到模板

时间:2017-03-10 20:19:23

标签: asp.net-mvc angular typescript

我在ASP.NET MVC中使用angular 2。

这是"其他"成分:

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

@Component({
    selector: 'other-app',
    templateUrl: './app/other/other.component'
})
export class OtherComponent {
    name = "kianoush";
}

这是我的app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { OtherComponent } from './other/other.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [
        AppComponent,
        OtherComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

和这个app.component:

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

@Component({
    selector: 'my-app',
    template: `<h1>My Name is {{name}}</h1>
    <other-app></other-app>`
})
export class AppComponent {

    name = "Kianoush";
}

这是我项目的文件夹:

Folders

但是当我运行项目时,它会在控制台中显示错误:

  

http://localhost:xxxx/Home/app/other/other.component未找到404

这是HTML:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<base href="/">
<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

1 个答案:

答案 0 :(得分:0)

是wwwroot中的模板吗?

您无法访问文件系统的任何部分,这是设计使然。如果您只想通过请求URL来提供模板,请将其放在wwwroot中的正确位置。

如果您想通过MVC的控制器系统发回模板,您需要确保路线

  

http://localhost:xxxx/Home/app/other/other.component

有一个关联的控制器方法来处理它。这应该是一个视图控制器方法,它返回模板的视图。