Angular 2 Multiple modules with names that only differ in casing

Question

The following warning occurs during compilation:

WARNING in ./src/app/state/actions/userClass.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: * /Users/smp/Projects/training3/node_modules/@angularclass/hmr-loader/index.js!/Users/smp/Projects/training3/node_modules/awesome-typescript-loader/dist/entry.js?{configFileName: "tsconfig.webpack.json"}!/Users/smp/Projects/training3/node_modules/angular2-template-loader/index.js!/Users/smp/Projects/training3/node_modules/angular-router-loader/src/index.js?loader=system&genDir=compiled&aot=false!/Users/smp/Projects/training3/src/app/state/actions/UserClass.ts Used by 1 module(s), i. e. /Users/smp/Projects/training3/node_modules/@angularclass/hmr-loader/index.js!/Users/smp/Projects/training3/node_modules/awesome-typescript-loader/dist/entry.js?{configFileName: "tsconfig.webpack.json"}!/Users/smp/Projects/training3/node_modules/angular2-template-loader/index.js!/Users/smp/Projects/training3/node_modules/angular-router-loader/src/index.js?loader=system&genDir=compiled&aot=false!/Users/smp/Projects/training3/src/app/features/portal/content/tabs/userclasses/userclasses.component.ts * /Users/smp/Projects/training3/node_modules/@angularclass/hmr-loader/index.js!/Users/smp/Projects/training3/node_modules/awesome-typescript-loader/dist/entry.js?{configFileName: "tsconfig.webpack.json"}!/Users/smp/Projects/training3/node_modules/angular2-template-loader/index.js!/Users/smp/Projects/training3/node_modules/angular-router-loader/src/index.js?loader=system&genDir=compiled&aot=false!/Users/smp/Projects/training3/src/app/state/actions/userClass.ts Used by 3 module(s), i. e. /Users/smp/Projects/training3/node_modules/@angularclass/hmr-loader/index.js!/Users/smp/Projects/training3/node_modules/awesome-typescript-loader/dist/entry.js?{configFileName: "tsconfig.webpack.json"}!/Users/smp/Projects/training3/node_modules/angular2-template-loader/index.js!/Users/smp/Projects/training3/node_modules/angular-router-loader/src/index.js?loader=system&genDir=compiled&aot=false!/Users/smp/Projects/training3/src/app/state/effects/userClass.ts

Answer 1

The names of my files where fine. This issue popped up because in one of my imports I capitalized UserClass:

import * as userClassActions from '../../../../../state/actions/UserClass';

After changing the import to the following the error went away:

import * as userClassActions from '../../../../../state/actions/userClass';

Answer 2

I was getting the same error because of a mistake I did while writing import.

Check if you've written somewhere --> import { RouterModule } from '@angular/Router';

Now, change it to --> import { RouterModule } from '@angular/router';

This solved my problem. Hope it works for you too.

See the images below for more clarity

1. https://i.stack.imgur.com/wS1nh.png

2. https://i.stack.imgur.com/GyDGs.png

Answer 3

If you are coding with Visual Studio Code, it may happen that it will sometimes add path with capital letter and other times with a lower letter.

In my case I was getting the error because of Angular Material components were imported from '@angular/material' in some files and in (at least 2) other files from '@angular/Material'.

Lower-casing '@angular/Material' removed the warning.

Hope this helps.

Answer 4

I was facing this issue while implementing angular 4 App with asp.net core 2.0 and web pack.

This issue can occur if you import service or class with two different "./" or "../" relative path notation.

Import code in NavMenuComponent.

import { SampleService } from '../../services/sample.service';  

Changing with following code the error was resolved

import { SampleService } from './../../services/sample.service';    

Learn more about GitHub discussion

Answer 5

check if you have imported twice.

Answer 6

This can also be caused by entries in your webpack config:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development'
  , entry: {
    crm: './Scripts/app/crm/crm.router.js'
    , labels: './Scripts/app/labels/labels.router.js'
    , admin: './scripts/app/crm/admin/admin.router.js'
  }
  , output: {
    filename: '[name]Bundle.js'
    , path: path.resolve(__dirname, 'dist')
  }
///...
};

Notice the casing of scripts vs Scripts in the entry section.

Answer 7

I got that warning after renaming the file to upper case intentionally.

After moving the specific file into another folder and back to the original the warning was gone.

(I use VSC with some angular extensions that do the updating of imports when moving files)

Answer 8

I had a problem like that, and the solution was to create one subfolder in which you put your problem component.

So instead of:

import {EventsComponent} from './Shared/Components/events/events.component';

Do something like:

import {EventsComponent} from './Shared/Components/About Event/events/events.component';

Answer 9

One of annoying possible cause of the problem: mixed upper and lowercases in components path - make it same. For example,

import {EventsComponent} from './events/events.component';
import {OtherComponent} from './Events/other.component';