The Angular Compiler was identified, however it turned out to be an incorrect class instance

Although this question has been asked before, I have exhausted all possible solutions that were suggested. Unfortunately, I still cannot resolve it on my own. Any assistance would be greatly appreciated.

Error:

ERROR in ./src/main.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This could indicate that you have multiple @ngtools/webpack packages installed. You can verify this by using `npm ls @ngtools/webpack` and then removing any additional copies.
    at Object.ngcLoader (C:\WORK\folder\folder\folder\node_modules\@ngtools\webpack\src\loader.js:33:15)
 @ multi ./src/main.ts

ERROR in ./src/polyfills.ts
Module build failed: Error: Angular Compiler was detected but it was an instance of the wrong class.
This could indicate that you have multiple @ngtools/webpack packages installed. You can verify this by using `npm ls @ngtools/webpack` and then removing any additional copies.
    at Object.ngcLoader (C:\WORK\folder\folder\folder\node_modules\@ngtools\webpack\src\loader.js:33:15)
 @ multi ./src/polyfills.ts

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (C:\WORK\folder\folder\folder\node_modules\@angular\compiler\bundles\compiler.umd.js:20291:23)
    at CompileMetadataResolver.getNgModuleMetadata (C:\WORK\folder\folder\folder\node_modules\@angular\compiler\bundles\compiler.umd.js:15244:60)
    ...

Configuration:

Angular CLI: 1.7.0-beta.2
Node: 8.9.4
OS: win32 x64
Angular: 5.2.11
...

--- Package.json ---

{
  "name": "app1",
  "version": "0.0.0",
  "license": "MIT",
  ...

}

---

I have tried various methods to solve this issue, including:

- Deleting the node_module folder and Package.lock.json
- Reinstalling npm with `npm install`
- Updating npm with `npm update`

Any guidance on what I might be missing would be highly appreciated as I am currently stuck.

---------------------------------

After conducting extensive research, I managed to resolve this problem by making changes to the package.json file as follows:

{
  "name": "app1",
  "version": "0.0.0",
  "license": "MIT",
  ...

}

However, there is still one remaining issue:

ERROR in No NgModule metadata found for 'AppModule'.

If anyone could provide assistance with this, it would be greatly appreciated.

Answer №1

After encountering the identical problem, I successfully resolved it by taking the following actions:

1) Ensuring that the @ngtools/webpack package was updated to the most recent version.

2) Deleting both the node_modules directory and the package-lock.json file, then performing a fresh npm install.

Answer №2

I found a great solution that worked for me not once, but twice. Simply execute the command below -

npm dedupe

You'll see some auditing details. To resolve any issues, run this next -

npm audit fix

If the error persists, try running this as well -

npm audit fix --force

By doing this, all duplicate packages will be de-duplicated and their versions fixed.

I hope this information is useful to you!

Answer №3

It is possible that your project's dependencies are conflicting. For example, the version of @angular/compiler-cli may be 6.1.0 while the version of @angular/core remains at 5.20. You could try downgrading @angular/compiler-cli to version 5.x or upgrading to Angular 6 (https://update.angular.io/)

Answer №4

After removing both the @ngtools\webpack directory and the package-lock.json file, I proceeded to execute the yarn command instead of utilizing npm install or npm update. While I can't guarantee this is the ideal solution, it successfully resolved my issue.

Answer №5

This particular solution did the trick for me - I just had to run: npm uninstall @angular-devkit/build-angular

After that, I simply needed to reinstall it using the command: npm install @angular-devkit/build-angular -D

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

Linking Redux to the highest level of my application is not functioning as expected

I have been attempting to troubleshoot this code for quite some time now, but I am struggling to identify the issue at hand. My main goal is to establish a connection between my top-level application and the redux store. However, every time I try, the stor ...

Issue with GitHub actions: NPM publishing encountering authentication error with code ENEEDAUTH

I have tried following the official guide for publishing and installing a package using GitHub Actions: Authenticating to package registries with granular permissions Encountered this error: npm ERR! code ENEEDAUTH npm ERR! need auth This command requires ...

Can you specify a data type for ngFor in Angular?

I am currently employing ngFor to iterate over a collection of a specific type [Menu] within Angular 4.x. During this process, I am looping through a collection property of the menu object (menu.items). Unfortunately, my IDE (Eclipse + Angular IDE) is un ...

How to implement div scrolling on button click using Angular 4

Is there a way to make the contents of a div scroll to the left when one button is clicked and to the right when another button is clicked? I've tried using ScrollLeft, but it doesn't seem to be working... Here's the HTML code: <button ...

How can a parent component update a child component's prop value in VUE?

I'm facing an issue with managing dynamic props in Vue with TypeScript. Below is my parent component: <script setup lang="ts"> const friends = [ { id: "emanuel", name: "Emanuella e", phone: "08788 ...

Utilizing Async Storage for Language Localization

Currently, I am utilizing two separate APIs for localization, both of which return JSON data. getEnLoc() //400kb getEsLoc() //400kb My plan is to call these APIs in App.ts during the app's initialization phase and store the retrieved JSON objects in ...

Why does using `withCredentials: true` and including a `body` in the request cause a CORS error in Angular HttpClient?

My objective is to make a request to a Cloud Function, receive a response with a Set-Cookie header, and have the browser store the cookie. The issue arises when the response containing a Set-Cookie header is ignored without the presence of withCredentials ...

Using Angular 8 for Filtering Firebase Data

I need to implement a filter on the titles of my stored data, but I am facing an issue where the structure of the filtered data changes. The original "key" of the data gets deleted by the filter and is replaced with an index instead. Link to repository : ...

Show a select element with choices that change depending on another select element

I am currently working on a select dropdown component that utilizes the @Input option variable. My goal is to have another instance of this component display options based on the selection made in the first instance. Any suggestions on how to make this h ...

Creating a downloadable text file in Angular

I need help with including data retrieved from an API GET call into a text file within my project. I have successfully called the API, displayed the data on the console and the webpage, but now I am struggling to save this data into a text file. Below is t ...

"Master chef preparing a delicious dish with fresh ingredients, skillfully incorporating node, npm

As I set up node and npm using the 'nodejs' cookbook and included the recipe through include_recipe "nodejs::npm" I proceeded to install the desired packages with the following code: %w( dateformat aws2js optparse cloudwatch2graphite).each do ...

Troubleshooting the Angular CLI issue: Module 'ansi-colors' not found

Having issues with my angular project, despite installing the latest version of NodeJs and NPM. When I try to run my project using the ng command, I encounter the following error message: Error: Cannot find module 'ansi-colors' Require stack: - ...

Updating Cart Array in Angular 4 when Adding a New Item

I'm currently using angular 4 and I have encountered an issue in the code where adding a new product to the cart overwrites the existing item instead of appending it to the array. Here is a screenshot illustrating the problem cart.service.ts export ...

What is the process for selecting the Node version when installing with .nvm?

I am having an issue with nvm in the terminal. When I try to run npm install <something>, it always installs the package in node version 9.4.0, regardless of the version set using nvm. Even after switching to node version 10.15.3 using nvm use v10.1 ...

The autoimport feature is not supported by the Types Library

My latest project involves a unique library with only one export, an interface named IBasic. After publishing this library on npm and installing it in another project, I encountered an issue. When attempting to import IBasic using the auto-import feature ( ...

What is the best way to eliminate any extra spaces from a string using typescript?

Currently in my Angular 5 project, I am encountering an issue with using the .trim() function in TypeScript on a string. Despite implementing it as shown below, no whitespace is being removed and also there are no error messages appearing: this.maintabinf ...

Vue.js Element UI dialog box

Is there a method to customize the close button in el-dialog and replace it with my own design? For instance, can I change the default close button located at the top left corner of the dialog? <el-dialog title="Tips" :visible.sync=" ...

SSH exchange identification issue encountered with Node 8.11 version, however, no such problem arises with Node 4.7

On my Windows 10 computer, I currently have Node versions 8.11 and 4.7 installed. When attempting to run 'npm install' in a new project with Node 8.11, I encounter the following error message: npm ERR! Error while executing: npm ERR! C:\Dev ...

Where to Find the 'Express' Feature on Windows 7 CMD

Using JavaScript on my Windows 7 machine, I ran the following commands: C:\node> npm install -g express-generator And also C:\node> npm install -g express-generator@4, along with npm link express. After executing the above commands, I re ...

`The Art of Curved Arrows in sigjma.js, typescript, and npm`

I have encountered an issue while trying to draw curved arrows in sigma.js within my TypeScript npm project. The error occurs on the browser/client-side: Uncaught TypeError: Cannot read properties of undefined (reading 'process') at Sigma.pro ...