Angular 2 多个模块的名称仅在大小写上有所不同答案

【问题标题】：Angular 2 Multiple modules with names that only differ in casingAngular 2 多个模块的名称仅在大小写上有所不同
【发布时间】：2017-06-18 20:39:15
【问题描述】：

编译时出现如下警告：

./src/app/state/actions/userClass.ts 中的WARNING 有多个名称只是大小写不同的模块。这可能导致使用其他文件系统在文件系统上编译时出现意外行为大小写语义。使用相等的大小写。比较这些模块标识符： * /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 个模块使用，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 由 3 个模块使用，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

【问题讨论】：

标签： javascript angular typescript webpack

【解决方案1】：

一个令人讨厌的问题可能原因：在组件路径中混合大小写 - 使其相同。例如，

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

【讨论】：

【解决方案2】：

我遇到了这样的问题，解决方案是创建一个子文件夹，将问题组件放入其中。

所以而不是：

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

执行以下操作：

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

【讨论】：

【解决方案3】：

我在有意将文件重命名为大写后收到了警告。

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

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

【讨论】：

【解决方案4】：

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

在我的情况下，我收到了错误，因为 Angular Material 组件是从 '@angular/material' 在某些文件和（至少 2 个）其他文件中从 '@angular/Material' 导入的。

小写'@angular/Material' 删除了警告。

希望这会有所帮助。

【讨论】：

【解决方案5】：

这也可能是由您的 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 的大小写。

【讨论】：

【解决方案6】：

由于我在编写 import 时犯了一个错误，我遇到了同样的错误。

检查你是否在某处写过 --> import { RouterModule } from '@angular/Router';

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

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

看下图更清楚

【讨论】：

我遇到了同样的问题：在我的情况下，我在我的应用程序中导入了 rxjs，对于某些导入，我错误地将 R 大写为 Rxjs

【解决方案7】：

检查你是否已经导入了两次。

【讨论】：

【解决方案8】：

我在使用 asp.net core 2.0 和 web pack 实现 angular 4 App 时遇到了这个问题。

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

在 NavMenuComponent 中导入代码。

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

改用下面的代码，错误就解决了

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

Learn more about GitHub discussion

【讨论】：

【解决方案9】：

我的文件名很好。出现此问题是因为在我的一个导入中我将 UserClass 大写：

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

将导入更改为以下内容后，错误消失了：

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

【讨论】：

就是这样 - 我在导入时使用了“Events.service”而不是“events.service”。