Cordova + Angular 4 + Typescript 模板样例

Question

我正在使用Angular 4开发Web Progressive应用程序。这个应用程序需要作为混合应用程序封装在Apache Cordova中，以构建适用于Android和iOS平台的应用程序。

我正在寻找适用于Cordova + Angular 4的工作脚手架模板。 Cordova将使用www文件夹中的Web应用程序，而Angular 4将使用src文件夹中的Web应用程序。如何将这两个应用程序合并在一起运行？Angular的'ng serve'也应该能够工作吗？

- NavCore

---

如果您使用 Angular CLI 生成应用程序（强烈建议），您可以在 .angular-cli.json 中将 apps->root 从 'src' 更改为 'www'。 - Z. Bagley

谢谢。我在.angular-cli.json文件中找到了应用程序：[“root”]，并将其从'src'更改为'www'，因为Cordova使用'www'应用程序文件夹。 - NavCore

现在，当Cordova和Angular都使用相同的“www”文件夹时，我可以使用“ng serve”启动ng服务器并在“localhost:4200”中查看我的应用程序。但是，当我构建Cordova应用程序时，它会从“www”启动“index.html”，但它无法识别<app-root></app-root>（Angular指令）以加载Angular。这在Cordova中可能吗？ - NavCore

对于 Cordova，我并不熟悉，无法为您提供指导，抱歉。 - Z. Bagley

Answer 1

我终于成功解决了我的问题。

• 我们需要将 Cordova 的"www"文件夹和 Angular 的"src"文件夹合并到一个名为"src"的文件夹中，其中包含 Angular 应用程序。
• package.json也需要合并以适应 Cordova 和 Angular。
• 然后，（感谢 Gangadhar Jannu 的提示），我们需要在“.angular-cli.json”中更改属性"outDir"为"www"，因为 Cordova 使用该文件夹来构建他们的应用程序。
• 然后，我们需要使用 CLI 编译 Angular 应用程序："ng build --prod"。
• 最后构建 Cordova 应用程序：cordova build android|browser|ios|..

这是一个可行的样板：

https://github.com/NavCore/ngCordova

- NavCore

---

一直在苦苦挣扎。我在这里提问：https://stackoverflow.com/questions/49594706/using-angular-with-cordova 我一开始使用的是 ng build，但是使用 ng build --prod 解决了问题。 - krv

Answer 2

如果您想更改ng cli的输出目录，可以在.angular-cli.json中配置outDir属性，如下所示：

  "outDir": "../public",

然后您可以使用ng build命令在之前指定的outDir中构建Angular应用程序。

- Buddybear

---

那是一个输出目录，我需要项目目录。它在同一个.angular-cli.json文件中 -> apps: ["root"]属性!! - NavCore

感谢Gangadhar Jannu的回答。是的，那是我问题的部分答案。我们需要使用“outDir”作为“www”文件夹来编译angular，因为Cordova使用该文件夹构建应用程序。 - NavCore