Angular 5 (Или 4): Понижение Версии Компонента Для Использования В Angularjs.

На днях возникла очень необычная задача: мне нужно было узнать, как использовать компоненты Angular в AngularJS. Кажется, задача пятиминутная, потому что.

Интернет пестрит подобными примерами, да и документация вроде бы что-нибудь Есть.

Но на деле оказалось, что не все было так солнечно и решение вопроса заняло гораздо больше времени.

В общем, счастливым сторонникам легаси-кода и просто извращенцам angular посвящается.

Сначала традиционный раздел TL DR: Хорошо быть графоманом, пример в студию Что ж, теперь ты можешь быть графоманом.

Позвольте мне начать с того, что документация Angular крайне скудна.

Так было в первой версии, так есть и сейчас.

Традиция, в конце концов.

Поэтому я взял за основу даунгрейд Эта статья .

Теперь сам код: Внимание! Для полноты картины ниже я привожу пример углового компонента без машинописного текста.

Весь дальнейший код будет в этом стиле.

Итак, собственно, компонент:

   

 let HelloComponent = function () {
 };
 
 HelloComponent.annotations = [
   new ng.core.Component({
     selector: 'hello-world',
     template: 'Hello World!'
   })
 ];
 

   

Но нет. Здесь документация дает осечку, так как приведенный в ней пример неполный.

Добавьте код AppModule:

class AppModule { } AppModule.prototype.ngDoBootstrap = function() { // do nothing }; AppModule.annotations = [ new ng.core.NgModule({ declarations: [HelloComponent], imports: [ng.upgrade.static.UpgradeModule, ng.platformBrowser.BrowserModule], entryComponents: [HelloComponent] }) ];

О ngDoBootstrap вы можете узнать из статьи, которую я упомянул выше как основу для перехода на более раннюю версию.

Итак, модуль готов, теперь нам нужно все это подключить в AngularJS:

angular.module("app", []) .

directive("helloWorld", ng.upgrade.static.downgradeComponent({component: HelloComponent}))

Затем добавьте загрузку самого Angular:

ng.platformBrowserDynamic.platformBrowserDynamic().

bootstrapModule(AppModule).

then(platformRef => { const upgrade = platformRef.injector.get(ng.upgrade.static.UpgradeModule); upgrade.bootstrap(document.body, ['app'], { strictDi: true }); });

Но этот пример тоже не работает, он что-то говорит о

Неизвестный поставщик: $$angularLazyModuleRefProvider.

Буду рад, если смогу кому-нибудь помочь.

П.

П.

С.

Еще ссылки: пишу на angular в es5 Теги: #angular #angularjs #hardcore #JavaScript #angular

• Преимущества Услуги Джейлбрейка И Разблокировки Iphone

  19 Oct, 24

• Вьетнамский Язык

  19 Oct, 24

• Плохой Год Для Ibm: Падение Прибыли, Падение Цен На Акции И Продажа Аппаратного Бизнеса

  19 Oct, 24

• «В Выгорании Виноваты Сотрудники»: Исполнительный Директор Basecamp О Признаках Трудоголической Культуры

  19 Oct, 24

• Отличный Сервис Для Скачивания Файлов

  19 Oct, 24

• Еще Раз Об Ip-Адресах, Масках Подсети И Вообще

  19 Oct, 24

• Изоляция Зубов В Стоматологии

  19 Oct, 24

• Что Произошло В Мире Финансов На 22 Неделе

  19 Oct, 24

• Жизнь И Работа После Диагноза Шизофрения

  19 Oct, 24

• «37 Сигналов» Снова В Эфире

  19 Oct, 24