Angular - Что означает модуль.id в компоненте?

221

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

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

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});
Нищит Дханани
источник
7
лучший художественный материал, найденный до сих пор, для того же schwarty.com/2015/12/22/…
Pardeep Jain

Ответы:

182

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

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

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

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

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

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

Нищит Дханани
источник
Пожалуйста, взгляните на этот вопрос, надеюсь, вы мне поможете. stackoverflow.com/q/36451917/5043867
Пардип Джейн
29
+1 за ссылку в вебпакете, я понятия не имел, почему что-то ломалось, когда они должны были работать, и работало, когда они должны были ломаться ...
Жоао Мендес,
9
не могу придумать более интуитивную вещь для изобретения
khusrav
15
Как это объясняет, что такое module.id?
gyozo kudor
1
@gyozokudor Если у вас его нет, Angular 2 будет искать ваши файлы на корневом уровне.
Nishchit Dhanani
89

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

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
})
EKO
источник
8
Но как это работает, где ссылка на module.id
Nishchit Dhanani
1
@NishchitDhanani в этом нет необходимости, но я предлагаю проверить github.com/angular/angular/issues/6053, он сопоставляется с вашими mapключами в вашей конфигурации. Как app.
Эко
1
Ссылка echonax на документы в настоящее время не работает, хотя это ссылка на странице компонента Angular.io. Попробуйте: angular.io/docs/js/latest/api/core/index/…
Джон Панкович
1
Похоже, что вы забыли подкаталог 'components' корневого каталога 'app' в подходе без module.id, не так ли? Я думаю, что это должно быть: templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Ilker Cat
23

Если вы получили 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
   ...
})

Удачи

Акаша
источник
1
так много! наконец, я получил свою ng build --prod --aotработу, выполнив npm install -D @types/nodeдолгое время возиться :)
Anand Rockzz
еще одна вещь, которую я сделал moduleId: 'module.id'(обратите внимание на одинарные кавычки вокруг module.id)
Ананд Рокц
@AnandRockzz Я рад, что вы нашли этот пост полезным. Я не думаю, что вам нужно добавить module.idв качестве строки. Если это сработало, что-то кажется неправильным. Возможно, вам придется исследовать это дальше.
Акаш
3

В дополнение к отличным объяснениям от 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", "."]
}

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

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

Евгений Бобкин
источник
3

Согласно 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 }), и вы не должны.

Прасант Бендра
источник
1
Я также добавлю это к моему ответу в качестве отказа от ответственности, спасибо за обновление.
EKO
1

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

Стеффан
источник
не перейдет ли он в ES6, если мы это сделаем?
Акаш
0

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

Кришна Ганеривал
источник
-2

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

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

mast3rd3mon
источник