Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

Мы добавили новый плагин SystemJS (systemjs- angular -loader.js) в нашу рекомендуемую конфигурацию SystemJS. Этот плагин динамически преобразует пути" компонент-относительные "в шаблонах url и 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

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

Ответ 3

Если вы получите 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 ключевое слово автоматически доступное в ваших файлах typescript без необходимости 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
   ...
})

Удача

Ответ 4

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

SRC folder 

Но иногда нам приходится указывать относительный путь, чтобы избежать столкновения имен, поэтому нам нужно использовать свойство аннотации компонента с именем "module.id". Используя этот компонент, вы просматриваете текущий путь к папке, а не от корневого уровня, и это также упростить повторное использование наших компонентов в других приложениях.

Например, по умолчанию:

@component({
....
// from root level path without module ID
TemplateURL : './abc/def/ghi/jkl.html' 
....
})

С помощью id модуля

@component({
.....
//relative path
TemplateUrl : 'jkl.html',
ModuleId : module.id

// Same in case of CSS path
..... 
})

Существует несколько недостатков использования абсолютных путей. С течением времени они усложняют настройку структуры папок по мере роста приложения. Они затрудняют повторное использование наших компонентов в других приложениях.

И что нам делать? Вместо этого мы можем использовать подход относительного пути компонентов.

Ответ 5

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

Из Docs:

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

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

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

Следовательно, цель состоит в том, чтобы иметь JiT-компиляцию (Just-in-Time) для разработки и поддержку 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 relative в пути к файлам my.component.ts.

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

bs-config.json:

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

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

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

Ответ 6

В соответствии с 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. Этот плагин динамически преобразует пути "компонент-относительные" в шаблонах url и styleUrls к "абсолютным путям" для вас.

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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