Angular 4 error: There are multiple modules with names that only differ in casing

Question

I am getting following error in my Angular 4 project after ng serve command.

./src/app/Utils/config.service.ts There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * D:\ANGULAR\siteprice.org\node_modules\@ngtools\webpack\src\index.js!D:\ANGULAR\siteprice.org\src\app\Utils\config.service.ts Used by 1 module(s), i. e. D:\ANGULAR\siteprice.org\node_modules\@ngtools\webpack\src\index.js!D:\ANGULAR\siteprice.org\src\app\utils\email.service.ts * D:\ANGULAR\siteprice.org\node_modules\@ngtools\webpack\src\index.js!D:\ANGULAR\siteprice.org\src\app\utils\config.service.ts Used by 2 module(s), i. e. D:\ANGULAR\siteprice.org\node_modules\@ngtools\webpack\src\index.js!D:\ANGULAR\siteprice.org\src\app\app.module.ts

config.service.ts file:

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

@Injectable()
export class ConfigService {

  _apiURI : string;

  constructor() {
      this._apiURI = 'http://www.example.com/xyz/api/';
    }

    getApiURI() {
        return this._apiURI;
    }

    getApiHost() {
        return this._apiURI.replace('api/','');
    }

}

email.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import {Observable} from 'rxjs';
import 'rxjs/add/operator/map';
import { ConfigService } from '../Utils/config.service';
import { Email } from '../Models/email';

@Injectable()
export class EmailService {

  apiRoot: string = '';

  constructor(private http: Http, private configService: ConfigService) { 
    this.apiRoot = configService.getApiURI();
  }

I checked casing of the service names and they are correct.

Answer 1

I found the issue and I think it may be a bug in CLI.

The Utils folder name should be utils. So the first letter is lower case. utils folder in my windows directory is created with lower case. So I changed this:

import { ConfigService } from '../Utils/config.service';

to:

import { ConfigService } from '../utils/config.service';

Edit:

It looks like this is a known issue, one of the suggested solution is using kebap case file, folder names in windows.

https://github.com/AngularClass/angular-starter/issues/926