Trong một ứng dụng Angular, tôi đã thấy rằng @Componentcó tài sản moduleId. Nó có nghĩa là gì?

Và khi module.idkhông được xác định ở bất cứ đâu, ứng dụng vẫn hoạt động. Làm thế nào nó vẫn có thể làm việc?

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

Bản phát hành beta của Angular (kể từ vesion 2-alpha.51) hỗ trợ các tài sản tương đối cho các thành phần, như templateUrl và styleUrl trong trình @Componenttrang trí.

module.idhoạt động khi sử dụng CommonJS. Bạn không cần phải lo lắng về cách thức hoạt động của nó.

Ghi nhớ : thiết lập moduleId: module.id trong trang trí @Component là chìa khóa ở đây. Nếu bạn không có điều đó thì Angular 2 sẽ tìm kiếm các tệp của bạn ở cấp độ gốc.

Nguồn từ bài đăng của Justin Schwartzenberger , nhờ @Pradeep Jain

Cập nhật ngày 16 tháng 9 năm 2016:

Nếu bạn đang sử dụng gói webpack để gói thì bạn không cần module.idtrong trang trí. Webpack plugin tự động xử lý (thêm nó) module.idtrong gói cuối cùng

Cập nhật cho (2017-03-13) :

Tất cả đề cập đến moduleId loại bỏ. Sách nấu ăn "thành phần tương đối" đã bị xóa

Chúng tôi đã thêm một plugin SystemJS mới (systemjs-angular-loader.js) vào cấu hình SystemJS được đề xuất của chúng tôi. Plugin này tự động chuyển đổi các đường dẫn "tương đối thành phần" trong templateUrl và styleUrls thành "đường dẫn tuyệt đối" cho bạn.

Chúng tôi khuyến khích bạn chỉ viết các đường dẫn liên quan đến thành phần. Đó là hình thức URL duy nhất được thảo luận trong các tài liệu này. Bạn không còn cần phải viết @Component({ moduleId: module.id }), bạn cũng không nên.

Nguồn: https://angular.io/docs/ts/latest/guide/change-log.html

Định nghĩa:

moduleId?: string

moduleIdtham số bên trong @Componentchú thích có một stringgiá trị là;

" Id mô-đun của mô-đun có chứa thành phần. "

Sử dụng CommonJS : module.id,

Sử dụng SystemJS: __moduleName

moduleId được sử dụng để giải quyết các đường dẫn tương đối cho biểu định kiểu và mẫu của bạn như được nói trong tài liệu.

Id mô-đun của mô-đun có chứa thành phần. Cần thiết để có thể giải quyết các url tương đối cho các mẫu và kiểu. Trong Dart, điều này có thể được xác định tự động và không cần phải thiết lập. Trong CommonJS, điều này luôn có thể được đặt thành module.id.

ref (cũ): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata- class.html

chúng ta có thể chỉ định vị trí của các tệp mẫu và kiểu liên quan đến tệp lớp thành phần chỉ bằng cách đặt thuộc tính moduleId của siêu dữ liệu @Component

ref: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

Cấu trúc thư mục:

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

Không có module.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
})

Với module.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
})

Nếu bạn nhận được typescript error, chỉ cần declarecác biến trong tập tin của bạn.

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

UPDATE - December 08, 2016

Các moduletừ khóa có sẵn trên node. Vì vậy, nếu bạn cài đặt @types/node, trong dự án của bạn, bạn sẽ có moduletừ khóa tự động có sẵn trong các tệp bản thảo mà không cần đến declarenó.

npm install -D @types/node

Tùy thuộc vào cấu hình của bạn, bạn có thể phải đưa phần này vào tsconfig.jsontệp của mình để có được công cụ :

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

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

Chúc may mắn

Ngoài những lời giải thích tuyệt vời từ echonaxvà Nishchit Dhananitôi muốn thêm, rằng tôi thực sự ghét dân số của các thành phần với module.id. Đặc biệt, nếu bạn có hỗ trợ cho việc biên dịch AoT (Trước thời gian) và cho một dự án thực tế thì đây là điều bạn nên nhắm tới, không có chỗ nào giống như module.idtrong siêu dữ liệu thành phần của bạn.

Từ Tài liệu :

Các ứng dụng được biên dịch JiT sử dụng SystemJStrình tải và URL liên quan đến thành phần phải đặt thuộc @Component.moduleIdtính module.id. Đối tượng mô-đun không được xác định khi ứng dụng được biên dịch AoT chạy. Ứng dụng không thành công với lỗi tham chiếu null trừ khi bạn chỉ định giá trị mô-đun toàn cầu trong index.html như thế này:

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

Tôi nghĩ rằng có dòng này trong phiên bản sản xuất của index.htmltập tin là hoàn toàn không thể chấp nhận được!

Do đó, mục tiêu là phải có trình biên dịch JiT (Chỉ trong thời gian) để phát triển và hỗ trợ AoT cho sản xuất với định nghĩa siêu dữ liệu thành phần sau: (không có moduleId: module.iddòng)

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

Đồng thời tôi muốn đặt các kiểu, my.component.csstệp thích và tệp mẫu, giống như my.component.html liên quan đến my.component.tsđường dẫn tệp thành phần .

Để đạt được tất cả điều này, giải pháp tôi đang sử dụng là lưu trữ máy chủ web (máy chủ lite hoặc đồng bộ hóa trình duyệt) trong giai đoạn phát triển từ nhiều nguồn thư mục!

bs-config.json:

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

Xin hãy lấy câu trả lời này cho tôi chi tiết.

Dự án khởi động nhanh góc 2 mẫu mực, dựa trên phương pháp này được lưu trữ ở đây .

Theo tài liệu Angular, Bạn không nên sử dụng @Component ({moduleId: module.id})

Vui lòng tham khảo: https://angular.io/docs/ts/latest/guide/change-log.html

Đây là văn bản có liên quan từ trang đó:

Tất cả đề cập đến moduleId loại bỏ. Sách nấu ăn "đường dẫn tương đối thành phần" đã bị xóa (2017-03-13)

Chúng tôi đã thêm một plugin SystemJS mới ( systemjs-angular-loader.js) vào cấu hình SystemJS được đề xuất của chúng tôi. Plugin này tự động chuyển đổi các đường dẫn "tương đối thành phần" trong templateUrl và styleUrls thành "đường dẫn tuyệt đối" cho bạn.

Chúng tôi khuyến khích bạn chỉ viết các đường dẫn liên quan đến thành phần. Đó là hình thức URL duy nhất được thảo luận trong các tài liệu này. Bạn không còn cần phải viết @Component({ moduleId: module.id }), bạn cũng không nên.

Có vẻ như nếu bạn sử dụng "mô-đun": "es6" trong tsconfig.json, bạn không phải sử dụng điều này :)

Giá trị moduleId này được sử dụng bởi các quy trình phản xạ góc và thành phần metadata_resolver để đánh giá đường dẫn thành phần đủ điều kiện trước khi thành phần được xây dựng.

Thêm moduleId: module.idsửa chữa một số vấn đề có thể xảy ra khi xây dựng các ứng dụng góc cạnh và ứng dụng web góc. Đó là cách tốt nhất để sử dụng nó.

Nó cũng cho phép thành phần tìm trong thư mục hiện tại cho các tệp thay vì từ thư mục trên cùng