Question

刚开始一个Angular2项目的演示（之前没有Angular1 / AngularJS的经验。已经跟随并扩展了在线快速入门和教程，一切都很好。但是我想要使用一些组件来自一个专为AngularJS设计的库，没有任何问题！

关于AngularJS / Angular2兼容性的大多数可用信息假设您有一个AngularJS项目，您正在添加Angular2组件 - 而不是相反 - 所以我希望做的甚至不可能。到目前为止我尝试过的是一个基于Angular2快速入门的简单剥离项目，其中一个Angular2组件加载到index.html中。然后，我想将现有库中的组件（基于AngularJS）集成到此中。

我尝试使用UpgradeAdapter.upgradeNg1Component从库中创建组件并将它们直接添加到我的Angular2组件中
我尝试通过npm安装angularjs，将其在脚本标记中导入我的index.html，然后使用UpgradeAdapter.downgradeNg2Component和UpgradeAdapter.bootstrap的组合将我的Angular2加载为降级模块

这些似乎都不起作用 - 组件无法显示，浏览器控制台告诉我我有Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/angular2/upgrade Error loading http://localhost:3000/app/main.js

我现在最好的猜测是，这实际上是一个不受支持的场景，我需要一个“正确的”AngularJS应用程序才能使用Angular2的UpgradeAdapter功能。谁能证实这一点？或者我有什么愚蠢的东西在这里？

Answer 1

这是一个工作的plunkr，描述了如何混合Angular1和Angular2元素：

http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview

重点是bootstrap UpgradeAdapter上的主要内容upgrade.bootstrap(document.body, ['heroApp']);。这样，所有元素都可以在提供者（服务/工厂）和指令（组件/指令）中使用：

  api :POST, '/addresses.json', "Create a new address for user. Access Token Required"
  error :code => 401, :desc => "Unauthorized"
  error :code => 422, :desc => "Invalid params"
  param :address, Hash, :desc => "Address info", :required => true do
    param :ip_address, String, :desc => "IP address", :required => true, :missing_message => lambda { I18n.t("ip_address.required") }
    param :address_line, String, :desc => "Address Line", :required => true, :missing_message => "Address Line cant be Empty"
    param :city, String, :desc => "City", :required => true
    param :pincode, String, :desc => "pincode"
  end

这两个答案可以帮到你：

Answer 2

因此，在这种情况下的主要问题是，似乎升级组件不包含在基本角度2束的一部分中。添加后：

<script src="node_modules/angular2/bundles/upgrade.min.js"></script>

到我的index.html文件中，我看到的错误消失了。

感谢答案here让我指向了正确的方向！

使用Angular2项目

2 个答案: