为什么我的文件app.component.html无法正常工作?

时间:2018-09-21 14:06:02

标签: angular angular6

我的基本角度应用程序未显示app.component.html内容,始终具有索引html的内容。

索引HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 6</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <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/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
      <my-app></my-app>
  </body>
</html>

应用程序组件ts:

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

@Component({
  selector: 'my-app',
    templateUrl: 'wwwroot/app.component.html'
})
export class AppComponent { title = 'My First Angular App!'; }

应用程序模块ts:

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

应用程序组件html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
   abc
    
</body>
</html>

结果:

enter image description here

enter image description here

我在ASP.NET CORE 1.1应用程序中使用了angular 6。

2 个答案:

答案 0 :(得分:1)

app.component.html不是您的网页的根目录,而是您的角度应用程序的根目录。 index.html是<html>标签应位于的唯一位置。 index.html包含<my-app></my-app>标记,它是您的角度应用程序的根。

如果将<html></html>放在angular.component.html中,则在运行“ ng start”后将Angular应用放入index.html时,编译后的网页将如下所示:

<html> <!-- from index.html -->
   ...
   <my-app>
      <html> <!-- from app.component.html -->
         ...
      </html>
   </my-app>
</html>

,并且您的网页中不能包含两个<html>根元素。

要使您的示例正常工作,请从app.component.html中删除以下标记:
   <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> and <body>

答案 1 :(得分:0)

由于<!DOCTYPE html> <html> <head> <body>中的html插入了index.html标签所在的位置,因此在component.html之外不需要<my-app></my-app>标签。

使用component.html内容,结果页面将是:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 6</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <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/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8" />
          <title></title>
      </head>
      <body>
         abc

      </body>
      </html>

  </body>
</html>

因此无效,因为您将有两个这样的标签:<!DOCTYPE html> <html> <head> <body>