Angular 2多个模块名称只有大小写不同

Question

编译时出现以下警告：

WARNING in ./src/app/state/actions/userClass.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 被1个模块使用，即 /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 被3个模块使用，即 /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

- Post Impatica

Answer 1

我的文件名没有问题。出现这个问题是因为在我的某个导入中，我将UserClass大写了。

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

将 import 改为以下内容后，错误消失了：

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

- Post Impatica

---

这就是问题所在 - 我在导入时写成了'Events.service'而不是'events.service'。 - WernerCD

Answer 2

因为我在编写import时犯了一个错误，所以我的问题和你们一样。

请检查是否在某个地方写成了 --> import { RouterModule } from '@angular/Router';

现在，请更改为 --> import { RouterModule } from '@angular/router';

这解决了我的问题。希望对您也有用。

有关更多详细信息，请参见以下图片

1. https://istack.dev59.com/wS1nh.webp

2. https://istack.dev59.com/GyDGs.webp

- sankalpvk18

---

我遇到了同样的问题：在我的应用程序中，我正在导入 rxjs，但是对于一些导入，我犯了一个错误，将 R 大写为 Rxjs。 - Vivens Ndatinya

Answer 3

如果您正在使用Visual Studio Code进行编码，可能会出现有时它会以大写字母添加路径，而有时则是小写字母。

在我的情况下，我因为一些文件中从'@angular/material'导入了Angular Material组件，在至少另外两个文件中从'@angular/Material'导入，所以出现了错误。

将'@angular/Material'转换为小写可以消除警告。

希望这可以帮助您。

- theshinylight

Answer 4

检查是否重复导入。

- lpradhap

Answer 5

我在有意将文件名改成大写后收到了那个警告。

在将特定文件移动到另一个文件夹再移回原始文件夹之后，警告消失了。

（我使用带有一些 Angular 扩展的 VSC，在移动文件时会更新导入）

- andymel

Answer 6

这也可能是由于您的webpack配置中的条目引起的：

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')
  }
///...
};

请注意输入部分中scripts与Scripts的大小写。

- BlackICE

Answer 7

问题的一个令人恼火的可能原因是：组件路径中混合了大写和小写字母 - 请将它们统一。例如，

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

- VikciaR

Answer 8

我曾经遇到过类似的问题，解决方法是创建一个子文件夹，将你的问题组件放在其中。

这样，就不用像这样：

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

做类似这样的事情：

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

- Vincent TOSSOU

Answer 9

我在实现 Angular 4 应用程序与 ASP.NET Core 2.0 和 Webpack 时遇到了这个问题。

如果您使用两种不同的 "./" 或 "../" 相对路径符号导入服务或类，则可能会出现此问题。

请在 NavMenuComponent 中导入代码。

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

通过以下代码更改，错误得到了解决。

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

了解更多关于GitHub讨论的内容

- Ashish Patel