ในแอปเชิงมุมผมได้เห็นว่ามีคุณสมบัติ@Component moduleIdมันหมายความว่าอะไร?

และเมื่อmodule.idไม่ได้มีการกำหนดไว้ทุกที่แอปก็ยังทำงานได้ มันยังทำงานได้อย่างไร

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

รุ่นเบต้าของ Angular (ตั้งแต่รุ่น 2-alpha.51) สนับสนุนเนื้อหาที่เกี่ยวข้องสำหรับส่วนประกอบเช่นtemplateUrlและstyleUrlsในเครื่องมือ@Componentตกแต่ง

module.idทำงานเมื่อใช้ CommonJS คุณไม่จำเป็นต้องกังวลเกี่ยวกับวิธีการทำงาน

เตือนความจำ : การตั้งค่า moduleId: module.id ใน @Component decorator เป็นกุญแจสำคัญที่นี่ หากคุณไม่มีสิ่งนั้น Angular 2 จะค้นหาไฟล์ของคุณที่ระดับรูท

แหล่งที่มาจากโพสต์ของ Justin Schwartzenbergerขอบคุณ@Pradeep Jain

อัพเดทเมื่อ 16 ก.ย. 2559:

หากคุณใช้webpackสำหรับการรวมกลุ่มคุณไม่จำเป็นต้องใช้ module.idมัณฑนากร Webpack ปลั๊กอินจัดการอัตโนมัติ (เพิ่ม) module.idในชุดสุดท้าย

อัปเดตสำหรับ (2017-03-13) :

ลบการกล่าวถึง moduleId ทั้งหมดแล้ว ลบ "ตำราที่เกี่ยวข้องของส่วนประกอบ" ลบแล้ว

เราได้เพิ่มปลั๊กอิน SystemJS ใหม่ (systemjs-angular-loader.js) เข้ากับการกำหนดค่า SystemJS ที่เราแนะนำ ปลั๊กอินนี้จะแปลงเส้นทาง "องค์ประกอบสัมพันธ์" ใน templateUrl และ styleUrls เป็น "เส้นทางสัมบูรณ์" สำหรับคุณ

เราขอแนะนำให้คุณเขียนเส้นทางที่สัมพันธ์กับองค์ประกอบเท่านั้น นั่นเป็นรูปแบบเดียวของ URL ที่กล่าวถึงในเอกสารเหล่านี้ คุณไม่จำเป็นต้องเขียน@Component({ moduleId: module.id })และไม่ควร

ที่มา: https://angular.io/docs/ts/latest/guide/change-log.html

ความหมาย:

moduleId?: string

moduleIdพารามิเตอร์ภายใน@Componentคำอธิบายประกอบใช้stringค่าซึ่งเป็น;

" id โมดูลของโมดูลที่มีส่วนประกอบ "

การใช้งาน CommonJS: module.id,

การใช้งาน SystemJS: __moduleName

moduleId ใช้เพื่อแก้ไขเส้นทางสัมพัทธ์สำหรับสไตล์ชีทและเทมเพลตของคุณตามที่ระบุในเอกสาร

id โมดูลของโมดูลที่มีส่วนประกอบ จำเป็นต้องสามารถแก้ไข URL สัมพัทธ์สำหรับเทมเพลตและสไตล์ ใน Dart สามารถกำหนดได้โดยอัตโนมัติและไม่จำเป็นต้องตั้งค่า ใน CommonJS สามารถตั้งค่าเป็น module.id ได้เสมอ

ผู้อ้างอิง (เก่า): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

เราสามารถระบุตำแหน่งของเทมเพลตและไฟล์สไตล์ที่สัมพันธ์กับไฟล์คลาสคอมโพเนนต์โดยการตั้งค่าคุณสมบัติ moduleId ของเมตาดาต้า @Component

อ้างอิง: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

โครงสร้างโฟลเดอร์:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html

ไม่มีโมดูล. id :

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

ด้วยโมดูล. id :

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

ถ้าคุณได้รับtypescript errorเพียงdeclareตัวแปรในไฟล์ของคุณ

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

คำหลักที่มีอยู่ในmodule nodeดังนั้นหากคุณติดตั้ง@types/nodeในโครงการของคุณคุณจะมีmoduleคำหลักอยู่ในไฟล์ typescript ของคุณโดยอัตโนมัติโดยไม่จำเป็นต้องใช้declareมัน

npm install -D @types/node

คุณอาจต้องรวมสิ่งนี้ในtsconfig.jsonไฟล์ของคุณเพื่อรับเครื่องมือ : ขึ้นอยู่กับการกำหนดค่าของคุณ

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

โชคดี

นอกจากคำอธิบายที่ยอดเยี่ยมจากechonaxและNishchit Dhananiฉันต้องการเพิ่มว่าฉันเกลียดประชากรส่วนmodule.idประกอบด้วย โดยเฉพาะอย่างยิ่งถ้าคุณได้รับการสนับสนุนสำหรับการรวบรวม AoT (ล่วงหน้า) และสำหรับโครงการที่เป็นจริงนี่คือสิ่งที่คุณควรตั้งเป้าหมายmodule.idไว้

จากเอกสาร :

การประยุกต์ใช้ JIT รวบรวมที่ใช้SystemJSURL ที่รถตักดินและส่วนประกอบญาติต้องตั้งค่าคุณสมบัติการ@Component.moduleId module.idวัตถุโมดูลไม่ได้กำหนดเมื่อแอปที่คอมไพล์ AoT ทำงาน แอปล้มเหลวด้วยข้อผิดพลาดในการอ้างอิงที่เป็นโมฆะยกเว้นว่าคุณกำหนดค่าโมดูลส่วนกลางใน index.html ดังนี้:

<script>window.module = 'aot';</script>

ฉันคิดว่าการมีบรรทัดนี้ในindex.htmlไฟล์เวอร์ชันการผลิตไม่สามารถยอมรับได้อย่างแน่นอน!

ดังนั้นเป้าหมายคือต้องมีการคอมไพล์แบบ Just-in-Time เพื่อการพัฒนาและการสนับสนุน AoT สำหรับการผลิตโดยมีคำจำกัดความเมตาดาต้าประกอบดังต่อไปนี้: (ไม่มีmoduleId: module.idบรรทัด)

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

ในเวลาเดียวกันฉันต้องการวางสไตล์เช่นmy.component.cssและไฟล์เทมเพลตเช่นที่my.component.html เกี่ยวข้องกับmy.component.tsเส้นทางไฟล์ส่วนประกอบ

เพื่อให้บรรลุทั้งหมดนี้ทางออกที่ฉันใช้คือโฮสต์เว็บเซิร์ฟเวอร์ (lite-server หรือ browser-sync) ระหว่างขั้นตอนการพัฒนาจากแหล่งไดเรกทอรีหลายแห่ง!

bs-config.json:

{
  "port": 8000,
  "server": ["app", "."]
}

โปรดสละเวลาตอบคำถามนี้ให้ฉันเพื่อรับรายละเอียด

เชิงมุมโครงการ 2 เริ่มต้นอย่างรวดเร็วเป็นแบบอย่างซึ่งอาศัยวิธีการนี้จะเป็นเจ้าภาพที่นี่

ตามเอกสาร Angular คุณไม่ควรใช้ @Component ({moduleId: module.id})

กรุณาอ้างอิง: https://angular.io/docs/ts/latest/guide/change-log.html

นี่คือข้อความที่เกี่ยวข้องจากหน้านั้น:

ลบการกล่าวถึง moduleId ทั้งหมดแล้ว ลบ "ตำราที่เกี่ยวข้องของส่วนประกอบ" ลบ (2017-03-13)

เราได้เพิ่มปลั๊กอิน SystemJS ใหม่ (systemjs-angular-loader.js ) ลงในการกำหนดค่า SystemJS ที่เราแนะนำ ปลั๊กอินนี้จะแปลงเส้นทาง "องค์ประกอบสัมพันธ์" ใน templateUrl และ styleUrls เป็น "เส้นทางสัมบูรณ์" สำหรับคุณ

เราขอแนะนำให้คุณเขียนเส้นทางที่สัมพันธ์กับองค์ประกอบเท่านั้น นั่นเป็นรูปแบบเดียวของ URL ที่กล่าวถึงในเอกสารเหล่านี้ คุณไม่จำเป็นต้องเขียน@Component({ moduleId: module.id })และไม่ควร

ดูเหมือนว่าหากคุณใช้ "module": "es6" ใน tsconfig.json คุณไม่จำเป็นต้องใช้สิ่งนี้ :)

ค่า moduleId นี้ใช้โดยกระบวนการสะท้อนเชิงมุมและส่วนประกอบ metadata_resolver เพื่อประเมินเส้นทางองค์ประกอบที่ผ่านการรับรองโดยสมบูรณ์ก่อนที่จะสร้างส่วนประกอบ

การเพิ่มการmoduleId: module.idแก้ไขปัญหาต่าง ๆ ที่อาจเกิดขึ้นได้เมื่อสร้างแอพเชิงมุมดั้งเดิมและแอปพลิเคชันเว็บเชิงมุม เป็นวิธีปฏิบัติที่ดีที่สุดที่จะใช้

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