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

404 Error: Unable to Locate Socket Io

I'm currently working on implementing a chat feature in Angular 2 using Socket IO, following this tutorial. However, I encountered an error message during a test on the server: GET http://localhost:3000/socket.io/?EIO=3&transport=polling& ...

Jest test encounters an error due to an unexpected token, looking for a semicolon

I've been working on a Node project that utilizes Typescript and Jest. Here's the current project structure I have: https://i.stack.imgur.com/TFgdQ.png Along with this tsconfig.json file "compilerOptions": { "target": "ES2017", "modu ...

Is it possible for me to create an archive of my GitHub repository even if it is also a published npm module

I am in possession of a GitHub repository for an npm module that I have stopped maintaining. Despite the fact that I have deprecated it on npm, there are still regular weekly downloads occurring. Am I permitted to archive the git repo? ...

Sharing data among components in Angular 6

I've set up 2 components and a service as outlined below: component-interaction.service.ts @Injectable() export class ComponentInteractionService { public dataSubject = new BehaviorSubject<string>("Test"); getTestData(): Observable<an ...

Opt for Readme display over index.html

I'm just starting out and I have a question about Github: Is there a way to build a page using the index.html file within a folder instead of the readme file? I've successfully built many pages where the index file is not located in a folder. Ho ...

Encountered an issue while trying to run the production script. Received an error when attempting to

Encountering a problem when running the command below npm run production Upon executing the command, the following error is displayed: ERROR Failed to compile with 5 errors error in ./resources/assets/sass/app.scss Module build failed: ModuleBuildErro ...

Transmit messages from server (via Expressjs routing) to the client

I am looking for guidance on how to effectively send messages from the server to the client and incorporate this functionality into routes/index.js within my mean stack project. Can anyone provide insights on using socket.io in this context?: router.post( ...

Experiencing Issues with MySQL Data Length?

I am currently working with the mysql2 library in conjunction with NodeJS. I have identical code and database structures on both my local machine and a server. Interestingly, when I attempt to upload an image into the "photos" table on my local setup, ever ...

What are the steps to resolve the issue of assigning void type to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined in a react application?

I'm trying to update the state isOpen to true or false when clicking on a div element, but I keep getting an error with the following code: function Parent() { const [isOpen, setIsOpen] = React.useState(false); return ( <Wrapper> ...

Enhance Material UI with custom properties

Is it possible to add custom props to a Material UI component? I am looking to include additional props beyond what is provided by the API for a specific component. For example, when using Link: https://material-ui.com/api/link/ According to the document ...

After 6 minutes of inactivity, queues are automatically deleted when the Android tablet enters standby mode

Once the client (also known as the browser) goes into sleep mode, it stops receiving new updates from the subscribed queue after about 6 minutes. Upon checking RabbitMQ Management, I noticed that the related queues (like stomp-subscription-MBSsZ9XB0XCScXbS ...

The command "npm run watch" is hanging

Previously everything was running smoothly, but now I seem to be facing an issue with the npm run watch command. It gets stuck at this point: 10% building 1/1 modules 0 active webpack is watching the files… 12% building 19/27 modules 8 active ...View.vu ...

Leverage React.js by incorporating a Header-Imported JavaScript Library

I recently developed a React.js web application and am exploring the use of Amplitude Analytics, which provides a Javascript SDK found here. According to the guidelines, I need to include a <script></script> within the <head></head> ...

Is there a way to integrate the AuthState TypeScript Interface into the react-oidc-context Node package for testing in Next.js?

We are currently working on a Next.js application that utilizes the react-oidc-context Node module for authentication with ADFS. During our testing phase using Vitest, we encountered the following error: TypeError: Cannot read properties of undefined (rea ...

Next.js presents a challenge with micro frontend routing

In the process of developing a micro frontend framework, I have three Next.js projects - app1, app2, and base. The role of app1 and app2 is as remote applications while base serves as the host application. Configuration for app1 in next.config.js: const ...

Obtain the parameters of a function within another function that includes a dynamic generic

I am attempting to extract a specific parameter from the second parameter of a function, which is an object. From this object, I want to access the "onSuccess" function (which is optional but needed when requested), and then retrieve the first dynamic para ...

The values of object keys are printed in a random order

Hey everyone, I have an object that looks like this var dates = { '2021-09-15': 11, '2021-09-16': 22, '2021-09-17': 38, '2021-09-18': 50, '2021-09-19': 65 }; I am trying to display the valu ...

Try utilizing the array find() method in place of a traditional for loop

Is there a better way to refactor this code using the Array.find() method instead of nested for loops? onLoadTickets() { const ticketsReq = this.ticketService.getTickets(); const tariffsReq = this.tariffService.getTariffs(); forkJoin([ticketsR ...

The error message "TypeError: Unable to access the 'getFullWidth' property of an undefined value when using TSLint and TypeScript" was

I have been using Dan Wahlin's tutorials and online examples to set up Gulp and Typescript, but I am facing an issue with the tslint() function. The problem occurs in my code as follows: node_modules\tslint\lib\language\walker&bso ...

Retrieve all articles from a user using the TypeORM - findAll function

Is there a way to retrieve all articles of a specific user using the TypeORM package? In Sequelize, I have the following function: async findAllByUser(userUuid: string, findOptions: object): Promise<Article[]> { return await Article.findAll< ...