<app-root> 没有被填满

Question

我是 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 测试了是否是模板加载的问题，但是它找不到我的模板文件并且编译失败。这意味着这不是问题所在。

这里有什么我遗漏的吗？

Answer 1

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

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

imports 属性应该只包含用 NgModule.

修饰的 classes

Answer 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 和运行节点 index.js，它将运行在端口 4545 上为您的 public 目录提供服务。

< app-root>< / app-root>

已满

<app-root> 没有被填满

<app-root> is not getting filled

typescript

angular-components

angular