Angular4导出的成员无法识别 - 错误消息的原因？

Question

我正在为荒诞派戏剧集团创建一个项目，到目前为止已经创建了一些代码，并重构了它以进行路由。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <h1>{{title}}</h1>
    <absurdist-drama></absurdist-drama>
  `
})

export class AppComponent {
  title = 'An Archipelago Grapefruit';
}

app.module.ts

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

import { AppComponent }        from './app.component';
import { GrapefruitComponent } from './grapefruit.component';

@NgModule({
  declarations: [
    AppComponent,
    GrapefruitComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
  {
    path: 'absurdist-drama',
    component: GrapefruitComponent
  }
])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这看起来应用程序应该可以工作，并且它是从localhost服务而不是在服务器上服务（虽然计算机仍然连接到互联网），所以我不会预料到这与安全问题有什么关系，但我收到错误：

src/app/app.module.ts (7,10): Module '"app/src/app/app.component"' has no exported member 'AppComponent'.

app.component.ts与app.module.ts位于同一目录中。可能是问题的原因是什么？