ts从TypeScript编译中丢失。请通过“文件”或“包含”属性确保它位于您的tsconfig中

时间：2018-09-21 10:15:30

标签： angular typescript

我已经将angular 4应用程序升级到angular6。我基本上有两个项目。父项目被打包并在子项目中引用。下面的屏幕快照显示了在客户端项目中引用的名为@wtw的父项目文件夹。 @wtw文件夹位于node_modules文件夹下。  子项目在Angular版本4中可以很好地构建父包。自从升级到6后，它就抱怨TypeScript编译中缺少wtw文件夹下的ts文件。我是否需要在tsConfig文件中明确包含路径。

我试图在tsConfig中添加以下内容，但没有区别

"inlcude": [
    "node_modules/@wtw/**/*"
  ]

enter image description here

tsConfig文件

{
  "compileOnSave": false,

  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "type-definition"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "inlcude": [
    "node_modules/@wtw/**/*"
  ]
}

angular.json文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "irm",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../wwwroot",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/favicon.png",
              "src/web.config",
              {
                "glob": "**/*",
                "input": "../node_modules/@wtw/platform/assets",
                "output": "./assets"
              },
              {
                "glob": "**/*",
                "input": "../assets",
                "output": "./assets"
              }
            ],
            "styles": [
              "../IRM.ClientSide/node_modules/@wtw/platform/styling/platform.scss"
            ],
            "scripts": [
              "../IRM.ClientSide/node_modules/jsoneditor/dist/jsoneditor.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "environments/environment.ts",
                  "with": "environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "test.ts",
            "polyfills": "polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**/*",
              "**/src/app/api/**/*",
              "**/src/polyfills.ts",
              "**/node_modules/**/*",
              "**/src/app/api/**/*",
              "**/src/polyfills.ts",
              "**/node_modules/**/*",
              "**/src/app/api/**/*",
              "**/src/polyfills.ts"
            ]
          }
        }
      }
    },
    "pdf": {
      "root": "src",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "irm",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../pdf",
            "index": "pdf.html",
            "main": "pdf.ts",
            "polyfills": "polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "assets",
              "favicon.ico",
              {
                "glob": "**/*",
                "input": "../node_modules/@wtw/platform/assets",
                "output": "./assets"
              }
            ],
            "styles": [
              "./styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "environments/environment.ts",
                  "with": "environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "test.ts",
            "polyfills": "polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**/*",
              "**/src/app/api/**/*",
              "**/src/polyfills.ts",
              "**/node_modules/**/*",
              "**/src/app/api/**/*",
              "**/src/polyfills.ts",
              "**/node_modules/**/*",
              "**/src/app/api/**/*",
              "**/src/polyfills.ts"
            ]
          }
        }
      }
    },
    "app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "app"
}

24 个答案:

答案 0 :(得分：9)

在我的案例中，将类导入另一个组件时遇到了案例错误：

import { MyClass } from '../../../shared/models/Myclass';

该文件名为MyClass.ts（大写C），并从../../../Myclass（低c）导入。

答案 1 :(得分：7)

2020年9月9日

角度10

我的问题是由于复制/粘贴错误导致组件路径无效：D

错误：

import { RegisterComponent } from './Register/Register.component';

正确：

import { RegisterComponent } from './register/register.component';

答案 2 :(得分：5)

附加 "preserveSymlinks": true 可能会有所帮助。当 working directory 路径包含符号链接时，它会有所帮助。

例如：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "irm",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../wwwroot",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "preserveSymlinks": true,

答案 3 :(得分：5)

我通过在tsconfig.app.ts文件部分中添加zone-flags.ts来解决相同的问题，如下所示

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "angularCompilerOptions": {
    "enableIvy": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/zone-flags.ts", <--- This resolved
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

答案 4 :(得分：3)

三种情况都可能导致此警告。

在下面的说明中，我将假设一个引起警告的src/scripts/example.ts文件。

场景1）您输入的路径错误。例如src/scts/example.ts

方案2），您创建了文件，但没有在项目中的任何地方添加文件。

方案3），您尝试使用import（）异步导入它，但没有在项目内部的任何地方同步导入它。

Angular + Webpack需要知道文件在哪里。当您在至少一个您的项目文件中同步导入它时，它们是angular应用程序的一部分（组件，服务，指令，管道，模块等），由于该导入语句，angular将检测并请记住，这个打字稿模块存在。

但是，如果创建.ts文件时没有将其导入任何地方，可能是因为您想稍后在运行时动态导入它，那么您需要将其包含在 tsconfig.app.json。不在tsconfig.json上，这很重要！

答案 5 :(得分：3)

错误日志要求我包含以下3个ts文件：

当我在tsconfig.app.json中包含以下内容时，它起作用了

"files": [
   ....,
   "src/environments/environment.ts",
   "src/app/app.module.ts",
   "src/app/app.component.ts"
],

答案 6 :(得分：1)

我遇到了同样的问题，经过2个小时的搜索，我终于找到了解决方法。就我而言（我使用Angular），我只是将与打字稿相关的路径设置为tsconfig.app.json（注意：文件名不是tsconfig.json）。另一种方法是将整个打字稿路径设置到include文件的tsconfig.app.json部分中（请参见下面的示例）。

在tsconfig.app.json中进行

更改：

"files": [ ..., "node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxbargauge.ts" ], 或

"include": [ ..., "node_modules/jqwidgets-scripts/jqwidgets-ts/**/*.ts" ],

答案 7 :(得分：1)

我收到此错误，发现 Angular对导入路径区分大小写 

import { MyComponent} from '../example/my-component';

不同于

import { MyComponent } from '../Example/my-component';

答案 8 :(得分：1)

就我而言，我有一个错误：TypeScript编译中缺少variables.ts。 问题出在我的导入路径上。

import {  
  ClaimService,
} from './shared/data-access/claimDesk/generated';
import { BASE_PATH as CLAIMDESK_BASE_PATH } from './shared/data-access/claimdesk/generated/variables';

必须将其合并到

import {
  BASE_PATH as CLAIMDESK_BASE_PATH,
  ClaimService,
} from './shared/data-access/claimDesk/generated';

答案 9 :(得分：0)

就我而言，问题是我在TypeScript文件名上有错字。例如，我的意图是将文件命名为products.component.ts，但是我不小心将其键入为products.component.tss。

发现我的错误后，我已在VS Code上重命名了文件，我认为就足够了。但是，我一直收到错误消息ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property。

我尝试将内容添加到tscofig.app.json中，依此类推，但这并没有真正起作用。因此，我将它们全部删除，并重新设置为原始设置。

当我停止正在运行的服务器并重新输入命令ng serve时，它终于工作了。重新编译后，一切都很好。

TL; DR 1）您的文件名可能不正确。检查一下。 2）如果您更改了文件名，但是仍然不起作用，请停止正在运行的服务器并重新输入ng serve。可能有用。

答案 10 :(得分：0)

我的问题是导入语句中的区分大小写。一旦我注意到导入中的目录有驼峰式大小写，并在导入中使用相同的大小写，问题就解决了。

答案 11 :(得分：0)

根据@Damian Czapiewski 对 OP 的评论，系统重新启动（在我的情况下是 Windows）实际上解决了问题。

经过一个小时的战斗，这令人不安。 ：/

答案 12 :(得分：0)

在我的情况下，包含文件夹的大小写不正确。它已更改为小写，但在文件资源管理器中，该文件夹仍然 大写。稍后添加新的子文件夹时，自动生成的导入路径错误。

答案 13 :(得分：0)

我的问题有点不同，但我认为是相关的

我想在另一个页面下添加一个ionic页面组件页面 Explorer Image

我遇到了同样的问题。我通过在 tsconfig.app.json 中添加一行来解决它


  "include": [
    "src/**/*.d.ts",
    **"src/**/**/*.d.ts"**
  ]

答案 14 :(得分：0)

有时似乎正确添加了每个导入，并且 linter 没有显示任何错误，这就是我的情况。
我浪费了一天试图找出导致问题的原因。
我通过像这样导入文件来解决它

import { Something } from 'src/app/path_to_your_file';

添加 scr/app 使它起作用，但我不知道为什么。

答案 15 :(得分：0)

如果您检查并确定没有输入错误，请尝试运行 ng update，然后再次运行该应用程序。它在我的情况下有效。 check this issue

答案 16 :(得分：0)

一切顺利，直到我将一个分支合并到我遇到问题的工作分支中。
由于输入错误，我在错误的文件夹中生成了我的组件。 我将组件移到正确的文件夹并更新了所有导入文件，从而解决了该问题……那是在我从某些情况下获得提示之后。?

答案 17 :(得分：0)

您几乎正确地完成了此操作，但需要进行一些更正：

  1. 键"include"中有错字
  2. 您需要将目录包括在../node_modules下，而不是裸露的node_modules
  3. 您还需要将项目目录包含到include中，否则您的代码将无法编译

所以正确的方法是：

"include": [
    ".",
    "../node_modules/@wtw/**/*"
]

答案 18 :(得分：0)

在我的情况下，我有一个共享文件夹，但是很可能Angular默认文件夹命名约定不支持它，所以我用_shared重命名了。是工具箱还是其他文件夹名称与Angular冲突，请检查它...

答案 19 :(得分：0)

就我而言，我更改了app.module.ts中的导入引用！这是页面文件夹内部的组件，我不小心引用了Page（大写P）

答案 20 :(得分：0)

我在git控制台中进行了分支更改，但是我使用Visual Studio Code。在该分支更改之后，发生了错误。重新启动Visual Studio有帮助。

答案 21 :(得分：0)

我也遇到了类似的问题。在这里发布以帮助将来的其他人。同时这也很有趣，所以我相信其他人可能会感兴趣。

背景：

我只是通过重命名文件扩展名而从JS迁移到TS。

我已经在使用Webpack，并且在其entry配置字段中定义了输出包的列表：

entry: {
    repository: [
       "./src/repository/newPeople/interviewee.js"
    ],
    components: glob.sync("./src/common/**/*.ts")
}

问题：

在更改文件扩展名之前，一切正常。

将扩展名更改为.ts后，除此文件外，其他所有东西都正常运行。

  

./ src / repository / newPeople / interviewee.js从TypeScript编译中丢失。请通过“文件”或“包含”属性确保它在您的tsconfig中。

我在tsconfig.json中添加了一个条目，以确保：src/repository/**/*.ts（即使多余，因为已经存在src/**/*.ts）。无论如何都没有帮助。

解决方案：

我最终意识到文件路径实际上是：./src/repository/newpeople/interviewee.js。 匹配输入文件路径时，Webpack预处理程序（对于我的情况是Babel）看起来不区分大小写，但是相反的Typescript编译器看起来区分大小写。

答案 22 :(得分：0)

我遇到以下错误时遇到了这个问题：

  1. openModal({ 'title': 'Edit Firehouse', 'firehouseShow': true }) // or openModal({ 'title': 'Add Firehouse', 'firehouseShow': true })

解决方案：

我改用async openModal(title) { const modal = await this.modalController.create({ component: ModalComponent, componentProps : { 'title': title, 'firehouseShow': true } }); return await modal.present(); } 解决了该问题。 （不过，通过另一个错误进行动态导入，请参见下面的解决方案）

  1. openModal('Edit Firehouse') // or openModal('Add Firehouse')

解决方案：

打开以下文件：module.ts is missing from the typescript compilation. please make sure it is in your tsconfig via the 'files' or 'include' property，Dynamic import和error ts1323: dynamic import is only supported when '--module' flag is 'commonjs' or 'esnext找到类似tsconfig.json的文件并更新为tsconfig.app.json

这种方法对我有用，我希望它也会对您有用

答案 23 :(得分：0)

在我的情况下，我通过消除导入语句中文件名和对该文件的引用的不匹配来解决此问题。

相关问题
最新问题