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类添加到模块的imports部分，这是错误的。从NgModule部分移除imports装饰器。同时从模块的AppComponent中删除imports。

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

imports属性应仅包含使用NgModule修饰的类。

Answer 2

所以我在执行ng build --prod并尝试使用python -m http.server来提供服务时遇到了这个问题。 This issue looks like what I was getting我遇到的问题是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+"!"))

将其另存为index.js并运行节点index.js，它将在端口4545上运行并服务于您的公共目录。

The

已填充

<app-root>没有被填满

2 个答案: