如何在 Angular 1 应用程序中嵌入独立的 Angular 2 应用程序

Question

注意：我不是在升级 ng1 应用程序。我正在尝试让 ng1 和 ng2 应用程序并排（或嵌套）。

我们大致有以下 html 显示我们如何尝试同时在页面上使用两个框架：

Angular 1：整个页面由Angular1控制。但是我们已经使用ng-non-bindable告诉ng1应用忽略中间的div页面的。
Angular 2：只有页面中间的元素应该 bootstrapped 为 Angular 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
ng2 包是 webpack 的典型输出（使用 typescript-loader）

requirejs 和 webpack 都使用 require 但在不同的上下文中。

如何解决冲突？

如果您对我们这样做的原因感到好奇：我们正在尝试 bootstrap 一个页面上的新应用程序，该页面也有一个 Angular 1 个应用程序。我们公司有全局 header/footer 和每个页面的内容作为单独部署的应用程序。这允许团队将页面作为独立项目来处理。一个团队想在我们的一个新页面上尝试使用 Angular 2 作为他们的新应用程序。

Answer 1

这个问题本身可以引发上千个其他问题questions.It要如此全面地回答这个问题一点也不容易，因为您同时讨论了两种主要的基于 MVC 的架构（Angular1 和 Angular2）。

查看如何在 angular1 中使用 angular2。成功地，我可以 bootstrap angular1 应用程序中的 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>

如何在 Angular 1 应用程序中嵌入独立的 Angular 2 应用程序

How to embed a self-contained Angular 2 application inside of an Angular 1 application

integration

angularjs

angular