Как внедрить автономное приложение с угловым 2 внутри приложения с угловым 1

Примечание: Я НЕ обновляю приложение ng1. Я пытаюсь заставить приложение ng1 и ng2 жить бок о бок (или, скорее, вложенный).Как внедрить автономное приложение с угловым 2 внутри приложения с угловым 1

У нас есть примерно следующий HTML, показывающий, как мы пытаемся использовать две рамку на странице сразу:

Угловые 1: Вся страница контролируются Угловой 1. Но мы использовали ng- non-bindable, чтобы сообщить ng1-приложению игнорировать div в середине страницы.
Угловые 2: Только элемент в середине страницы должен быть бутстрапированным в Угловом 2.

<html ng-app="app"> 
 
    <head></head> 
 
    <body ng-controller="appController"> 
 
    <header>Angular 1 Stuff</header> 
 

 
    <div ng-non-bindable> 
 
     <ng2-app></ng2-app> 
 
     <script src="bundle.js"/> 
 
     <!-- bundle.js is the output from webpack and should bootstrap <ng2-app> --> 
 
    </div> 
 

 
    <footer>Angular 1 Stuff</footer> 
 
    </body> 
 
</html>

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

Когда мы запускаем его после интеграции, мы получаем сообщение о том, что существует конфликт с глобальным методом require.

Применение ng1 является использованием requirejs
The NG2 пучка является типичным выходом из webpack (с использованием typescript-loader)

Оба requirejs и WebPack использования require, но в разных контекстов.

Как разрешить конфликт?

Если вам интересно, почему мы делаем это так: мы пытаемся загрузить новое приложение на странице, которая также имеет приложение с угловым 1. Наша компания имеет глобальный верхний/нижний колонтитул и содержимое каждой страницы в виде отдельных развернутых приложений. Это позволяет командам работать на страницах как самостоятельные проекты. Одна команда хочет попробовать использовать Angular 2 для своего нового приложения на одной из наших новых страниц.

источник

2016-01-15 Tim Kindberg

это не представляется возможным гнездо два угловых 1 приложение внутри друг друга, я могу только предположить, что это будет сложно или невозможно, чтобы попытаться сделать это с угловым 2. При этом, угловой 1 не используйте 'requirejs', поэтому, если конфликт с этой библиотекой, то это имеет какое-то отношение к тому, как было написано ваше угловое приложение 1, и не имеет никакого отношения к самому угловому. – Claies

Этот вопрос сам может поднять тысячи других вопросов. Совсем нелегко ответить на этот вопрос так, потому что вы говорите о двух основных архитектурах на основе MVC (Angular1 и Angular2) вместе.

Посмотрите, как использовать угловое2 в угловом1. Успешно я могу загрузить приложение angular2 в приложении angular1.

Очень важно знать, как вы внедрили свою угловую архитектуру. Но если вы angular1 & 2 парень, вы, вероятно, найдете способы по своему усмотрению.

Angular2 App within Angular1 App

Index.HTML

<body ng-app="app" ng-controller="appController"> 
    <header>{{myValue}}</header> //belongs to angular1 

    <div ng-non-bindable> 
     <my-app></my-app> 

     <!-- angular 2 app bootstrapping --> 
    </div> 

    <footer>Angular 1 Stuff</footer> 

    <script> 
     var app=angular.module("app",[]); 

     app.controller("appController",function($scope){ 
      $scope.myValue="Nyks"; 
     }) 
    </script>

источник

2016-01-15 09:28:27 micronyks

Итак, если вы получили это на работу, я думаю, что проблема связана с тем, как мы использовали requirejs и как наш выход Angular 2 также имеет доступ к глобальной функции require. –

Я не понимаю, почему вы подчеркиваете требования. Я считаю, что ваш A1 используется, но что он должен делать с A2? Требование не имеет ничего общего с угловым2. – micronyks

Поскольку мое оригинальное приложение ng1 использует requirejs, и мое новое приложение ng2 использует webpack/typescript для связывания JS. И requirejs, и полученный пакет зависят от глобальной функции require, но они используют функцию по-разному, поэтому конфликтуют. –

Как внедрить автономное приложение с угловым 2 внутри приложения с угловым 1

ответ

Смежные вопросы