Angular 7 is throwing an error message that reads: "Module not found: 'AppModule'"

When running ng build, an error occurs without providing any specific details like the file name. This project is an ASP.NET Core app with Angular 7.

c:\Users\siva\Myapp\ClientApp>ng build
Date: 2019-08-08T13:22:52.205Z
Hash: 3cf9605e6457ff409625
Time: 6746ms
chunk {main} main.js, main.js.map (main) 671 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.3 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 747 kB [initial] [rendered]

ERROR in No NgModule metadata found for 'AppModule'.

The locally installed packages and their versions are:

npm list --depth=0 
+-- @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7210071b1e165f131c15071e130032425c43415c4b">[email protected]</a>
... (more package information)

The content of the package.json file is as follows:

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "myapp",
  "scripts": {
    "ng": "ng",
    ... (more scripts listed)
  },
  ... (more configuration details)
}

The main.ts file contains:

import { enableProdMode } from '@angular/core';
... (content of main.ts)

The app.module.ts file includes:

import { APP_BASE_HREF } from '@angular/common';
... (content of app.module.ts)

I have tried various troubleshooting steps such as deleting the node_modules folder, running npm install, clearing the npm cache using 'npm cache clear --force', and even reinstalling Node.js and the source code from scratch. Despite these efforts, the same error persists. How can I further investigate the root cause of this error?

Additionally, when using the --aot parameter in ng build, a different error occurs:

TypeError: Cannot read property 'flags' of undefined

Answer №1

It seems like the issue may stem from installing the webpack package. Before encountering this error, there was a problem with the webpack package not being found. I tried fixing it by running either npm install webpack or npm install webpack --save. I can't quite recall which one it was. Afterwards, I encountered another error related to node-sass and had to install that as well. I referred to a helpful comment on this GitHub issue here, and followed these steps:

  1. I deleted the entire asp.net core project

  2. I uninstalled nodejs

  3. I deleted the npm-cache and npm folders in C:\Users\myname\AppData\Roaming\
  4. I reinstalled nodejs
  5. I obtained a fresh copy of my working project

  6. I ran npm install within the angular project folder containing the package.json file

  7. I executed "node_modules\.bin\ng build"
  8. I executed "node_modules\.bin\ng serve"

The site is now up and running smoothly.

For me, steps 1 through 4 were necessary because I had made changes to globally installed packages. However, simply deleting the node_modules folder might suffice for others instead of going through all these steps

I am developing an asp.net core project in Visual Studio Professional 2017. Starting the project in IIS directly from the IDE allows me to run the site without having to install @angular/cli globally.

In simple terms, if I had initially run the command npm install within the angular project folder upon receiving the source code, none of these issues would have occurred. Since both webpack and node-sass packages are included in the @angular-devkit/build-angular package, there is no need to install them separately. Nevertheless, the exact reason why manual installations of those packages caused problems remains unclear.

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

Creating personalized functions in Object.prototype using TypeScript

My current situation involves the following code snippet: Object.prototype.custom = function() { return this } Everything runs smoothly in JavaScript, however when I transfer it to TypeScript, an error surfaces: Property 'custom' does not ex ...

Is there a more effective alternative to using the ternary condition operator for extended periods of time?

Do you know of a more efficient solution to handle a situation like this? <tr [style.background]="level == 'ALARM' ? 'violet' : level == 'ERROR' ? 'orange' : level == 'WARNING' ? 'yellow' ...

What improvements can I make to enhance my method?

I have a block of code that I'm looking to clean up and streamline for better efficiency. My main goal is to remove the multiple return statements within the method. Any suggestions on how I might refactor this code? Are there any design patterns th ...

Using GraphQL to set default values in data within a useEffect hook can lead to never

Here's the code snippet that I'm working with: const [localState, setLocalState] = useState<StateType[]>([]); const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, { variables: { id: client && client.id ...

Choosing a specific option from a dropdown menu in Angular

Whenever I try to update the province of a person using the dropdown list, it doesn't display the old province value. This issue seems to be related to the HTML rendering. This dropdown list is a crucial part of the person's information that I f ...

Using TypeScript to specify data types in the Vue data object

I am currently utilizing Vue.js with Typescript in a webpack project. Following the guidelines provided in the Recommended Configuration in my tsconfig.json, I have set: "strict": true, Within one of my components, I have: declare interface P ...

"Learn how to trigger an event from a component loop up to the main parent in Angular 5

I have created the following code to loop through components and display their children: parent.component.ts tree = [ { id: 1, name: 'test 1' }, { id: 2, name: 'test 2', children: [ { ...

Is there a way to trigger a function upon the loading of a template in Angular 2?

I'm a newcomer to angular2 and I need to trigger a function when a template loads or initializes. I have experience with achieving this in angular1.x, but I'm struggling to figure out how to do it in angular-2. Here's how I approached it in ...

The ES6 import feature conceals the TypeScript definition file

I currently have two definition files, foo.d.ts and bar.d.ts. // foo.d.ts interface IBaseInterface { // included stuff } // bar.d.ts interface IDerivedInterface extends IBaseInterface { // more additional stuff } Initially, everything was funct ...

Issue encountered while deploying Next.js application on vercel using the replaceAll function

Encountering an error during deployment of a next.js app to Vercel, although local builds are functioning normally. The issue seems to be related to the [replaceAll][1] function The error message received is as follows: Error occurred prerendering page &q ...

Validating React components with TypeScript using an array structure where the field name serves as the key

Trying to implement form validation with React. I have a main Controller that contains the model and manages the validation process. The model is passed down to child controllers along with the validation errors. I am looking for a way to create an array ...

Retrieving the <html> tag within an Angular component

In an Angular component, the <body> and <head> tags can be accessed by injecting DOCUMENT as shown below: import { DOCUMENT } from '@angular/common'; import { Inject } from '@angular/core'; export class TestComponent { c ...

Issue with TypeScript not recognizing node_modules symlink in Docker container

I'm currently working on containerizing an Express app in TypeScript. However, I am facing issues linking node_modules that have been installed outside the container. Even though a volume is mounted for development, I keep encountering errors in my ed ...

Extending a type by adding properties from separate files using TypeScript

I am faced with a situation where I have a file containing either a type or interface variable (all of which are exported), and I need to add new properties to this variable from different files without using extends. Essentially, making changes to the sam ...

In TypeScript, make sure to verify the type of an object to avoid any potential compilation errors stemming

Here is the code snippet: export default class App { el: HTMLElement; constructor(el: string | HTMLElement) { if (typeof el === "string") { this.el = document.getElementById(el); } if (typeof el === typeof this.el) { t ...

Is it possible to safely remove a class instance containing a GLcontext within a react.FC State to prevent memory leaks, especially when using a "class object with THREE.js"?

I have successfully developed a react.FC() application. In this application, you have the ability to throw a bottle in the metaverse (like a message in a bottle) to be discovered in the future. The app retrieves information from an API and constructs a c ...

What could be causing the lack of updates to my component in this todo list?

Based on my understanding, invoking an action in MobX should trigger a rerender for the observer. However, when I call the handleSubmit method in my AddTask component, it doesn't cause the TaskList observer to rerender. Should I also wrap AddTask in a ...

Setting up Typescript for a Node.js project configuration

I am facing an issue with my simple class class Blob { } After compiling it with TypeScript, I encountered the following error message: ../../../usr/lib/node_modules/typescript/lib/lib.dom.d.ts:2537:11 2537 interface Blob { ~~~~ ...

Aframe's a-assets feature experiencing issues when loading dynamic data through Angular 2

Since there is no fixed number of assets that need to be loaded from the server, I am utilizing Angular 2 templates to dynamically create assets. Below is a snippet of sample code: <a-assets> <div *ngFor="let scene of floorData.scen ...

Encountering an Object Type Unknown error while working with Typescript and React

I am currently working on building a chatbox in React using TypeScript and Firebase. Below is the code for my Room and Message components: function ChatRoom() { const messagesRef = firestore.collection('messages'); const query = messagesRef.o ...