将 Angular2 应用程序导入 Phoenix 框架答案

【问题标题】：Importing an Angular2 application into Phoenix-framework将 Angular2 应用程序导入 Phoenix 框架
【发布时间】：2016-04-05 11:00:06
【问题描述】：

我目前正在从事两个相关的项目。一个是基于 Phoenix 的网站和 API，而另一个是使用 Phoenix 提供的 API 的 Angular2 应用程序。我现在希望 Phoenix 项目使用 Angular2 应用程序。问题是我不知道最好的方法是什么。我对 Angular2 和 NPM 非常陌生，除了基本用法之外，我对它的实际工作方式知之甚少。以下是我能想到的解决问题的方法：

将Angular2项目放入Phoenix项目中，使其成为一个项目。我不知道如何做到这一点，但我可能会通过反复试验到达那里，因为两者都使用 Node.js，所以它应该是可行的。
将 Angular2 项目发布到 NPM，然后将其导入到 Phoenix 项目中。凤凰这边需要做多少工作？会不会和 Angular2 项目中只运行 index.html 一样？我需要某种 Angular2“外壳”吗？
将 Angular2 应用程序作为自己的东西运行，并通过 Phoenix 网站链接到它。

将其作为节点模块导入听起来是最好的方法，但它可以用于完整的应用程序，还是仅用于支持库？

【问题讨论】：

关于这个的任何更新，使用 webpack 或 brunch 与 phoenix 一起工作会非常好
我刚刚结束了通过供应商导入它们，如下面的答案所述。但是我对这个解决方案不满意，所以不接受它作为“答案”。稍后可能会在某个时候回到它。目前不是优先事项
我也一直在努力让它发挥作用，但希望我们中的一个人尽快让这成为可能

标签： node.js npm integration angular phoenix-framework

【解决方案1】：

我不确定这是否是“正确”的做法，但这是我最终所做的：

我将整个 Angular2 项目编译为 app.js、vendor.js 和 common.js，然后将它们全部移至 web/assets/。之后，我只是创建了一个新的 html 并引用了有问题的文件。

最大的挑战是找到将它们全部编译到这 3 个文件中的东西。我最终使用了精简版：https://github.com/AngularClass/angular2-webpack-starter

【讨论】：

嘿，正在做同样的事情。你会碰巧有一个带有精简版本的回购吗？

【解决方案2】：

我认为您会想要利用 brunch.io，它与 phoenix 一起提供来处理您的前端依赖项。有些骨架本质上是创建不同前端配置的模板，但我没有看到提供 angular2 的骨架。在这种情况下，我会说使用 bower 来安装你想要的 js 包，即：

bower install -S angular2

有了这个，您可以将 brunch 用作处理管道，它将处理缩小、linting 等，您仍将使用“推荐”的方法来管理 Phoenix 中的前端资产。

【讨论】：