Cannot resolve file or directory entry.component.css

Question

I am in a bit of a pickle here. I am doing the Nesting Components part of Angular Basics, and there is one problem that I just can't seem to figure out. My specific error is:

ERROR in ./src/app/entries/entry/entry.component.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./entry.component.css in /Users/GabeNajera/Desktop/angular_basics_2017/stage_2_video_2_start/src/app/entries/entry
 @ ./src/app/entries/entry/entry.component.ts 21:17-49

I have actually used FileMerge in order to compare my program with the working version, but although I have verified that the two programs are identical, my program keeps spitting this error back at me. One strange thing that I did notice is that by taking away the .css in entry.component.css, the program would clear but I couldn't get the desired results. I have no idea what is going on, and I hope I can get some help here.
I will paste my code here, request if you want more:
entry.component.ts:
```
import { Component } from '@angular/core';
@Component({
    selector: 'app-entry',
    templateUrl: 'entry.component.html',
    styleUrls: ['entry.component.css']
})
export class EntryComponent {
}
```
entry-list.component.ts:
```
import { Component } from '@angular/core';
@Component({
    selector: 'app-entry-list',
    templateUrl: 'entry-list.component.html',
    styleUrls: ['entry-list.component.css']
})
export class EntryListComponent {
}
```
app.component.ts:
```
import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']
})
export class AppComponent {
    emoji = ['?', '?', '?', '?'];
    activeEmoji: string;
    changeEmoji() {
        this.activeEmoji = this.emoji[Math.floor(Math.random() * this.emoji.length)];
    }
}
```
app.module.ts:
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { EntryListComponent, EntryComponent } from './entries';
@NgModule({
    imports: [BrowserModule],
    declarations: [
        AppComponent,
        EntryComponent,
        EntryListComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}
```
index.ts:

export * from './entry-list/entry-list.component';
export * from './entry/entry.component';

Thank you in advance!

Welcome to the Treehouse Community

Looking to learn something new?

Ludwing Najera

Ludwing Najera

Cannot resolve file or directory entry.component.css