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

标签 javascript angular angular5 tsconfig

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

我正在执行以下步骤:

  • 创建一个空的 CLI (1.6.2) 项目 (ng new test2)。该项目运行良好。
  • 修改 tsconfig.json 以包含行 allowJs": true, 以编译/捆绑 Javascript 文件
  • 在应用程序文件夹中创建一个简单的 Javascript 文件(例如,内容为 i=1 的 test.js;)。
  • 在 Angular 5 中构建失败并出现以下错误。

Angular 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 参数中指定的输出目录,并包含在最终包中。

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”。

任何人的任何想法。 问候 戴夫

最佳答案

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

开始:

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

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

打开您的应用程序中的一个 .ts 文件并进行小的更改(例如添加一个空格),然后保存该文件。

您的应用应该可以编译!

(据我所知,--watch=auto--aot 标志对于此解决方法至关重要)

关于javascript - 在 Angular 5 CLI 项目中编译 JavaScript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47964790/

相关文章:

typescript - HttpInterceptor 上的递归过多

javascript - Angular 5 在第一次编译时出现错误(错误 : TS2339),,但编译成功后一切正常

javascript - 如何通过递归减少传播

javascript - 动态创建元素并添加 onclick 事件不起作用

angular - 您将如何使用 Angular 2 管理用户角色和权限

javascript - 将元素的属性传递给 Angular 4/5 中的函数

javascript - Xpath获取所有带有内部文本的链接

JavaScript 相当于 Python 的 oauth2client 对 Google 提醒的 POST 请求

asp.net-web-api2 - Angular 2 - 将文件发布到 Web API

javascript - 访问 @CanActivate 钩子(Hook)中的服务