Encounter error message "Angular-CLI: Karma-Webpack fails due to 'file or directory not found'"

After initially starting with the classic Angular/systemjs setup for the Tour of Heroes, I transitioned to using angular-client. The application now performs well in both development and production modes, except for when I try to run tests using ng test. An error is thrown not only for test.ts, but also for polyfills.ts.

code: 'ENOENT',
errno: 34,
message: 'no such file or directory',
path: '/_karma_webpack_/src/test.ts' }

I've been unable to pinpoint the exact cause. Even when I set up a new project using ng, as soon as I add a component to the app-routing.module.ts, the same error surfaces. It's likely that I overlooked something blatantly obvious, so I apologize in advance for any oversight.

If you're interested in delving deeper into the code (or attempting to run the tests): https://github.com/ckpinguin/angular-tour-of-heroes

Additional information: Prior to the aforementioned error, every component threw a similar message. It remains unclear why this occurs, especially since the application runs smoothly.

ERROR in ./src/app/heroes/hero-list.component/hero-list.component.ts
Module build failed: TypeError: Cannot read property 'getChildAt' of undefined
at refactor.findAstNodes.filter.forEach (/home/axcka01/projects/angular/tour-of-heroes/node_modules/@ngtools/webpack/src/loader.js:221:54)
at Array.forEach (native)
at _removeModuleId (/home/axcka01/projects/angular/tour-of-heroes/node_modules/@ngtools/webpack/src/loader.js:215:10)
at Promise.resolve.then.then (/home/axcka01/projects/angular/tour-of-heroes/node_modules/@ngtools/webpack/src/loader.js:298:33)
at process._tickCallback (internal/process/next_tick.js:103:7)
@ ./src/app/app.module.ts 19:30-89
@ ./src/main.ts
@ multi ./src/main.ts

Answer №1

After diving into my Angular book, I discovered that all components being used (implicitly) must be declared in the spec.ts file. In my testing of the main master-component with app.component.spec.ts, this required declaring multiple components as shown below:

TestBed.configureTestingModule({
    imports: [
        RouterTestingModule
    ],
    declarations: [ // TODO: Mock some components!
        AppComponent, HeroListComponent, HeroDetailComponent,
        DashboardComponent, HeroSearchComponent, HeroAddComponent
    ],
}).compileComponents()

Instead of simply having AppComponent in the declaration list.

The error I encountered was basically karma's way of saying: "I need to load components, but cannot use them because they're not declared in this test case." (feel free to correct me if I'm mistaken).

I understand that generally one should not test "The mother of all components" with all sub-components. It is recommended to test smaller sets or use mocks instead. However, by making the above change in app.component.spec.ts, the standard ng-cli test cases now run successfully.

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

Unraveling JSON data retrieved from a MySQL query

After successfully encoding a MySQL result from PHP into JSON, I am now faced with the task of decoding it using JavaScript. Let's assume that my string returned is: [{"0":"x","1":"z"},{"0":"xs","1":"zz"}] I would appreciate some guidance on how to ...

Hide the external div if the tab is active in Angular Bootstrap

How can I determine if a specific tab is active and then hide a div outside all tabs when it is active? Plunker: https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview <div class="border"> Conceal me when Tab #3 is active. </div> < ...

In JavaScript, unchecking a radio button results in all options becoming uncheckable

I have a pure CSS accordion and I want to enhance it with some JavaScript functionality for users who have JavaScript enabled. The CSS accordion currently utilizes the :checked pseudo-class. The new feature I am looking to add is: if a button that is alre ...

The array remains static and unchanging

Just diving into the world of angular JS and running into a little hiccup when trying to edit an object in an array. The liked function below is triggered and receives the correct object. The loop successfully locates the right object and sets its liked va ...

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

Using the XMLHttpRequest object for AJAX file uploads that are compatible with Internet Explorer 9

Seeking help with uploading a file using ajax. The current code works on all browsers except for i.e 9 and older versions. I need to find a solution that will also work on i.e. Some suggestions have been to use an iframe, but I don't see how that res ...

Angular ng-repeat encounters difficulty in parsing Arabic object

As I create a JSON object that contains Arabic content shown below $scope.arabicContent = ["ردهة","قاعة الاجتماعات","مبرمجين الجوال","المدراء","المحاسبة","المحاسبة","المبرمجين‎","مطبخ‎ ...

Node functions continue to run smoothly without affecting the loop

I am working on a webdriverjs application and I am trying to determine when jQuery has finished its processes on the page. I have implemented some methods, but it seems that even when the condition is supposed to trigger an else statement and stop the loop ...

What is an alternative way to show the contents of a JSON file without directly accessing it

Recently, I stumbled upon an amazing website - where I have been exploring to learn something new. The website prominently features the use of Ajax and some fascinating javascript without any additional libraries. Within a single javascript file on this ...

"Is there a way to retrieve a field from a different model within a Mongoose model

Presented below are two distinct MongoDB Models: Movie Model import mongoose from 'mongoose'; const movieSchema = new mongoose.Schema({ title: { type: String, required: [true, 'Please Enter the Movie Title'], trim: true, ...

The function you are trying to use is not a valid jQuery function

Although I've come across this issue in previous posts, none of the solutions worked for me and it's really frustrating. I'm a newbie to javascript and I'm sure the answer is probably simple. I'm attempting to incorporate the rapt ...

Adding elements to a JSON array in JavaScript/AngularJS

Looking for help with inserting a new item "uid" into a JSON array. Here is the initial array: var testArr=[{name:"name1",age:20},{name:"name1",age:20},{name:"name1",age:20}] The desired output after inserting the "uid" would be: var testArr=[{name:"nam ...

Webpack fails to resolve paths provided by a JavaScript variable

I am currently developing an application using vue and ionic, but I have encountered an issue with loading assets as the paths are not resolving correctly. <template> <div id="index"> <img :src="image.src" v-for="image in image ...

What is the reasoning behind exporting it in this manner in the index file?

As I was going through a tutorial about nests, there was this step where the instructor made a folder named "dtos" and inside it, they created two dto files (create-user.dto and edit-user.dto). Following that, they also added an index file in the same fold ...

What external libraries does Angular 4 utilize during execution, aside from RxJS?

Angular 4 relies on RxJS types in its public API and also internally depends on RxJS. It would be beneficial to explore if Angular utilizes other external packages for certain functionalities, allowing us to incorporate them into our own projects. This ap ...

What is the efficient way to toggle localStorage based on checkbox selection using jquery?

I am looking to efficiently manage localStorage using checkboxes. When a checkbox is checked, I want to add the corresponding value to localStorage, and remove it when unchecked. var selectedModes = new Array(); $('.play_mode').on('click& ...

Sorting an array of strings in JavaScript with the help of another array of strings

I am looking for a way to rearrange array1 based on array2. var array1 = ["cat","dog","mouse","elephant","ant","cow","goat","hen"]; var array2 = ["mouse","cow","goat"]; Expected output: var another_array = ["mouse","cow","goat", "bird"--- then rest of ...

The process of JavaScript for detecting and extracting text from

After much searching, I stumbled upon this intriguing piece of JavaScript code at this location. Curiously, I was able to remove a few eggs using the following script: var eggCoordinates = []; for (var i = 0; i < 5; i++) { eggCoordinates.push(new E ...

Separate each item in the list and display them across multiple pages within a table

I'm looking to display a list of 37 items across four separate pages within a table. Can anyone suggest a way to split these items and showcase them in four different pages using either javascript or vue.js? ...

How can you add draggable functionality to a Bootstrap dropdown menu?

My custom bootstrap dropdown design <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span cla ...