Используйте нетипизированные компоненты A-Frame с Angular 2

Есть ли способ запустить библиотеку на Angular -CLI, которая не имеет типов?

В моем случае я пытаюсь установить k-frame для использования aframe-template-component и через , я понимаю, что мне нужно создать файл typings.d.ts, чтобы использовать его с TypeScript. Согласно этому вопросу, я пробовал разные варианты, но я не могу сгенерировать файл или импортировать его непосредственно внутри проекта.

Я также попытался запустить и установить dts-gen, но я получаю следующую ошибку:

Компонент попытался зарегистрироваться до того, как был доступен AFRAME

Это означает, что я должен сначала зарегистрировать A-кадр. Так как я застрял с течением времени, у вас есть идея о том, как решить следующую проблему? Заранее благодарю за ваши ответы!

ОТВЕТЫ

Ответ 1

В настоящий момент это непростая задача.

Я попробовал его с помощью AngularCli. Я создал новый проект с помощью ng new, и я выполнил следующие шаги:

  • ng new kframetest

  • Установите aframe и aframe-template-component, используя:

    npm install aframe aframe-template-component --save

  • Из-за обоих (zone.js и A-frame) catch attributeChangedCallback вам необходимо загрузить A-frame перед zone.js. Затем (в polyfills.ts файле) я добавил:

    import 'aframe';
import 'aframe-template-component';

    Как раз перед import 'zone.js/dist/zone';

  • Создайте простой компонент, используя образец kframe в качестве шаблона.

  • Чтобы Angular мог анализировать специальные теги html, такие как <a-entity>, вам нужно добавить CUSTOM_ELEMENTS_SCHEMA и NO_ERRORS_SCHEMA в NgModule с помощью свойства schemas:

    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]

  • Запустите приложение.

Теперь вы можете видеть, что в консоли работает A-frame:

Поместите тег A-Frame script в head HTML перед сценой, чтобы все, что для A-Frame было правильно зарегистрировано, прежде чем они будут использованы из HTML.

aframe-master.js:75646 A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #bf8b8f9)
aframe-master.js:75647 three Version: ^0.83.0
aframe-master.js:75648 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b

Но большая проблема заключается в том, что Angular пытается проанализировать HTML и он не понимает синтаксис шаблона aframe, вы получаете следующие ошибки:

Необработанное отклонение обещаний: ошибки анализа шаблона: Ошибка Parser: Неожиданный токен # в столбце 6 в [src: #boxesTemplate] в KFrameTestComponent

 </a-assets>
 <a-entity [ERROR ->]template="src: #boxesTemplate"
           data-box1color="red" data-box2color="green" data-box3color"): [email protected]:12

Связывание свойств src не используется какой-либо директивой для встроенного шаблона. Убедитесь, что имя свойства написано правильно, и все директивы указаны в @NgModule.declarations.

 </a-assets>

Я искал добавить html без Angular, чтобы разобрать его, но я не нашел...

Я попытался добавить шаблон в индекс html и, похоже, работает, но я понимаю, что это не ваша желаемая ситуация.

Вы можете получить код отсюда: https://gitlab.com/jros/angularcli-kframe