ข้อผิดพลาด: มีมากกว่าหนึ่งโมดูลที่ตรงกัน ใช้ตัวเลือก skip-import เพื่อข้ามการนำเข้าส่วนประกอบไปยังโมดูลที่ใกล้เคียงที่สุด

เมื่อฉันพยายามสร้างส่วนประกอบในมุมเชิงมุมมันแสดงให้ฉันเห็นข้อผิดพลาดนี้ ฉันจะกำจัดมันได้อย่างไร

ข้อผิดพลาด: มีมากกว่าหนึ่งโมดูลที่ตรงกัน ใช้ตัวเลือก skip-import เพื่อข้ามการนำเข้าส่วนประกอบไปยังโมดูลที่ใกล้เคียงที่สุด

ฉันใช้เวอร์ชันเชิงมุม cli: 1.4.1

ระบุโมดูลโดยใช้พารามิเตอร์ --module ตัวอย่างเช่นหากโมดูลหลักคือ app.module.ts ให้รันสิ่งนี้:

ng g c new-component --module app

หรือถ้าคุณอยู่ในไดเรกทอรีอื่นแล้ว

ng g c component-name --module ../

ลองนี่:มันใช้ได้สำหรับฉัน

ng generate component componentName --module=app.module

ปัญหานี้เกิดขึ้นเนื่องจากรุ่นที่พยายามเพิ่มส่วนประกอบของคุณไปยังโมดูลคือเพิ่มบรรทัดนี้

import { MyComponent } from './Components/my-component/my-component.component';

แต่มันพบ 2 โมดูล

ตามที่ระบุไว้ที่นี่พวกเขาแก้ไขสถานการณ์ที่ตราบเท่าที่ในโฟลเดอร์ src / app รูทที่คุณมีเพียง 1 โมดูลคุณก็ไม่เป็นไรดังนั้นเพียงแค่ย้ายโมดูลที่สองไปยังโฟลเดอร์ย่อย

มิฉะนั้นคุณต้องใช้ --module

มันใช้งานได้สำหรับฉัน

ng g component component-name --skip-import

เพียงอัปเดตคำตอบของ Zisha เพียงเล็กน้อย

ในโครงการของฉันโมดูลทั้งหมดถูกวางไว้ในโฟลเดอร์ที่ชื่อว่า "modules" และส่วนประกอบทั้งหมดจะอยู่ในโฟลเดอร์ "components" ภายใต้ "src / app"

ดังนั้นในการสร้างองค์ประกอบภายใต้เส้นทางที่ระบุฉันใช้ไวยากรณ์ต่อไปนี้:

ng gc components_path / component_name - โมดูล modules_path / module_name

ตัวอย่าง:

ส่วนประกอบ gc / การเข้าสู่ระบบ - โมดูลโมดูล / แอป

CLI เชิงมุม: 6.0.8
โหนด: 10.4.0
ระบบปฏิบัติการ: linux x64
Angular: 6.0.4

ในกรณีที่มีโมดูลคุณลักษณะ (เช่นmanager.module.tsภายในโฟลเดอร์ย่อย "/ manager") โดยมีโมดูลการกำหนดเส้นทางที่ส่งออกไปยัง NgModule แยกต่างหาก (เช่นmanager-routing.module.ts ) ข้อความแสดงข้อผิดพลาด:

มีมากกว่าหนึ่งโมดูลที่ตรงกัน ใช้ตัวเลือก skip-import เพื่อข้ามการนำเข้าส่วนประกอบไปยังโมดูลที่ใกล้เคียงที่สุด

ไม่ปรากฏขึ้นและส่วนประกอบถูกสร้างและเพิ่มอย่างถูกต้องในโมดูลmanager.module.ts

แต่ระวังการตั้งชื่อ! ชื่อของโมดูลการกำหนดเส้นทางจะต้องจบด้วย " -routing "!

หากโมดูลการกำหนดเส้นทางได้รับชื่อเช่นmanager-router.module.ts , CLI จะบ่นกับข้อความข้อผิดพลาดและคาดว่าคุณจะให้ตัวเลือก --module ตัวเลือกเพื่อเพิ่มการนำเข้าส่วนประกอบโดยอัตโนมัติ:

ng generate component some-name --module=manager.module.ts

หรือ

ng generate component some-name --skip-import

หากคุณต้องการเพิ่มการนำเข้าส่วนประกอบด้วยตนเอง

มีสองวิธีในการแก้ไขปัญหานี้

1) ข้าม (โดยใช้คำสั่ง --skip-import in) การนำเข้าเริ่มต้นและสร้างส่วนประกอบและเมื่อส่วนประกอบถูกสร้างขึ้นนำเข้าด้วยตนเองทุกที่ที่คุณต้องการใช้

ng generate component my-component --skip-import

2) ระบุชื่อโมดูลอย่างชัดเจนในตำแหน่งที่คุณต้องการนำเข้า

ng generate  component  my-component --module=my-module.module

เมื่อแอพหรือ lib มีหลายโมดูลซ้อนกัน

myApp
  > src
    > app
      app.module.ts
      > routes
        > login
          > auth
          login.module.ts

CLI เชิงมุม

ng g component routes/login/auth/my-auth --module=routes/login/login.module.ts 

NRWL NX Angular CLI

ng g component routes/login/auth/my-auth --project=myApp --module=routes/login/login.module.ts

ผลลัพธ์

myApp
  > src
    > app
      app.module.ts
      > routes
        > login
          > auth
            > my-auth
              my-auth.component.ts etc...
          login.module.ts

ฉันได้รับข้อผิดพลาดด้านล่างเมื่อพยายามสร้างส่วนประกอบใหม่ภายใต้โฟลเดอร์

ข้อผิดพลาด: มีมากกว่าหนึ่งโมดูลที่ตรงกัน ใช้ตัวเลือก skip-import เพื่อข้ามการนำเข้าส่วนประกอบไปยังโมดูลที่ใกล้เคียงที่สุด

ฉันใช้คำสั่งด้านล่างและส่วนประกอบใหม่ได้สร้างเสร็จเรียบร้อยแล้วภายใต้โฟลเดอร์

 ng g c folderName/my_newComponent ---module ../app

โครงการของฉันถูกสร้างขึ้นโดยใช้ Visual Studio Community 2017 และสร้าง 3 โมดูลแยกกัน: app.browser.module, app.server.module และ app.shared.module

เพื่อสร้างส่วนประกอบของฉันฉันตรวจสอบคำตอบข้างต้นและพบว่าโมดูลของฉันเป็น app.shared.module

ดังนั้นฉันวิ่ง:

ng g c componentName --module=app.shared.module

เมื่อมีโมดูลมากกว่าหนึ่งโมดูลในโฟลเดอร์แอปการสร้างส่วนประกอบด้วยคำสั่งด้านล่างจะล้มเหลว:

ng generate component New-Component-Name

เหตุผลคือ CLI เชิงมุมตรวจพบหลายโมดูลและไม่ทราบว่าจะเพิ่มองค์ประกอบใดในโมดูลนั้น ดังนั้นคุณต้องระบุอย่างชัดเจนถึงองค์ประกอบของโมดูลที่จะเพิ่ม:

ng generate component New-Component-Name --module=ModuleName

หากคุณกำลังสร้างในโมดูลที่เฉพาะเจาะจงไปที่เส้นทางนั้นและเรียกใช้ ng gc componentname

อื่นสร้างโมดูลโมดูลแรกโมดู

cd arc / app / modulename ไปที่ modulename path และสร้างองค์ประกอบ

ลอง ng g component header --module app มันใช้งานได้สำหรับฉัน

เมื่อคุณมีมากกว่าหนึ่งโมดูลคุณจะต้องระบุชื่อโมดูล

 ng g c componentName --module=modulename.module 

CLI เชิงมุม: 8.3.1

เมื่อคุณมีหลายmodule.tsไฟล์ภายในโมดูลคุณจะต้องระบุไฟล์โมดูลที่คุณกำลังสร้างส่วนประกอบ

ng g c modulefolder/componentname --module=modulename.module

สำหรับเช่นฉันมีโฟลเดอร์โมดูลที่ใช้ร่วมกันซึ่งฉันมีshared.module.tsและmaterial.module.tsเช่นนี้

shared
  > shared.module.ts
  > material.module.ts

และฉันต้องการที่จะสร้างsidebarองค์ประกอบสำหรับshared.module.ts แล้วฉันจะเรียกใช้คำสั่งดังต่อไปนี้

ng g c shared/sidebar --module=shared.module

ถ้าคุณต้องการที่จะส่งออกองค์ประกอบแล้วเรียกใช้คำสั่งดังต่อไปนี้

ng g c shared/sidebar --module=shared.module --export

CLI เชิงมุม: 8.3.4 โหนด: 10.16.3 Angualr: 4.2.5

ฉันใช้คำสั่ง"dotnet new angular"เพื่อสร้างโครงการและได้สร้างโมดูลที่แตกต่างกัน 3 โมดูลในโฟลเดอร์แอป (แม้ว่าการทดสอบอย่างง่าย ๆ ที่มีชื่อโครงการใหม่เพียงแค่สร้างโมดูลเดียว

ดูโมดูลในโครงการของคุณและตัดสินใจเลือกโมดูลที่คุณต้องการ - จากนั้นระบุชื่อ

ng g c componentName --module=[name-of-your-module]

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับโมดูลได้ที่นี่: https://angular.io/guide/architecture-modules

ในกรณีของฉันดูเหมือนว่า ng ไม่ได้ลงทะเบียนในเส้นทางสภาพแวดล้อมของฉัน ฉันใช้คำสั่ง npm run เพื่อรันคำสั่ง ng โปรดระวังเพื่อส่งอาร์กิวเมนต์ที่คุณต้องการเป็นพิเศษ - ตามข้อกำหนดการเรียกใช้ npm

ตัวอย่าง: npm run ส่วนประกอบ ng gc / scheduling - --module = app

หรือ: npm เรียกใช้ส่วนประกอบ / กำหนดเวลา ng gc - --skip-import

ฉันได้รับคำเตือนนี้เมื่อมีสิ่งนี้ในการกำหนดค่าangular.json:

"prefix": "app_ng"

เมื่อเปลี่ยนเป็น"app"ทุกอย่างทำงานได้อย่างสมบูรณ์แบบ

เพียงแค่เพิ่มข้อมูลอีกชิ้นสำหรับทุกคนเช่นฉันที่เกิดขึ้นพร้อมกับมีเพียงแอปพลิเคชันเดียว

ฉันตั้งค่าแอปพลิเคชันของฉันด้วย app.module.ts หลักและฉันกำหนดเส้นทางด้วยโมดูลเส้นทางในโฟลเดอร์ของตัวเองภายใต้แอปพลิเคชันหลัก ฉันผ่านและทำการ 'ทำความสะอาด' บางอย่างเนื่องจากฉันมีสิ่งอื่น ๆ ที่จำเป็นต้องมีการจัดระเบียบที่ดีขึ้น สิ่งหนึ่งที่ฉันทำคือย้าย routing.module.ts ไปยังโฟลเดอร์ root เนื่องจากมันเป็นไฟล์เดียวในโฟลเดอร์ที่ฉันคิดว่ามันไม่จำเป็นต้องเป็นโฟลเดอร์ของตัวเอง

สิ่งนี้ใช้ได้ดีในตอนแรก แต่ครั้งต่อไปฉันพยายามสร้างส่วนประกอบใหม่ (บางครั้งในภายหลังผ่าน WebStorm IDE) มันล้มเหลวด้วยข้อความนี้ หลังจากอ่านผ่านสิ่งนี้ฉันได้ลองใส่โมดูลเส้นทางกลับเข้าไปในโฟลเดอร์แยกต่างหากและมันก็ทำงานได้อีกครั้ง

ดังนั้นโปรดระวังผู้อื่นอย่าย้ายโมดูเส้นทางไปยังโฟลเดอร์รูทของคุณ! ฉันแน่ใจว่ามีวิธีอื่น ๆ ที่จะจัดการกับเรื่องนี้เช่นกัน แต่ฉันมีความสุขกับมันในโฟลเดอร์ของตัวเองในตอนนี้และใช้ตัวสร้าง IDE เหมือนที่ฉันเคยเป็นมาก่อน

คุณต้องให้ชื่อโมดูลระบุเช่น

ng g c your-component --module module-name

คุณmodule-nameควรจะอัพเดทตำแหน่งใดกับส่วนประกอบที่สร้างขึ้นใหม่

ในฐานะที่เป็นแฮ็คทำตามขั้นตอนด้านล่างเพื่อฉัน

1) ย้ายไฟล์ * .module.ts จาก src / app ไปยังตำแหน่งที่อยู่นอกโครงการ

2) ดำเนินการคำสั่งเพื่อสร้างส่วนประกอบ [ng g c component-name]

3) เลื่อนไฟล์ * .module.ts กลับไปที่ src / app /