Angular 2 多個模塊的名稱僅在大小寫上有所不同

Question

編譯過程中出現以下警告：

./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/us erclasses.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

Answer 1

我的文件名很好。 出現此問題是因為在我的其中一個導入中，我將 UserClass 大寫：

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

將導入更改為以下內容后，錯誤消失了：

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

Answer 2

由於我在編寫導入時犯的錯誤，我遇到了同樣的錯誤。

檢查你是否在某處寫過 --> import { RouterModule } from '@angular/Router';

現在，將其更改為 --> import { RouterModule } from '@angular/router';

這解決了我的問題。 希望它也適用於你。

請參閱下面的圖片以獲得更清晰的信息

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

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

Answer 3

如果您使用Visual Studio Code 進行編碼，則可能會發生有時會添加大寫字母的路徑，有時會添加小寫字母的路徑。

在我的情況下，由於Angular Material組件是從某些文件中的'@angular/material'和來自'@angular/Material' （至少 2 個）其他文件中導入的，我收到了錯誤。

小寫'@angular/Material'刪除了警告。

希望這可以幫助。

Answer 4

我在使用 asp.net core 2.0 和 web pack 實現 angular 4 App 時遇到了這個問題。

如果您使用兩個不同的“./”或“../”相對路徑表示法導入服務或類，則會出現此問題。

在 NavMenuComponent 中導入代碼。

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

使用以下代碼更改錯誤已解決

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

了解有關 GitHub 討論的更多信息

Answer 5

檢查您是否已導入兩次。

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

請注意條目部分中腳本與腳本的大小寫。

Answer 7

有意將文件重命名為大寫后，我收到了該警告。

將特定文件移動到另一個文件夾並返回原始文件后，警告消失了。

（我使用 VSC 和一些角度擴展，在移動文件時更新導入）

Answer 8

我遇到了這樣的問題，解決方案是創建一個子文件夾，在其中放置問題組件。

所以而不是：

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

做類似的事情：

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

Answer 9

問題的一個令人討厭的可能原因之一：組件路徑中混合了大寫和小寫 - 使其相同。 例如，

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