<app-root> 没有被填满

Posted 2023-03-13

技术标签:

【中文标题】<app-root> 没有被填满【英文标题】：<app-root> is not getting filled 【发布时间】：2018-03-27 01:22:05 【问题描述】：

我是 Angular 2 的初学者，并从一个包含以下文件的小项目开始：

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

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

<span>Welcome to title</span>

另外，我的 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>

我遇到的问题是，即使一切编译正常，<app-root> 标记在结果页面中仍然为空，并且我的模板 HTML 没有被添加。我已经通过更改模板 URL 测试了是否是模板加载的问题，但它无法找到我的模板文件并且编译失败。这意味着这不是问题。

这里有什么我遗漏的吗？

【问题讨论】：

【参考方案1】：

您已将 NgModule 装饰器和 AppComponent 类添加到模块的 imports 部分，这是错误的。从 imports 部分中删除 NgModule 装饰器。还要从模块的imports 中删除AppComponent。

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

imports 属性应该只包含用NgModule 修饰的类。

【讨论】：

删除“AppModule”的 No NgModule 元数据中的导入错误后显示错误。【参考方案2】：

所以我在执行 ng build --prod 并尝试使用 python -m http.server 为其提供服务时遇到了这个问题。 This issue looks like what I was getting 我遇到的问题是 chrome 不会加载 css 或 js 文件，因为它们是不正确的“text/plain”MIME 类型。我从 python 切换到 node 和 express 并在那里加载文件，一切都完美加载。这是在 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+"!"))

将其保存为 index.js 并运行 node index.js ，它将在端口 4545 上运行并为您的公共目录提供服务。

被填满了

【讨论】：

以上是关于<app-root> 没有被填满的主要内容，如果未能解决你的问题，请参考以下文章