为什么在这个简单的组件中出现 Angular 编译错误答案

【问题标题】：Why do I get an Angular compile error in this simple component为什么在这个简单的组件中出现 Angular 编译错误
【发布时间】：2017-07-09 05:19:06
【问题描述】：

我刚刚“编写”了（复制结构而非内容）这个 Angular 4 小模块：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { FooterComponent } from "./footer.component";

@NgModule({
  declarations: [
    FooterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [FooterComponent]
})
export class FooterModule { }

当我尝试angular build 时，我收到以下错误：

C:/Projects/Angular 4/Angular4/src/footer.module.ts (7,1) 中的错误： '来自' 预期。

在我看来，第 7 行 import { FooterComponent } from "./footer.component"; 在语法上看起来是正确的，甚至还有 from。如果from 组件不好，我宁愿期待一个运行时错误。

【问题讨论】：

您是否尝试删除并重写（而不是复制过去）这一行和之前的行？
尝试清理缓存并重启
@Guy，是的，我做到了。

标签： javascript angular typescript ecmascript-6

【解决方案1】：

键入以下内容：

import { } from "./footer.component";

然后将光标放在花括号内并在 IDE 中按 Ctrl-Space。看看它是否建议 FooterComponent。如果不是，则问题出在 footer.component.ts。

【讨论】：

【解决方案2】：

原来我的组件没有包含*.Module.ts。那是绊倒import's 和各种各样的事情。我的组件装饰器下方有一条红线。悬停在线告诉我我的模块不能在这里和那里使用。

添加模块文件解决了这个问题。

【讨论】：