Encountering an ERROR during the compilation of ./src/polyfills.ts while running ng test - Angular 6. The module build

I encountered a problem in an angular project I am working on where the karma.config was missing. To resolve this, I manually added it and attempted to run the test using the command ng test. However, during the execution, an error message appeared:

[./src/polyfills.ts] 699 bytes {polyfills} [built] [failed] [1 error]
[./src/test.ts] 990 bytes {main}
    + 228 hidden modules

ERROR in ./src/polyfills.ts
Module build failed: Error: C:\Projects\MyProject\src\polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (C:\C:\Projects\MyProject\node_modules\@ngtools\webpack\src\packages\ngtools\webpack\src\angular_compiler_plugin.ts:982:15)
    at plugin.done.then (C:\Projects\MyProject\node_modules\@ngtools\webpack\src\packages\ngtools\webpack\src\loader.ts:49:29)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./src/polyfills.ts

Upon investigation, I found that there are two tsconfig.json files in the app. The first one is located in the project's root folder with the following content:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
       // other options here
    }
}

The second tsconfig.json file is inside the src folder and includes:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "target": "es5",
        "allowJs": true
    }
}

Despite attempting to use the "include" directive in these files to add src/polyfills.ts, the issue persisted.

If anyone has insights on how to address this, please provide guidance. The Angular version being used is 6.

Answer №1

After encountering an issue, I discovered that the file tsconfig.spec.json was missing the polyfills.ts reference. Once I added it as shown below, the problem was successfully resolved:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

Referencing a post on Stack Overflow about a similar issue (Module build failed ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property), I was able to verify and correct the configurations of tsconfig files in my project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular and Bootstrap combined to create a versatile navigation bar with a collapsible sidebar feature

Currently, I am in the process of developing a progressive web app using Angular and Bootstrap. One of the main challenges I am facing is implementing a navbar that not only looks great on desktop but also on mobile devices. So far, I am satisfied with my ...

An issue arises when using an Observable in the model while employing Angular's dynamic component loading

I have been utilizing a dynamic component for quite some time now. However, I am now interested in incorporating an "Observable" into its model to enable triggering changes from external sources. To achieve this, I have created a service (which lies outsid ...

Custom Type Guard Leads to Intersection Type Outcome

Recently, I've been experimenting with Typescript and decided to explore the creation of an innovative Either type that could distinguish between success and failure scenarios. Utilizing a user-defined type guard, I managed to precisely narrow down th ...

Developing applications with Angular 4 and AppInventor window

Currently, I have a local Angular 4 application that utilizes localStorage on a desktop browser for data persistence. Within the application, I have implemented a WebViewer in AI. It is clear that localStorage cannot function in AI2, so alternative data s ...

Navigating resolvedUrl with getServerSideProps in the newest version of NextJS - a comprehensive guide

Is there a way to obtain the pathname without using client-side rendering? I have been searching for information on how to utilize the getServerSideProps function, but so far with no luck. Initially, I attempted to employ usePathname; however, this result ...

A guide on setting values within a FormBuilder array

I am facing an issue with setting array values in formBuilder.array. While it is easy to set values in a regular formBuilder, I am struggling to do the same in formBuilder.array. I have tried setting values for both 'listServiceFeature' and &apos ...

Extract Subscription Information from the .subscribe function in Angular

After calling the subscriber, I aim to fetch the events. This code successfully achieves this: getCalendarData(){ var body = JSON.stringify({"cid": "etNG3V61LWS6Pzkeb_omuZGMVAOLd1_70tRQblVizWQ~", "seldt":"2018-09-18"}); var headers = n ...

Remove the JavaScript files from the distribution folder when removing TypeScript files in an Angular 2 project

I came across a solution that recommended separating Angular2 TypeScript files and JavaScript files into different folders like 'dist'. By following this, I moved my files to the 'app' and 'dist' folders. Interestingly, whenev ...

The angulartics2 event is not functioning correctly

I have implemented the angulartics2 library in my project. import { Component } from '@angular/core'; import { Angulartics2On } from 'angulartics2'; @Component({ selector: 'random-component', directives: [Angulartics2On] ...

Alert: The route "/D:/original/22-02-2017/job2.html" specified in [react-router] does not correspond to any existing routes

I am currently working on a project using TypeScript with React. I'm utilizing webpack as a compiler, and my directory structure looks like this: d:/original/22-02-2017/ - In my web.config.js file, the entry point is set to ./src/index.tsx. All ...

The ngAfterViewInit function is being triggered prematurely

While using am4chart, I encountered an error in my console: html container not found. The specific line triggering this error is in my Angular component: var chart = am4core.create("graphdiv", am4charts.XYChart); The stack trace in the console reads ...

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it c ...

Check the status of a different website's online presence using JavaScript

Hey there! I'm working with Angular and iframes, and I want to determine whether the target website is online before loading it into the iframe. Here's the code I am currently using: try { await this._httpClient.get(url, { observe: 'respo ...

Utilize string variables within TypeScript's enumeration feature

Can string variables be used in enums in TypeScript? Strings can be used in enum like so: enum AllDirections { TOP = 'top', BOTTOM = 'bottom', LEFT = 'left', RIGHT = 'right', } However, trying to use variab ...

What is the best way to show specific links in the navigation bar only when the user is signed in using Angular?

I'm attempting to customize the navigation bar to display "Sign In" and "Sign Up" buttons only when the user is not signed in, and show the message and profile navigation items when the user is signed in. Below is the provided code snippet: Token Se ...

Adding a new value to a string variable using TypeScript

Just starting out with Angular and I'm looking to capture user input from a text box with each keystroke and add it to a string variable like in Java. In my text box, I have the following setup for capturing key events: <input type="text" ...

The 'any' type is automatically assigned to Angular and Element since the type 'IData' lacks an index signature

Looking to display specific object properties based on predefined keys in an array? Here's an example using TypeScript: const dataObject: IData = { a: 1, b: 2, c: 3 }; const dataKeys: string[] = ['a', 'c']; dataKeys.forEach((key: ...

Angular 5 APP_INITIALIZER: Provider parse error - Cyclic dependency instantiation not possible

I am utilizing the APP_INITIALIZER token to execute a task upon page load before my Angular application is initialized. The service responsible for this functionality relies on another service located within my CoreModule. The issue at hand seems to be ab ...

typescript: the modules with relational paths could not be located

As part of a migration process, I am currently converting code from JavaScript to TypeScript. In one of my files 'abc.ts', I need to import the 'xyz.css' file, which is located in the same directory. However, when I try to import it usi ...

What is the best way to merge imported types from a relative path?

In my TypeScript project, I am utilizing custom typings by importing them into my .ts modules with the following import statement: import { MyCoolInterface } from './types' However, when I compile my project using tsc, I encounter an issue wher ...