ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property
AngularTypescriptAngular Problem Overview
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"
}
Angular Solutions
Solution 1 - Angular
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"
],
Solution 2 - Angular
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';
Solution 3 - Angular
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).
Solution 4 - Angular
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,
Solution 5 - Angular
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!
Solution 6 - Angular
You've done it almost correctly, but it needs some corrections:
- You have a typo in the key
"include"
- You need to include directory under
../node_modules
, not barenode_modules
- 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/**/*"
]
Solution 7 - Angular
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"
]
}
Solution 8 - Angular
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"
],
Solution 9 - Angular
I came across this question when i was having the following errors:
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)
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
Solution 10 - Angular
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';
Solution 11 - Angular
Just restart the app/server, that's what worked for me.
Solution 12 - Angular
I solve it in my case by removing mismatch in the filename and the reference to the file in an import statement.
Solution 13 - Angular
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';
Solution 14 - Angular
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"**
]
Solution 15 - Angular
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.
Solution 16 - Angular
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.
Solution 17 - Angular
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)
Solution 18 - Angular
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...
Solution 19 - Angular
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.
Solution 20 - Angular
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 .
Solution 21 - Angular
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
Solution 22 - Angular
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.
Solution 23 - Angular
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.
Solution 24 - Angular
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. : /
Solution 25 - Angular
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.
Solution 26 - Angular
remove zone-flags.ts from polyfills.ts