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

Question

I get this error after ng serve: ERROR in ./src/app/Modeles/utilisateurs.model.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: C:\Users\xx\src\app\Modeles\utilisateurs.model.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "types": ["gapi", "gapi.auth2"],

  },

  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },

  "include": [
    "./src", 
    "node_modules/@jaspero/ng2-select",
    "**/app/lazyModules/**/*.ts"
  ]
}

tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["gapi", "gapi.auth2"],
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

angular.json:

"projects": {
    "xx": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/xx",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "preserveSymlinks": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": []
          },

Juline

Answer 1

In tsconfig.app.json change your include array from

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

To

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

Ceciliacecilio

any explanation? what these two include is doing? – Ingvar

You also want the types file to be picked to refer to the respective types during compilation. – Glassware

Isn't src/**/*.d.ts already included in src/**/*.ts? – Irascible

Answer 2

Look out for lazy-loading

I was getting this when lazy-loading modules in a Module Federation configuration. In this case, I only ran into the issue when running unit tests, so I only needed to ensure the lazy-loaded modules were included in the spec tsconfig.

So this was the change that fixes this for lazy-loading. In the root tsconfig.spec.json (not the copy in src), make the update to explicitly include all TS files:

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

Apnea

Answer 3

After updating Angular to version 17.0.4 and changing the builder to @angular-devkit/build-angular:application the error start to occure while serving the app:

Changes detected. Rebuilding...✘ [ERROR] File ... is missing from the TypeScript compilation. [plugin angular-compiler]

I've solved the problem in my case by removing the option "aot": false from the angular.json

{
 ...
  "architect": {
      "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            // "aot": false, <- needs to be removed
            ...
      }
     ...

Garald

Answer 4

I had the same problem, It solved by adding "preserveSymlinks": true to angular.json

projects -> projectName -> architect -> build -> options

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    .
    .
    .
  "projects": {
    "projectName": {
        .
        .
        .     
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            .
            .
            .
            "preserveSymlinks": true, // this line   
            .
            .
            .
            }
        }
    }
}

Teheran