After updating from angular4 to angular 5, the npm test is failing with the error message "TypeScript compilation cannot find test.ts file"

After upgrading my app from Angular4 to Angular 5 using the steps provided on https://update.angular.io/, I encountered an issue.

While I can successfully run ng-serve and ng build without any problems, the npm test command for ng test is failing with the following error:

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

Despite trying various solutions found through Google searches, none of them have resolved the problem.

Following a suggestion on Stack Overflow at , I attempted adding configuration in angular-cli.json and tsconfig.json but that did not solve the issue.

If anyone could provide assistance with this matter, it would be greatly appreciated. Feel free to ask if more information is needed.

angulartypescriptangular-upgrade

Answer №1

For me, the reason for this issue is that when running ng test, it actually uses tsconfig.spec.json instead of the regular tsconfig.json. Make sure to double check your tsconfig.spec.json file and ensure that your test.ts file is included in the files section.

You can view or modify which tsconfig file is being used in the configuration section of the angular.json file.

{
  "projects": {
    "YOUR_PROJECT": {
      "architect": {
        "test": {
          "options": {
            "tsConfig": "tsconfig.spec.json", // <---- Check here
            "karmaConfig": "src/YOUR_PROJECT/karma.conf.js"

Refer to https://angular.io/guide/file-structure#default-app-project-files for more details. I hope this information proves useful.

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

Iterating through a JSON object to verify the presence of a specific value

I have a JSON Object and I am looking for a way in Angular 6 to search for the value "Tennis" in the key "name". Can you provide guidance on how to achieve this? { "id":2, "name":"Sports", "url":"/sports" "children":[ { "id":1, ...

javascriptjsonangular

Integrate a JS file into my Angular 4 project

For one of my components, I am looking to implement a specific effect: https://codepen.io/linrock/pen/Amdhr Initially, I attempted to convert the JavaScript code to TypeScript, but faced challenges. Eventually, I decided to directly copy the JS file from ...

angularangular-cli

Tips on extending the response wait time for an API request using Observable RxJS in Angular

I have a Java Spring Boot backend application and an Angular frontend. In my front end, I am using a REST API to delete a file on the server but I keep getting a 404 error even though the service has been consumed and finished correctly. I suspect that th ...

angularrxjs

The attribute 'commentText' is not found within the 'Comment' data type

Currently, I am immersed in building a user-friendly social network application using Angular 12 for my personal educational journey. Running into an error has left me puzzled and looking for assistance. About the Application: The home page (home.compone ...

angulartypescript

How can I prevent buttons from being created using ngFor in Angular?

I need help with creating an HTML table that includes a cell with a button and a dropdown generated using ngFor. How can I disable the buttons (generated via ngFor) if no value is selected from the dropdown? Here's what I have tried so far: In my App ...

javascriptangulartypescript

Tips for eliminating a port from an Angular 2 URL

Whenever I launch an angular2 project, it automatically includes localhost:4200 in the URL, even after deploying it on a server. Is there a way to remove the port number from the URL without making changes to the core files? I attempted to modify the pac ...

angularnpmangular2-routingangular-cli

Choose the Angular 2 option

I am having an issue with the select option in my code. The person's gender property is assigned 'M' for male, but I need to allow users to change it to 'F' for female. Here is the HTML code snippet: <span > <span &g ...

angulartypescript

Unable to attach to 'aria-valuenow' as it's not recognized as a property of 'div'

I encountered an issue when attempting to assign an expression to an element. The problem arose with the following code: <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{MY_PREC}}" aria-valuemin="0" aria-value ...

angular

Following the update, Angular no longer requires any node dependencies

Recently upgraded from Angular 5 to 9 and encountered an error in the browser's devtools: Uncaught ReferenceError: global is not defined After researching, I found a helpful post that discusses the issue: Upgrading to angular-6.x gives "Unca ...

angulartypescriptangular9

Avoiding Maximum Call Stack Size Exceeded in Observables: Tips and Tricks

After filtering, I have a list stored in the variable filteredEvents$: public filteredEvents$ = new BehaviorSubject([]); I also have a method that toggles the checked_export property and updates the list: public checkAll(): void { this.filteredEve ...

angularrxjs

Guide on setting and retrieving values with a service using a map function

I have a shared HTML <inventory-products-list *ngIf="toggle" [products]="products" (qrCode)="generateQRCode($event)" (undeleted)="undelete($event)" (deleted)="deleteProduct($event)"></inventory-products-list> this I need to use in different ...

angular

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

How can I adjust the height of a mat-select in Angular7 to display all items properly? Here is my component file: import { Component, ViewEncapsulation } from "@angular/core"; import { FormControl } from "@angular/forms"; /** @title Select with multiple ...

htmlcssangulartypescriptangular-material

Set the enumeration value to a variable

I am facing a problem where it seems impossible to do this, and I need help with finding a solution enum Vehicles { BMW='BMW', TOYOTA='Toyota' } class MyVehicles { public vehicleName: typeof Vehicles =Vehicles; } const veh ...

typescriptenums

Launching an Angular application from the local server

I have successfully deployed an Angular frontend on a server. It is functioning well, with three scripts: /runtime.0fad6a04e0afb2fa.js /polyfills.24f3ec2108a8e0ab.js /main.a9b28b9970fe807a.js My goal is to start this application in Firefox without ...

javascriptangularfirefox

Utilizing asynchronous methods within setup() in @vue-composition

<script lang="ts"> import { createComponent } from "@vue/composition-api"; import { SplashPage } from "../../lib/vue-viewmodels"; export default createComponent({ async setup(props, context) { await SplashPage.init(2000, context.root.$router, ...

javascripttypescriptvue.jswebvue-composition-api

Transferring information between components, specifically when one of them is a routerOutlet within an Angular application

I need to transfer data from the category component to the product component within the dashboard component. However, I am facing an issue due to the presence of a router outlet inside the product component. View Dashboard Screen dashboard.component.html ...

angulartypescriptparameter-passingwebapirouter-outlet

Develop a flexible axios client

I have a basic axios client setup like this: import axios from "axios"; const httpClient = axios.create({ baseURL: "https://localhost:7254/test", }); httpClient.interceptors.request.use( (config) => config, (error) => Prom ...

typescriptvue.jsvuejs2axios

Is it time to refresh the sibling element when it's selected, or is there

I have recently started working with react and TypeScript, and I am facing some challenges. My current task involves modifying the functionality to display subscriptions and transactions on separate pages instead of together on the same page. I want to sh ...

javascriptreactjstypescript

Using TypeScript's conditional types for assigning types in React

I'm tasked with creating a component that can belong to two different types. Let's call them Type A = { a: SomeCustomType } Type B = { b: SomeOtherDifferentType } Based on my understanding, I can define the type of this component as function C ...

reactjstypescripttypes

Trouble arises in TypeScript when defining a class - SyntaxError crops up

When I try to declare a class, I encounter an error: // The code below is from my test1.ts file class WDesign { wModel: string; wQuer: string; } let logWDesign = (wd : WDesign) => { console.log(wd.wModel + " " + wd.wQuer); } let wd1 : WDe ...

node.jstypescript