ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property

Question

I have upgraded the angular 4 application to angular 6. I have basically two projects. The parent project is packaged and referenced in the child project. The screen shot below shows parent project folder called @wtw that is referenced in the client project. The @wtw folder is under the node_modules folder. The child project was building the parent package fine when it was in Angular version 4. Ever since the upgrade has been done to 6 it complains of ts files under the wtw folder seems missing from the TypeScript compilation. Do I need to explicitly include the path in the tsConfig file.

I tried to add the following in the tsConfig but no difference

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

tsConfig file

{
  "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 file

{
  "$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"
}

Answer 1

I had same problem, after 2 hour searching i finally found solution. In my case (i'm using Angular), i just set typescript related path into tsconfig.app.json(ATTENTION: file name is not tsconfig.json). another way is set entire typescript path into include section in tsconfig.app.json file (see below example).

in tsconfig.app.json change:

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

or

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

Answer 2

In my case had a case mistake while importing the class in another component:

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

The file was called MyClass.ts (capital C) and import from ../../../Myclass (lower c).

Answer 3

05-09-2020

Angular 10

My issue was an invalid case of the component path due to copy/paste error :D

Wrong:

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

Correct:

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

Answer 4

There are three scenarios that can cause this warning.

In the explanation below I will assume a src/scripts/example.ts file which causes the warning.

Scenario 1) You include the wrong path. For example src/scts/example.ts

Scenario 2) You created the file, but you do not include it anywhere inside your project.

Scenario 3) You try to import it asynchronously using import() but you do not import it synchronously anywhere inside your project.

Angular + Webpack needs to know where the file is. When you import it synchronously in at least one of your project files that are part of an angular app (component, service, directive, pipe, module, etc) then due to that import statement angular will detect and keep in mind that this typescript module exists.

But if you create the .ts file without importing it anywhere, maybe because you want to import it dynamically later at runtime, then you need to include it at the tsconfig.app.json. NOT at tsconfig.json, this is important!

Answer 5

Appending "preserveSymlinks": true may help. It helped when a working directory path included a symlink.

For example:

{
  "$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,

Answer 6

You've done it almost correctly, but it needs some corrections:

1. You have a typo in the key "include"
2. You need to include directory under ../node_modules, not bare node_modules
3. You also need to include the project directory to include, otherwise your code won't be compiled

So the correct way would be:

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

Answer 7

I resolved the same problem by adding the zone-flags.ts in tsconfig.app.ts file section as shown below

{
  "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"
  ]
}

Answer 8

The error log asked me to include 3 ts files shown below:

It worked when I included the following in the tsconfig.app.json

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

Answer 9

I solve it in my case by removing mismatch in the filename and the reference to the file in an import statement.

Answer 10

I came across this question when i was having the following errors:

1. module.ts is missing from the typescript compilation. please make sure it is in your tsconfig via the 'files' or 'include' property

Solution:

I fixed the issue by using Dynamic import instead. (Though, dynamic import through another error, please see solution below)

2. error ts1323: dynamic import is only supported when '--module' flag is 'commonjs' or 'esnext

Solution:

Open these files: tsconfig.json, tsconfig.app.json and tsconfig.tns.json locate something like "module": "es2015" and update to "module": "esNext"

This approach work for me and i hope it will do you too

Answer 11

I got this error and discovered that Angular is case sensitive about import path

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

is different than

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

Answer 12

In my case, I had error: variables.ts is missing from the TypeScript compilation. Issue was in my import path.

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

had to merge it to

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

Answer 13

I encountered similar problem too. Posting here to help others in future. It is also something funny at the same time so I believe that it may interest others.

Background:

I was migrating from JS into TS simply by renaming a file extension.

I was already using Webpack and list of output bundles was defined inside its entry config field:

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

Problem:

Before changing the file extension everything works properly.

After changing the extension into .ts, everything works fine except this file.

./src/repository/newPeople/interviewee.js is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

I added an entry in tsconfig.json just to make sure: src/repository/**/*.ts (even if it is redundant because src/**/*.ts is already present). It did not help anyway.

Solution:

I eventually realized that the file path is actually: ./src/repository/newpeople/interviewee.js. Webpack preprocessor (Babel for my case) looks like to be case-insensitive when matching input file paths but Typescript compiler in opposition looks like to be case-sensitive.

Answer 14

I did a branch change in a git console, but I work with Visual Studio Code. After that branch change ther error occured. Restarting Visual Studio helped.

Answer 15

In my case, I changed the import reference in app.module.ts! It was a conponent inside page folder and I accidentally referenced to Page(capital P)

Answer 16

In my case I have a shared folder but most probably Angular default folder naming convention couldn't support it so I rename it by _shared that's it. is toolkit or nay other folder name conflict with the Angular check it...

Answer 17

In my case, the problem was that I had a typo on my TypeScript file name. For instance, my intention was to name the file as products.component.ts, however I have accidentally typed it as products.component.tss.

After discovering my mistake, I have renamed the file on VS Code, and I thought that was enough. However, I have kept on getting the error message ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

I tried to add things to tscofig.app.json and so on, but it didn't really work. So I removed them all and put it back to original settings.

It finally did work when I stopped the running server, and retyped the command ng serve. After the fresh compilation, everything was fine.

TL;DR 1)Your file name might be wrong. Check that. 2)If you changed your file name, but if it still doesn't work, then stop the running server and retype ng serve. It might work.

Answer 18

All was fine up until I merged a branch to my working branch which was when I got the issue.
Due to a typo, I had generated my component in the wrong folder. I solved it by moving the component to the right folder and updating all imports...that is after I got hints from some scenarios here 🙂.

Answer 19

If you checked and made sure that you don't have a typo, try running ng update, and run the application again. It worked in my case. check this issue

Answer 20

Sometimes every import seems to be correctly added and linter shows no errors which was my case.
I wasted a day trying to figure out what was causing the problem.
I solved it by importing the file like so

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

adding the scr/app made it work, and I don't know why.

Answer 21

My problem was a bit different , But I think it is related

I wanted to add a ionic page component page under another one Explorer Image

I faced the same issue . I solved it by adding a line to tsconfig.app.json

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

Answer 22

In my case the containing folder was incorrectly capitalised. It was changed to lower case however in file explorer the folder was still capitalised. When a new sub folder was added at a later stage the auto generated import path was wrong.

Answer 23

Following @Damian Czapiewski's comment to OP, a system reboot (in my case, of Windows) actually solved the problem.

After an hour fighting, this is disconcerting. : /

Answer 24

My issue was case sensitivity in the import statement. Once I noticed that a directory in the import had camel casing, and used the same case in the import, the issue was resolved.

Answer 25

remove zone-flags.ts from polyfills.ts