使用 Angular2 项目中的 AngularJS (Angular1) 模块答案

【问题标题】：Use AngularJS (Angular1) module from Angular2 project使用 Angular2 项目中的 AngularJS (Angular1) 模块
【发布时间】：2016-05-16 04:58:55
【问题描述】：

刚刚开始了一个演示 Angular2 项目（以前没有使用 Angular1/AngularJS 的经验。已经从在线快速入门和教程中进行了扩展和扩展，一切都很好。但是我现在想使用一些组件一个专为 AngularJS 设计的库，问题无穷无尽！

关于 AngularJS/Angular2 兼容性的大部分可用信息都假设您有一个 AngularJS 项目，您正在向其中添加 Angular2 组件 - 而不是相反 - 所以我希望做的事情甚至可能是不可能的。到目前为止，我所尝试的涉及一个基于 Angular2 快速入门的简单剥离项目，其中包含一个加载到 index.html 中的 Angular2 组件。然后，我想将现有库（基于 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 功能。谁能证实这一点？还是我在这里遗漏了什么愚蠢的东西？

【问题讨论】：

@Bryan 谢谢 - 我的理解是，对于 AngularJS/Angular2 混合应用程序，您不能使用ng-app 标签，而必须使用@ 987654328@?

标签： angularjs angular

【解决方案1】：

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

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

重要的一点是bootstrap 你的主要组件在UpgradeAdapter 上。这样，所有元素都可以在提供者（服务/工厂）和指令（组件/指令）中使用：

upgrade.bootstrap(document.body, ['heroApp']);

这两个答案可以帮助你：

【讨论】：

【解决方案2】：

因此，在这种情况下，主要问题是升级组件似乎没有包含在基本的 Angular 2 捆绑包中。添加后：

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

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

感谢here 的回答为我指明了正确的方向！

【讨论】：

直接链接到您的 node_modules 文件夹是一个糟糕的解决方案。部署解决方案后，该文件夹不再存在（假设您正在使用某种捆绑设置）