I have a service that I injected into my app component.
app.component.ts
import { Component } from '@angular/core';
import {ProductService} from '../../../products/Classes/Product.Service';
import {TestService } from '../../../products/Classes/test.service';
@Component({
selector: 'pm-app',
moduleId:module.id,
templateUrl: '../View/PageTitle.html',
providers:[ProductService,TestService]
})
export class AppComponent {
pageTitle:string ='Acme Product Management';
}
my folder structure is as below
My services exists on the Products folder not the products folder. When I change it to upper case in my import statement my app breaks "No Provider For ...". Can someone please tell me why this is happening. I have no idea why!!!
I found the problem
In my app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProductListComponent } from '../../../products/component/product-list';
import { AppComponent } from '../Component/app.component';
import {FormsModule} from '@angular/forms';
import {ProductListFilterPipe} from '../../../products/component/product-list-filter.pipe';
import {StarComponent} from '../../star/Component/star.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [ AppComponent,ProductListComponent,ProductListFilterPipe,StarComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The import for my ProductListComponent and ProductListFilterPipe had lowercase p. I changed it to upper and now it works.
Summary: the paths are case sensitive in a sense. From my testing it's not about matching the references to the folder cases but to keep the references consistent.
Thanks