如何通过在单独的文件夹中构建 JS 文件并查看文件来运行 Angular 4 应用程序？答案

【问题标题】：How to run the Angular 4 Application by building the JS files in a separate folder and watching the files?如何通过在单独的文件夹中构建 JS 文件并查看文件来运行 Angular 4 应用程序？
【发布时间】：2017-08-15 23:08:20
【问题描述】：

我正在尝试学习 Angular 4。在参考 Angular 教程时，我能够运行应用程序，但是在运行“npm start”时，系统会在同一个 src 文件夹中创建构建文件。在这里，我试图获取在名为 build 的单独文件夹中创建的 JS 文件，例如“src/app/build”并在那里运行它。有人可以帮忙解决这个问题吗？提前致谢。 https://angular.io/tutorial/toh-pt6

【问题讨论】：

你的 IDE 是什么？

标签： javascript angular typescript angular2-template

【解决方案1】：

使用 AngularCLI 启动一个 Angular 项目并使用 ng serve 它简化了一切！

【讨论】：

感谢您的回复。我这样做了，但是 *.js 文件是在 src/app 路径中生成的，它与 *.ts 文件混合在一起。我正在尝试获取 src/app/build 中的构建文件。我正在 Mac 终端中运行代码以获取您的信息。
将这些文件混合起来完全没问题，如果存在 .ts（VS Code、Jetbrains IDE、Atom），您可以使用具有 optlon 的 IDE 隐藏 .js 文件（VS Code、Jetbrains IDE、Atom）我不知道有一种方法可以分离这些文件

【解决方案2】：

这是您的IDE 造成的混乱，因为它是自动将.ts 转换为.js。你必须禁用它。

如果您使用JetBrains IDE，您必须确保Enable TypeScript compiler 在Preferences > Languages & Frameworks > TypeScript 中被禁用。

如果是Atom，您需要在tsconfig.json 中设置compileOnSave: false

VScode 不会自动转译 .ts 文件，除非您自己有 watcher/task runner manually setup

但通常我们将angular cli 用于任何角度项目

npm install -g @angular/cli
ng new my-proj
cd my-proj
ng serve

【讨论】：

这部分回答了我的问题，但我相信我的问题集中在观察者/任务运行者部分。我已经开始研究“gulp build”，并且在 tsconfig.json 中使用“outDir”更新“编译器选项 {}”将证明可以解决这个问题。我会发布我发现的内容。但无论如何，谢谢你的转身。