typescript <app-root> 没有被填满
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46754768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<app-root> is not getting filled
提问by fusionlightcat
I am a beginner with Angular 2 and have started with a small project consisting of these files:
我是 Angular 2 的初学者，从一个包含以下文件的小项目开始：
app.module.ts
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MaterialModule } from './material/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MaterialModule,
BrowserAnimationsModule,
AppComponent,
NgModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.component.ts
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'App Title';
}
app.component.html
应用程序组件.html
<span>Welcome to {{title}}</span>
Also, my index.htmllooks like this:
另外，我的index.html看起来像这样：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
The problem I am experiencing is that even though everything compiles fine, the <app-root>tag stays empty in the resulting page and my template HTML is not getting added. I've tested if it is a problem with template loading by altering the template URL, but it fails to find my template file and compilation fails. This means that this can't be the problem.
我遇到的问题是，即使一切都编译正常，<app-root>结果页面中的标记仍为空，并且我的模板 HTML 没有被添加。我已经通过更改模板 URL 测试了模板加载是否有问题，但它无法找到我的模板文件并且编译失败。这意味着这不是问题。
Is there anything I am missing here?
有什么我在这里想念的吗？
回答by cyr_x
You've added the NgModuledecorator and the AppComponentclass to the importssection of your module, which is wrong. Remove the NgModuledecorator from your importssection. Also remove the AppComponentfrom the importsof your module.
您已将NgModule装饰器和AppComponent类添加到imports模块的部分，这是错误的。NgModule从您的imports部分中删除装饰器。还要AppComponent从imports您的模块中删除。
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MaterialModule,
BrowserAnimationsModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
The importsattribute should only contain classes which are decorated with NgModule.
该imports属性应该只包含用 修饰的类NgModule。
回答by user1562431
So I ran into this issue when I did an ng build --prod and tried to serve it using a python -m http.server. This issue looks like what I was gettingThe issue I ran into was that chrome would not load the css or js files because they were incorrect "text/plain" MIME type. I switched over to node and express from python and loaded the files there and everything loaded perfectly. Here is the code for running this on express:
因此，当我执行 ng build --prod 并尝试使用 python -m http.server 为其提供服务时，我遇到了这个问题。这个问题看起来像我遇到的问题 我遇到的问题是 chrome 不会加载 css 或 js 文件，因为它们是不正确的“文本/纯文本”MIME 类型。我切换到 node 并从 python 表达并在那里加载文件，一切都完美加载。这是在 express 上运行它的代码：
const express = require('express')
const app = express()
const port = 4545
app.use('/', express.static('public')) //public is a folder in the directory where your index.html and other content go
app.get('/', function (req, res) {
res.redirect("/index.html")
})
app.listen(port, () => console.log("Example app listening on port"+port+"!"))
save this as index.js and run node index.js and it will run on port 4545 and serve your public directory.
将其保存为 index.js 并运行 node index.js，它将在端口 4545 上运行并为您的公共目录提供服务。
The
这
< app-root>< / app-root>
<app-root></app-root>
was filled
被填满
