在Angular 5 CLI项目中编译JavaScript文件

Question

我在Angular 5.0.0 CLI项目中编译（包括）JavaScript文件时遇到问题。

我正在执行以下步骤：

• 创建一个空的CLI（1.6.2）项目（ng new test2）。该项目运行良好。
• 修改tsconfig.json以包含行allowJs“：true，以编译/捆绑Javascript文件
• 在app文件夹中创建一个简单的Javascript文件（例如，内容为i = 1的test.js;）。
• 在Angular 5中构建失败，错误如下。

角度5错误

"ERROR in error TS5055: Cannot write file 
'/Users/user/Documents/workspace/test2/src/app/test.js' because it would 
overwrite input file.  Adding a tsconfig.json file will help organize 
projects that contain both TypeScript and JavaScript files. Learn more at 
https://aka.ms/tsconfig."

在Angular 4中，JS文件被编译到outDir参数中指定的输出目录并包含在最终的bundle中。

ng --version提供以下内容：

Angular CLI: 1.6.2
Node: 6.10.0
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

outDir在tsconfig.json中设置为“./dist/out-tsc”，在tsconfig.app.json中设置为“../out-tsc/app”。

任何想法的人。关心戴夫

Answer 1

我最近遇到了这个问题，很高兴地报告我认为我有一个解决方案！

开始：

1. 将Angular升级到最新版本（5.1）。
2. 将TypeScript升级到最新支持的版本（4.*，截至撰写本文时 - 不是5.*）
3. 您可能需要在配置文件中使用allowJs: true。

运行ng serve --aot或ng build --watch=auto --aot您应该看到上述错误并且无法访问您的站点。

打开作为应用程序一部分的.ts文件之一并进行小的更改（例如添加单个空格），然后保存文件。

你的应用应该编译！

（据我所知，--watch=auto和--aot标志对于这种解决方法至关重要）

Answer 2

错误出现在提供的错误消息中。

“ERROR in error TS5055：无法写入文件'**/*.js'，因为它会覆盖输入文件。添加tsconfig.json文件将有助于组织包含TypeScript和JavaScript文件的项目。了解更多信息，请访问https://aka.ms/tsconfig。”

您的构建过程似乎正在尝试将*.ts文件编译为*.js文件，但由于该文件已存在，因此无法写入该文件。

在构建过程之前，只需先从可分发目录中清除构建文件。

---

忠告 您似乎正在将*.js文件直接转储到src/中，这可能是混乱且不可取的。

更好的解决方案是生成包含已编译构建文件的/dist目录。

Answer 3

我已经针对在https://github.com/angular/angular-cli/issues/8991#issuecomment-353889755修复的角度cli PR8930提出了一个错误