В приложении 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декоратор. Автоматически обрабатывать плагины для веб-пакетов (добавить их) 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значение, которое является;

« Идентификатор модуля, который содержит компонент ».

Использование CommonJS: module.id,

Использование SystemJS: __moduleName

moduleId используется для определения относительных путей для ваших таблиц стилей и шаблонов, как сказано в документации.

Идентификатор модуля, который содержит компонент. Необходимо иметь возможность разрешать относительные 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

Без 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-компиляции (Ahead-of-Time) и для реалистичного проекта, к которому вы должны стремиться, module.idв метаданных вашего компонента нет места .

Из документов :

JiT-скомпилированные приложения, которые используют SystemJSзагрузчик и относящиеся к компоненту URL, должны установить @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-server или browser-sync) на этапе разработки из нескольких источников каталогов!

bs-config.json:

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

Пожалуйста, примите этот ответ для меня детали.

Образцовый угловой проект быстрого запуска, основанный на этом подходе, размещен здесь .

Согласно Angular doc, вы не должны использовать @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устраняет несколько проблем, которые могут возникнуть при создании приложений с нативным углом и веб-приложений с угловым форматом. Лучше всего использовать его.

Это также позволяет компоненту искать файлы в текущем каталоге, а не в верхней папке.