66

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/**/*"
  ]

enter image description here

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"
}
4
  • 11
    In my case, just restart helped! Jul 31, 2020 at 16:23
  • 1
    Agreeing with the above. The error started when I added a .ts file. Quitting the local client app server and restarting it let it find the new file. I didn't have to edit tsconfig at all. Jan 3, 2021 at 2:30
  • Mother of god. I didn't understand your comment @DamianCzapiewski, but indeed a system reboot did solve the problem. : /
    – Bob
    Jun 3, 2021 at 16:09
  • Switching from Powershell to cmd.exe just resolved this for me...
    – Mark
    Oct 3 at 2:52

30 Answers 30

31

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"
  ],
2
  • moving the project to a shorter path resolved my issue Jul 15, 2020 at 19:50
  • 3
    Angular + Webpack needs to know where a .ts file lives. If you import that file inside an Angular file (component, service, directive, etc) then it will work. If you try to dynamically import it using import() and you HAVENT import it somewhere else the regular (synchronous) way, then webpack is not gonna be able to find it. So, this is why you need to declare it in the include property inside the tsconfig.app.json
    – babaliaris
    Jul 19, 2020 at 14:07
31

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';
19

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).

2
  • For me the same: my import statement ended with update-myitem; but my filename actually ended with update-myItem.ts. The issue was a lowercase i in my import statement not matching an uppercase I in the associated typescript filename. Jul 30, 2020 at 8:29
  • That's weird! Anything worked perfectly until when I copy-pasted the import from another file, which was (wrongly) uppercased just like lots of others in my project... even restarting the server didn't help, then when I replaced all imports with the right case, it restarted like nothing ever happened.
    – massic80
    Mar 25, 2021 at 15:43
15

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,
2
  • 3
    This worked for me. I did the following: symlink a folder from another project into my current project; then changed the INCLUDE section in the tsconfig.app.json (Angular 11) and added the "preserveSymlinks": true to the file angular.json
    – Pianoman
    Feb 27, 2021 at 7:21
  • 1
    This fixed it for me even when there were no symlinks in the path to the file it said wasn't being compiled. Jan 26 at 18:02
12

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!

1
  • 1
    i made the mistake of adding it to tsconfig.json, ur comment helped me figure it out. thnx
    – Ravistm
    Dec 17, 2020 at 12:08
7

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/**/*"
]
4
  • Thanks i added that but now i am getting an error No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["../../node_modules/@wtw/**/*"]' and 'exclude' paths were '["*/.sp ec.ts","*/.stub.ts","test/**/*.ts"]'.
    – Tom
    Sep 21, 2018 at 10:32
  • Why do you have ../ twice? And you should also add the project directory to include. I'll update my answer. Sep 21, 2018 at 11:11
  • error TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["../.","../../node_modules/@wtw/**/*"]' and 'exclude' paths were '[" */.spec.ts","*/.stub.ts","test/**/*.ts"]'.
    – Tom
    Sep 21, 2018 at 11:20
  • Are you adding the include to the root tsconfig.json? Try adding it to tsconfig.app.json instead. Sep 22, 2018 at 11:13
6

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

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"
],
2

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';
2

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 threw another error, please see solution below)

  1. 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

1

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

1

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';
1

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"**
  ]
1

Just restart the app/server, that's what worked for me.

0
1

This is generally default setting in most of the project settings, what I observed is angular for some reason do not support direct paths for some files (for example: projects/app/src etc) instead try specifying indirect path (example : ../../src)

Hope this helps!

0

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.

0

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.

0

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)

0

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...

0

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.

0

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.

0

Old question, but you spelt "include" wrong.

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

-1

remove zone-flags.ts from polyfills.ts

-1

The problem I encountered was due to the presence of spaces in the path to the project. I think the root cause is an issue with tsc.

Original:

C:\Users\name\folder name\projectfolder

Workaround:

C:\Users\name\foldername\projectfolder

It's an issue with the tsc compiler, and it's documented in this VSCode issue.

-2

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 🙂.

-2

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

-2

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.

-2

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. : /

-2

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.

-2

My similar error popped up (ng 10) after I created & completed a new directive in a new branch, then merged it into the main branch. Sometimes after creating a new directive that is used in several components, some of the spec files complain about a missing import/declaration of the new directive. So I added this to each spec file, but was still getting the error. I then 'killed' the terminal that was serving my app (the garbage can icon in VS code terminal), re-started my app using ng serve -o, and presto, no more error.

Not the answer you're looking for? Browse other questions tagged or ask your own question.