Question

我已经开始使用我的第一个角应用程序。它在asp.net MVC应用程序中运行。

当我在index.html中编写<my-app></my-app>时，它没有显示该组件的模板。我该如何解决这个问题？

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

ngmudol：

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

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

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

Answer 1

我希望这个答案有问题。

Anuglar应用程序的最小结构包括：

app.module.ts - 应用程序模块（应用程序根模块）;
app.component.ts - 应用程序根组件
app.routes.ts - 应用程序基本路由（Angular router documentation）;
main.ts - 引导AppModule的地方;

//main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';

//Import the App component (root component)
import { App } from './app/app';

//Also import the app routes
import { APP_ROUTES_PROVIDER } from './app/app.routes';

bootstrap(App, [
  APP_ROUTES_PROVIDER,
])
.catch(err => console.error(err));

来源：示例nr 2。

<强>实施例：

Answer 2

在cshtml页面中添加脚本为我解决了此问题。

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_MakeBookingLayout.cshtml";
}

@section Scripts
    {
    <script src="~/clientapp/dist/runtime.js"></script>
    <script src="~/clientapp/dist/polyfills.js"></script>
    <script src="~/clientapp/dist/styles.js"></script>
    <script src="~/clientapp/dist/vendor.js"></script>
    <script src="~/clientapp/dist/main.js"></script>
    }

<app-root></app-root>

角度组件模板未在asp mvc + angular应用程序中显示

2 个答案: