为什么我的文件app.component.html无法正常工作? [英] Why my file app.component.html is not working?
问题描述
我的基本角度应用程序未显示app.component.html内容，始终具有索引html的内容.
My basic angular app is not displaying the app.component.html content, always I have the content of index 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>
结果:
我在ASP.NET CORE 1.1应用程序中使用了angular 6.
I'm using angular 6 with an ASP.NET CORE 1.1 application.
推荐答案
app.component.html不是您网页的根目录，而是您的角度应用程序的根目录. index.html是<html>标签应位于的唯一位置. index.html包含<my-app></my-app>标记，它是您的角度应用程序的根.
app.component.html isn't the root of your web page, it's the root of your angular app. index.html is the only place where your <html> tag should be. index.html contains the <my-app></my-app> tag that is the root of your angular app.
如果将<html></html>放在angular.component.html中，则在运行"ng start"后将Angular应用放入index.html时，编译后的网页将如下所示:
If you put <html></html> in your angular.component.html, when your angular app is put into index.html after running 'ng start' your compiled web page will look something like this:
<html> <!-- from index.html -->
...
<my-app>
<html> <!-- from app.component.html -->
...
</html>
</my-app>
</html>
，并且您的网页中不能包含两个<html>根元素.
and your webpage can't have two <html> root elements in it.
要使您的示例正常工作，请从app.component.html中删除以下标记:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> and <body>
To get your example working take the following tags out of app.component.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> and <body>
这篇关于为什么我的文件app.component.html无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
