Error Encountered: Unable to locate angular/core module in Angular 2

I have encountered an issue while setting up a new Angular2 app from the quickstart folder on the Angular website. Despite following all suggested solutions, I am still facing errors. After running npm install, everything seems fine as I can see my node_modules folder at the root level.

However, when I try to execute ng serve, I receive the following error messages :

ERROR in angular/src/app/app.component.ts (1,27): Cannot find module '@angular/core'.
ERROR in angular/src/app/app.component.ts (8,14): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
ERROR in angular/src/app/app.module.ts (1,31): Cannot find module '@angular/platform-browser'.
ERROR in angular/src/app/app.module.ts (2,26): Cannot find module '@angular/core'.
ERROR in angular/src/app/app.module.ts (16,14): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
ERROR in angular/src/main.ts (1,32): Cannot find module '@angular/core'.
ERROR in angular/src/main.ts (2,40): Cannot find module '@angular/platform-browser-dynamic'.

Here is the structure of my folders :

https://i.sstatic.net/fnEvm.jpg

And here is my tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

Edit :

This is my app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer №1

After reviewing my tsconfig.json file, it appears that there are discrepancies between mine and yours. The "include" and "exclude" key values pairs do not match up. Take a look below for reference.

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer №2

Take a look at my tsconfig file below for some guidance:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

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

retrieve the preferred item data from the local storage

Having trouble retrieving favorite items from my list item app using Ionic 4. Although my JSON data is added to local storage, I am unable to retrieve the data properly. favourite.service.ts getAllFavoriteItems(){ return this.storage.get("object"); ...

Is Redux or Flux the default state management tool used in React?

After using npx create-react-app my-app --template typescript to create a new React app, what is the default software architecture (MVC, Redux, or Flux)? I've been researching the differences between them and it has left me feeling a bit confused. I w ...

The ngAfterViewChecked function seems to be caught in an endless loop

I am facing an issue where the <cdk-virtual-scroll-viewport> starts from the bottom, but I am unable to scroll up. I suspect that this problem is related to the use of AfterViewChecked. Even after trying AfterViewInit, the issue persists. @ViewChil ...

Unable to retrieve NPM environment variables

My package.json file includes a config variable named "foo" set to "bar", which I am trying to access through an NPM script. "config": { "foo": "bar" }, "scripts": { "test": "echo $npm_package_config_foo" } When I run npm run test, the ex ...

Modifying the nodeJS executable path on Windows without administrator privileges

My Windows PC does not grant me admin rights, but the admin has already installed Node at C:\Program Files\nodejs, with version 12: PS C:\Users\JO52900> node -v v12.18.3 PS C:\Users\JO52900> Get-Command node CommandType ...

What are some ways I can incorporate PrimeNG components into my Ionic 4 project?

Exploring the integration of PrimeNG components in an Ionic 4 application is my current project. The initial steps I took included creating a blank Ionic 4 app: ionic start myApp blank Afterwards, I proceeded to download PrimeNG into the project: npm ...

Joining arguments beyond argv[2] in a Node.js application

Recently, I received a suggestion from Mykola Borysyuk to use node-optimist. However, the author mentioned that it's deprecated and recommended using Minimist. Even after going through the information, I have a basic understanding. Can someone provid ...

A personalized command line interface that mimics the functionality of "npm install" but enables the installation of libraries in a directory other than the standard "node_modules"

As I delve into the world of NodeJS, I've come to understand that running "npm install" results in libraries being installed into a directory called "node_modules". However, my goal is to create a similar process but through my own CLI. Instead of usi ...

Changing the second instance of a specific text in Angular

str = "oreo has oreo"; switch the 2nd instance of oreo with chocolate result = "oreo has choklate"; how to change specific occurrence of a string in Angular 8. ...

An object may be null when its type is A or undefined, but we are certain it is not undefined

Since the release of version 4.8.4, the TypeScript compiler has been flagging an issue with the following code: type A = {v: number} function get_the_first<T>(xs: T[]): T | undefined { if (xs.length > 1) return xs[0]; else ...

Unit testing in Angular 4 with Jasmine Spy: The expectation was for 'New text' but received undefined

I have a simple function in my app.component.ts that is meant to modify a parameter, and I am trying to test this function using a spy. However, for some reason, my changeText function always returns undefined. Can you help me identify what I might be doin ...

The Jest test encounters a SyntaxError due to an unexpected token Export causing it to fail

I am encountering an issue where my test is failing with the error message Unexpected token 'export' that stems from code imported from the swiper package. I have attempted to solve this by adding node_modules to the transformIgnorePatterns in my ...

Tips on Configuring the Attributes of a TypeScript Object in Angular 2

A TypeScript class called Atom is defined as follows: export class Atom { public text: String; public image: boolean; public equation: boolean; } To create an object of type Atom class and set its properties, the following steps are used: atom: ...

Transmit information to Component via Modal Service

I am utilizing a Modal Service in Angular 7. To see an example, check out this StackBlitz Example. The service is used as follows: export class AppComponent { constructor(private modalService: ModalService) { } openModal() { this.modalService.o ...

Develop a Nativescript Angular component dynamically

Is there a way for me to dynamically generate a Component and retrieve a View object to insert into a StackLayout? ...

Retrieve objects from an array that contain a certain specified key

I am trying to extract the objects from All_reports that contain the key: comentarioAdmin. Currently, I am retrieving all reports from All_reports, but I only want the reports that have the key comentarioAdmin. Thank you! getReports() { this.Service.g ...

What should be done in the absence of any subscriptions?

Incorporating a generic HTTP service to encapsulate certain HTTP behaviors is part of our system. In case of an error, we include the error in a BehaviorSubject. I am contemplating on whether there is a method to display this error only if no one is subsc ...

Angular HTTP client implementation with retry logic using alternative access token

Dealing with access tokens and refresh tokens for multiple APIs can be tricky. The challenge arises when an access token expires and needs to be updated without disrupting the functionality of the application. The current solution involves manually updati ...

Service stub in Angular containing static properties

I am faced with a challenge in my service that requires the use of APP_INITIALIZE to set a static property value. Another service within my system depends on this property, so I need to stub this service with the static value. However, using provide is n ...

When attempting to run `npm install` followed by `npm run dev`, the result is an unfortunate

After downloading Laravel 9, I attempted to execute npm run save && npm run dev but encountered the following error in the Terminal: npm ERR! code E404 npm ERR! 404 Not Found - GET https://skimdb.npmjs.com/registry/AND - not_found npm ERR! 404 npm ...