Issue encountered: "path" Module not located: Error message - Unable to resolve - Angular 6 Webpack

I am encountering some issues with webpack while working on an angular 6 project. When I run "node_modules.bin\webpack," I receive the following errors:

ERROR in ./src/app/template/header/header.component.ts Module not found: Error: Can't resolve 'src/app/services/authentication.service' in 'C:\GitHub\project-app\src\app\template\header' @ ./src/app/template/header/header.component.ts 13:0-80 55:41-62 @ ./src/app/app.module.ts @ ./src/main.ts

ERROR in ./src/app/template/header/header.component.ts Module not found: Error: Can't resolve 'src/app/services/local-storage.service' in 'C:\GitHub\project-app\src\app\template\header' @ ./src/app/template/header/header.component.ts 12:0-77 57:12-31 @ ./src/app/app.module.ts @ ./src/main.ts

ERROR in ./src/app/services/authentication.service.ts Module not found: Error: Can't resolve 'src/environments/environment' in 'C:\GitHub\project-app\src\app\services' @ ./src/app/services/authentication.service.ts 16:0-59 55:24-35 56:28-39 58:30-41 76:30-41 @ ./src/app/login/login.component.ts @ ./src/app/app.module.ts @ ./src/main.ts

I cannot determine why this issue is occurring. Building or running normally works fine. I tried creating a simple project, reconfiguring everything, and it worked without any problems, but for some reason, it does not work in this specific project.

//custom webpack configuration
var webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
// more webpack config...
//tsconfig
{
  "compileOnSave": false,
  // additional TypeScript configurations...
}

//package jason
{
  // package JSON data here...
}

//import statements in header component file
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'src/app/services/local-storage.service';
import { AuthenticationService } from 'src/app/services/authentication.service';

// more code...

Answer №1

Resolved issue by updating file paths:

from:

import { LocalStorageService } from 'src/app/services/local-storage.service';
import { AuthenticationService } from 'src/app/services/authentication.service';

to

import { LocalStorageService } from '../../services/local-storage.service';
import { AuthenticationService } from '../../services/authentication.service';

Answer №2

In case the auto imported paths are not working, you may have to run a npm install command to add the missing module to your 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

What is the process for sending data to the backend using an HTTP POST request? The frontend is built with Angular 2 and the backend is developed with .NET

Having trouble with this error message: Error: XMLHttpRequest cannot load "http://localhost:49873/api/home". The response to the preflight request failed the access control check. There is no 'Access-Control-Allow-Origin' header present on the ...

Error: JavaScript object array failing to import properly

In my code, I have an array of objects named trace which is defined as follows: export const trace: IStackTrace[] = [ { ordered_globals: ["c"], stdout: "", func_name: "<module>", stack_to_render: [], globals: { c: ["REF" ...

What can be done to resolve issues with chunk loading failures?

Exploring the world of web development, I decided to create a Vue and Monaco Editor powered web application with Asp.Net Core 3 handling the backend. In the process, I encountered webpack, which is essential for managing single page components in Vue, but ...

Sending a POST request from Angular2 to a REST API with Cross-Origin Resource Sharing (CORS

Just diving into the world of Angular 2 and CORS Trying to send form data from Angular 2 to a Rest controller, but encountering an error: Response with Status:0 and Url: Null component.ts --------------------------------------- onSubmit(form:NgForm) { ...

What is the process of extracting information from a JSON file and how do I convert the Date object for data retrieval?

export interface post { id: number; title: string; published: boolean; flagged: string; updatedAt: Date; } ...

Loop through JSON results in Ionic using Angular

I am struggling to retrieve data from a JSON file in Object format using Typescript. When I try to fetch the data from the API, it doesn't display as expected. Typescript this.http.get('http://example.com/api') .subscribe((data) => { ...

Leveraging personalized React Hooks within a TypeScript class

Is it feasible to employ custom React hooks in a TypeScript class with a .ts extension, even though this is a typical inquiry without any accompanying code or example? Can Hooks solely be utilized in an extension of .tsx? ...

A solution for resolving the RuntimeException in genuitec's TypeScript Editor for Eclipse Oxygen

After setting up a fresh Eclipse Oxygen and installing the Angular IDE from Genuitec, I encountered an issue on the second day when I opened a project and accessed a *.ts File. The error message displayed was: java.lang.RuntimeException: java.lang.Illegal ...

Using @Input to pass data from a parent component to a

Looking to modularize the form code into a separate component for reusability? Consider using @Input and referencing it in the HTML to pass values to the post method. Here's how you can achieve this: Previously, everything worked smoothly when all th ...

Embedding a module within a fluid element

Creating a dynamic component and projecting template inside it can be done easily with the following code snippet - @Component({ selector: 'dynamic', template: ` <p>Dynamic Component</p> <ng-content></ ...

Obtaining gender information by utilizing checkboxes in Angular 7

I have developed an Angular application that enables users to filter samples by gender using checkboxes. The options include male, female, or both genders selected. Currently, the filtering works for selecting either male or female individually, as well as ...

Mastering Angular's Form Array for Effective Error Message Display

I have a form that allows users to dynamically add multiple input boxes for entering email addresses. When the form is saved, I loop through the list of controls, create a JSON object, and make an API call to check if the email addresses already exist in ...

The preset does not support Webpack Babel-loader

I've been grappling with this particular issue for the past 48 hours and cannot seem to find a solution: https://i.stack.imgur.com/bEzPT.png After numerous attempts, I decided to make adjustments to the .babelrc file and eventually opted to incorpor ...

The Angular Table Order Pipe does not properly reinitialize its original state

This is my first time posting a question here. The issue I'm facing involves creating a pipe to reorder a specific column in my application (in alphabetical order). The column can have 3 statuses: -1, 0, and 1, with 0 being the default initial status ...

The system is unable to locate the module at 'C:UsersSanjaiAppDataRoaming pm ode_modulesprotractorinprotractor'. This error originates from internal/modules/cjs/loader.js at line 960

After running "protractor conf.js" without any issues, I decided to install protractor globally using the command "npm install -g protractor". However, after installing protractor globally, I encountered the following error message: internal/modules/cjs/lo ...

How come my uploaded Excel Javascript add-on opens in an external browser instead of the task pane?

Note: It has come to my attention that I must save the taskpane.html file on my local drive before it opens in an external browser. This detail slipped my notice last week. I am currently developing a Javascript, or rather Typescript, API add-in for Excel ...

What could be the reason behind the for loop not running within a typescript function?

My confusion lies in the for loop within this function that seems to never run. Each console log is set up to return a specific value, but the looping action doesn't trigger. Can someone provide insight into what might be causing this issue? export fu ...

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

I am attempting to use custom SVG icons in place of the default icons from Material UI's Pagination component (V4). However, I keep encountering this console error: Material-UI: The component prop provided to ButtonBase is invalid. Please ensure tha ...

Icon appearing outside the button instead of inside

Here's a button I'm working with: <button class="glyphicon glyphicon-option-horizontal" (click)="myFuncion()"></button> Recently, I updated my bootstrap library from version 3 to 4.2.1 and now the icon is no longer visible. I' ...

The PKIJS digital signature does not align with the verification process

Explore the code snippet below const data = await Deno.readFile("./README.md"); const certificate = (await loadPEM("./playground/domain.pem"))[0] as Certificate; const privateKey = (await loadPEM("./playground/domain-pk ...