В приложении Angular я видел, что у @Component
него есть свойство moduleId
. Что это означает?
И когда module.id
нигде не определено, приложение все еще работает. Как это все еще может работать?
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
angular
systemjs
angular2-components
Нищит Дханани
источник
источник
Ответы:
Бета-версия Angular (начиная с версии 2-alpha.51) поддерживает относительные ресурсы для компонентов, таких как templateUrl и styleUrls в
@Component
декораторе.module.id
работает при использовании CommonJS. Вам не нужно беспокоиться о том, как это работает.Источник из поста Джастина Шварценбергера , благодаря @Pradeep Jain
Обновление от 16 сентября 2016 года:
источник
Обновление для (2017-03-13) :
Источник: https://angular.io/docs/ts/latest/guide/change-log.html
Определение:
moduleId
параметр внутри@Component
аннотации принимаетstring
значение, которое является;« Идентификатор модуля, который содержит компонент ».
Использование CommonJS:
module.id
,Использование SystemJS:
__moduleName
Причина использования
moduleId
:moduleId
используется для определения относительных путей для ваших таблиц стилей и шаблонов, как сказано в документации.ссылка (старая): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
ссылка: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
Пример использования:
Структура папки:
Без module.id :
С module.id :
tsconfig.json:
источник
map
ключами в вашей конфигурации. Какapp
.templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']
Если вы получили
typescript error
, простоdeclare
переменная в вашем файле.UPDATE - December 08, 2016
module
Ключевое слово доступно наnode
. Поэтому, если вы установите@types/node
в своем проекте, у вас будетmodule
автоматически доступное ключевое слово в ваших машинописных файлах без необходимости вdeclare
этом.npm install -D @types/node
В зависимости от вашей конфигурации вам, возможно, придется включить это в ваш
tsconfig.json
файл, чтобы получить инструментарий :Удачи
источник
ng build --prod --aot
работу, выполнивnpm install -D @types/node
долгое время возиться :)moduleId: 'module.id'
(обратите внимание на одинарные кавычки вокруг module.id)module.id
в качестве строки. Если это сработало, что-то кажется неправильным. Возможно, вам придется исследовать это дальше.В дополнение к отличным объяснениям от
echonax
иNishchit Dhanani
я хочу добавить, что я действительно ненавижу заполнение компонентовmodule.id
. Особенно, если у вас есть поддержка AoT-компиляции (Ahead-of-Time) и для реалистичного проекта, к которому вы должны стремиться,module.id
в метаданных вашего компонента нет места .Из документов :
Я думаю, что наличие этой строки в рабочей версии
index.html
файла абсолютно не приемлемо!Поэтому цель состоит в том, чтобы иметь (Just-in-Time) JiT-компиляцию для разработки и AoT-поддержку для производства со следующим определением метаданных компонента: (без
moduleId: module.id
строки)В то же время я хотел бы разместить стили, например
my.component.css
файлы и шаблоны,my.component.html
относительноmy.component.ts
путей к файлам компонентов .Чтобы добиться всего этого, я использую решение для размещения веб-сервера (lite-server или browser-sync) на этапе разработки из нескольких источников каталогов!
bs-config.json
:Пожалуйста, примите этот ответ для меня детали.
Образцовый угловой проект быстрого запуска, основанный на этом подходе, размещен здесь .
источник
Согласно 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
устраняет несколько проблем, которые могут возникнуть при создании приложений с нативным углом и веб-приложений с угловым форматом. Лучше всего использовать его.Это также позволяет компоненту искать файлы в текущем каталоге, а не в верхней папке.
источник