Angular 2 import path not working properly

Question

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!!!

Günter Zöchbauer · Answer 1 · 2017-01-06T12:48:07.783

1

If you class is named ProduceService in this file this should work

import {ProductService} from '../../../Products/Classes/product.service';

edited Jan 06 '17 at 12:48

answered Jan 06 '17 at 12:38

Günter Zöchbauer

623,577
216
2,003
1,567

score 1 · Answer 2 · answered Jan 06 '17 at 12:46

1

The file name is case sensitive.

Use import {ProductService} from '../../../Products/Classes/product.service';

answered Jan 06 '17 at 12:46

Phil Cap

209
2
10

Is there any way to remove "../../../" before package path. import {ProductService} from 'Products/Classes/product.service'; – Yuvraj Singh Shekhawat Dec 02 '17 at 08:37

David · Accepted Answer · 2017-01-17T10:05:26.450

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

Angular 2 import path not working properly

3 Answers3