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

Customizable column layout in react-grid-layout

I am looking to implement a drag and drop feature in which users can place items into a grid without fixed columns. The goal is that if an item is dragged from outside the grid boundaries and dropped to the right (an empty area), the grid will automaticall ...

reactjstypescriptreact-grid-layout

What is the best way to showcase two different arrays' data in a single Angular view?

I have 2 different arrays retrieved from an API with no common FK or any other identifier. Even though my TypeScript code produces the expected results, the view remains blank. The debugging results are provided as comments in the code snippet below: ngO ...

angulartypescript

Template reference does not connect to the ApexChart graphic

As a newcomer to ApexCharts.js, I am currently working on setting up a Vue3 app using Composition API along with the setup syntax. My goal is to reference the template ref of 'apexchart' so that I can later call the dataURI() function on it. I am ...

typescriptvuejs3apexcharts

Struggling to get the Okta Auth0's AuthGuard to properly redirect to a specific route following a successful login request for a protected route

I have implemented Auth0 in my Angular application to authenticate users using the steps outlined below: Users visit the root page (e.g. ) and click on the Login button via their Google account. Users are redirected to the Auth0 login page through the Goo ...

angularoauthauth0okta

Encountering the NullInjectorError: No provider for Injector! error repeatedly while attempting to interact with a store

I've been working on a web app that incorporates a store by following this tutorial: . However, I keep encountering the following error: main.ts:13 NullInjectorError: StaticInjectorError(AppModule)[InjectionToken @ngrx/store Initial Reducers -> In ...

angularstorengrx-store

Storing information from a signup form using Angular

Can you help with my registration form? <div class="form-group"> <label for="email" class="col-sm-3 control-label">Email Address</label> <div class="col-sm-9"> <input type="email" id="email" placeholder="Enter your ...

angular

Creating subclass mappings and defining subclasses dynamically using Typescript at runtime

I am puzzled by the structure of 3 classes: A, B, and C. Both B and C extend the abstract class A. abstract class A { public name: string; constructor(name: string) { this.name = name; } abstract getName(): string; } class B extends A { g ...

typescript

Navigating to the tsconfig.json file based on the location of the file being linted

In my monorepo, each package currently contains a .eslintrc.cjs file with the following setup: Package-specific ESLint Configuration const path = require('path') const ts = require('typescript') const OFF = 0 const WARN = 1 const ERROR ...

typescripteslinttypescript-eslint

Using the as operator in TypeScript for type casting a string

function doSomething(a : any) { let b = (a as Array<any>) alert(typeof b) // displays "string" } doSomething("Hello") The alert is showing "string" instead of what I anticipated, which was something along the lines of a null value. The docu ...

typescript

Enhancing Responses in NestJS with External API Data

I'm a beginner in NestJs, Graphql, and typescript. I am trying to make an external API call that is essentially a Graphql query itself. The goal is to modify the response, if necessary, and then return it for the original request or query, in this ca ...

node.jstypescriptgraphqlnestjstypeorm

I am interested in incorporating a personalized class into the Kendo UI for Angular TabStrip

<kendo-tabstrip (tabSelect)="onTabSelect($event)"> <kendo-tabstrip-tab title="Paris" [selected]="true"> <ng-template kendoTabContent> <div class="content"> ...

angularkendo-ui

Issue with Angular 8 docker container: module not found despite being installed

I am currently working on an Angular 8 single-page application (SPA). Utilizing a Dockerfile that is managed and executed through a Docker Compose setup. Everything was functioning smoothly for weeks until today when, out of nowhere, the setup stopped wor ...

angulardockernpm

Is there a way to create two slide toggles with unique colors on a single page?

How can I create two slide toggles with a unique color scheme on the same page? Looking to add some flair to your website with custom-colored slide toggles? Learn how to effortlessly incorporate two of them onto a single webpage here. ...

angularmaterial-ui

Using Typescript: Utilizing generic types within the parent class

I'm currently facing an issue with the code snippet below, which is a simplified example: class QueryArgs { studentId?: string; teacherId?: string; } class BaseValidator<T> { protected args: T; constructor(args: T) { this.args = a ...

typescripttypescript-generics

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

I need to create a list with dynamic data using a loop. When I click on any item in the list, I want the image associated with that item to change to a second image (dummyimage.com/300.png/09f/fff) to indicate it's active. This change should persist e ...

javascripthtmlcssangular

The call in TypeScript React does not match any overload

Encountering an error with a React component that I wrote and seeking assistance. The primary component code snippet: export interface ICode { code: (code: string) => void; } export default class UserCode extends React.Component{ state = { formFil ...

reactjstypescriptoverloading

Looking to create universal React component wrappers?

I am working with a set of functional components that share a common set of properties, for example: const A = ({ x, y, z }) = {...} const B = ({ x, y, z }) = {...} For these components, I have predefined configurations: const styles { A: { ty ...

reactjstypescriptjsx

Guide to integrating validators into a formModel with Angular's reactive forms

Currently, I am in the process of learning about reactive forms in Angular and have a question regarding how to set a property as required or any other validator when using class model for defining form groups. You can find more information on reactive fo ...

angularangular-forms

Although everything appears to be running smoothly in Express, my request is returning null

I am facing an issue with a router in my code. In the main index.ts file, I have the following line: app.use("/api/tshirts", tshirts) And in tshirts.ts file, I have defined the following routes: router.get("/", tshirtsController.getTShirts) router.get("/ ...

javascriptnode.jstypescriptexpress

Trouble with integration of independent schematic package within Angular application development

My objective is to release a tailored Angular schematic package on my company's private npm registry for other developers to utilize. Here's the progress I've made so far: Established a separate schematic project using the schematic CLI. Co ...

angularnpmangular-schematics