У програмі Angular я бачив, що @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. Якщо у вас цього немає, Angular 2 шукатиме ваші файли на кореневому рівні.

Джерело з поста Джастіна Шварценбергера , завдяки @Pradeep Jain

Оновлення 16 вересня 2016 року:

Якщо ви використовуєте веб- пакет для з’єднання, то він не потребує module.idдекоратора. Автоматична обробка плагінів Webpack (додайте її) module.idу заключному пакеті

Оновлення (2017-03-13) :

Усі згадки про moduleId видалені. Книга відносних шляхів компонента видалена

До рекомендованої конфігурації SystemJS ми додали новий плагін SystemJS (systemjs-angular-loader.js). Цей плагін динамічно перетворює "відносні до компонентів" шляхи в templateUrl та styleUrls в "абсолютні шляхи" для вас.

Ми наполегливо рекомендуємо писати лише відносні компоненти. Це єдина форма URL-адреси, обговорювана в цих документах. Вам більше не потрібно писати @Component({ moduleId: module.id }), а також не слід.

Джерело: https://angular.io/docs/ts/latest/guide/change-log.html

Визначення:

moduleId?: string

moduleIdпараметр всередині @Componentанотації приймає stringзначення, яке є;

" Ідентифікатор модуля, який містить компонент. "

Використання CommonJS : module.id,

Використання SystemJS: __moduleName

moduleId використовується для вирішення відносних шляхів для ваших таблиць стилів та шаблонів, як зазначено в документації.

Ідентифікатор модуля, який містить компонент. Потрібно, щоб мати можливість вирішувати відносні URL-адреси для шаблонів та стилів. У Dart це можна визначити автоматично і його не потрібно встановлювати. У CommonJS це завжди можна встановити на module.id.

ref (стара): 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

Без 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
})

З 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
})

Якщо ви отримаєте 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автоматично доступне ключове слово у ваших файлах машинопису, не потребуючи 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) JiT-компіляцію для розробки та підтримку 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-сервер або синхронізація браузера) під час фази розробки з декількох джерел каталогів!

bs-config.json:

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

Будь ласка , взяти взяли в цей відповідь для мене деталі.

Приблизний кутовий 2 швидкий проект запуску, який заснований на цьому підході розміщується тут .

Згідно з кутовим документом, ви не повинні використовувати @Component ({moduleId: module.id})

Будь ласка, почніть: https://angular.io/docs/ts/latest/guide/change-log.html

Ось відповідний текст із цієї сторінки:

Усі згадки про moduleId видалені. Видалена кулінарна книга "Компоненти відносних шляхів" (2017-03-13)

systemjs-angular-loader.jsДо рекомендованої конфігурації SystemJS ми додали новий плагін SystemJS ( ). Цей плагін динамічно перетворює "відносні до компонентів" шляхи в templateUrl та styleUrls в "абсолютні шляхи" для вас.

Ми наполегливо рекомендуємо писати лише відносні компоненти. Це єдина форма URL-адреси, обговорювана в цих документах. Вам більше не потрібно писати @Component({ moduleId: module.id }), а також не слід.

Схоже, якщо ви використовуєте "module": "es6" в tsconfig.json, вам цього не потрібно використовувати :)

Це значенняId moduleId використовується за допомогою процесів кутового відображення та компонента метаданих_розрізника для оцінки повноцінного шляху компонента до того, як компонент буде побудований.

Додавання moduleId: module.idвиправляє декілька проблем, які можуть виникнути під час створення власних кутових програм та кутових веб-додатків. Найкраще це використовувати.

Це також дозволяє компоненту шукати файли у поточному каталозі замість верхньої папки