В приложении Angular я видел, что @ Component имеет свойство moduleId. Что это означает?

И когда module.id нигде не определен, приложение все равно работает. Как еще может работать?

@ Компонент ({
  moduleId: module.id,
  селектор: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  директивы: [AppComponent]
});

Ответы (8)

Бета-версия Angular (начиная с версии 2-alpha.51) поддерживает относительные ресурсы для компонентов, например templateUrl и styleUrls в декораторе @ Component. .

module.id работает при использовании CommonJS. Вам не нужно беспокоиться о том, как это работает.

Помните, что: установка moduleId: module.id в декораторе @Component равна ключ здесь. Если у вас его нет, то Angular 2 будет искать для ваших файлов на корневом уровне.

Источник из Сообщение Джастина Шварценбергера, спасибо @ Pradeep Jain

Обновление от 16 сентября 2016 г .:

Если вы используете webpack для объединения, то вам не нужно module.id в декораторе. Автоматическая обработка плагинов Webpack (добавить) module.id в финальной упаковке

Согласно Angular doc, вы не должны использовать @Component ({moduleId: module.id})

Ссылка: https://angular.io/docs/ts/latest/guide/change-log.html

Вот соответствующий текст с этой страницы:

Все упоминания о moduleId удалены. Поваренная книга "Относительные пути компонентов" удалена (13.03.2017)

Мы добавили новый плагин SystemJS (systemjs-angular-loader.js) в нашу рекомендуемую конфигурацию SystemJS. Этот плагин динамически преобразует "относительные к компонентам" пути в templateUrl и styleUrls в "абсолютные пути" для вас.

Мы настоятельно рекомендуем вам писать только пути, относящиеся к компонентам. Это единственная форма URL, обсуждаемая в этих документах. Вам больше не нужно писать @ Component ({moduleId: module.id}), и вы не должны.

Это значение moduleId используется процессами отражения Angular и компонентом metadata_resolver для оценки полного пути компонента перед его построением.

Похоже, если вы используете "module": "es6" в tsconfig.json, вам не нужно использовать это:)

Добавление moduleId: module.id устраняет несколько проблем, которые могут возникнуть при создании собственных приложений angular и веб-приложений angular. Лучше всего использовать его.

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

Если вы получите машинописную ошибку, просто объявите переменную в вашем файле.

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

ОБНОВЛЕНИЕ - 8 декабря 2016 г.

Ключевое слово module доступно на узле. Итак, если вы установите @ types / node, в своем проекте у вас будет ключевое слово module, автоматически доступное в ваших файлах машинописного текста без необходимости объявления it.

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

Удачи

Обновление для (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: __ имя_модуля


Причина использования moduleId

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

В дополнение к замечательным объяснениям из echonax и Nishchit Dhanani я хочу добавить, что я действительно ненавижу заполнение компонентов с помощью module.id. Особенно, если у вас есть поддержка (Ahead-of-Time) AoT-компиляции и для реалистичного проекта это то, что вам нужно стремитесь, в метаданных вашего компонента нет места для чего-то вроде module.id.

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

JiT-скомпилированные приложения, которые используют загрузчик SystemJS и URL-адреса, относящиеся к компонентам, должны установить для свойства @Component.moduleId значение module.id. Объект модуля не определен при запуске приложения, скомпилированного с помощью AoT. Приложение не работает с ошибкой нулевой ссылки, если вы не назначите глобальное значение модуля в index.html следующим образом:


Я считаю, что наличие этой строчки в производственной версии файла index.html абсолютно неприемлемо!

Следовательно, цель состоит в том, чтобы иметь (Just-in-Time) JiT-компиляцию для разработки и поддержку AoT для производства со следующим определением метаданных компонента: (без moduleId: module.id line)

@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 relative в компонент my.component.ts пути к файлам.

Чтобы достичь всего этого, я использую решение для размещения веб-сервера (lite-server или browser-sync) на этапе разработки из нескольких источников каталогов!

bs-config.json:

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

Пожалуйста, сделайте снимок по этому адресу ответ, чтобы узнать подробности.

Примерный проект быстрого старта angular 2, основанный на этом подходе, размещен здесь.

2022 WebDevInsider