как загрузить angular - js 1,5 пучка внутри VueJs приложения

Question

Я хочу интегрировать / загрузить angular js компонент (у меня есть angularJsApp.bundle. js и angularJsApp. css файл) для того же самого. Я пытаюсь создать компонент Vue, который компилирует и добавляет компонент angular в DOM.

//here is sample code 
//angular-component.vue
<template>
    <div ng-app='myApp' id="testIt"></div>
</template>

<script>
    import angular from 'angular';

    export default {
        name: 'angular-component',
        props: ['component'],
        mounted() {
            var app = angular.module('myApp',[]);

            //const el = angular.element(this.$el);
            const el = angular.element(document.querySelector('#testIt'));
            const componentTemplate = this.component.template;
            const componentCtrl = this.component.$ctrl;
            setTimeout(() => {
                el.injector().invoke(['$compile', '$rootScope', function ($compile, $rootScope) {
                    const scope = angular.extend($rootScope.$new(), {$ctrl: componentCtrl});
                    el.append($compile(componentTemplate)(scope));
                }]);
            }, 100);
        }
    };
</script>

Я буду вставлять этот компонент в мой mainComponent динамически, как

<angular-component :component="angularComponent"></angular-component>

Проблема заключается в том, что он дает ошибку ниже:

index. js: 1 Uncaught ReferenceError: require не определен в index. js: 1 (анонимный) @ index. js: 1

Наш AngularJs компонент огромен и сложен, и у нас нет времени, чтобы перестроиться в vuejs, следовательно, мы пытаемся использовать те же самые компоненты angulae js в vuejs. Пожалуйста, предложите, если у вас есть какое-либо решение этой проблемы, я приветствую любое другое решение.