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 :

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

Transforming an Angular 1.x directive into Angular 2

I have been working on converting a wrap-bootstrap template with various widgets to Angular 2. The task of converting one particular widget has left me puzzled: .directive('changeLayout', function(){ return { restrict: 'A' ...

What is a way to incorporate two ngClass directives within a single div element?

Is it possible to include two ng-class directives within a single div element? If so, how should we go about writing them together? Thank you for your help. <div [ngClass]={'white-background': policyNumber.length <= 0} [ngClass]="getS ...

What is the correct approach for detecting object collisions in Phaser 3?

Hey everyone, I'm facing a problem and could use some assistance. Currently, I am trying to detect when two containers collide in my project. However, the issue is that the collision is being detected before the objects even start moving on screen. It ...

Encountering difficulties in installing firebase-tools via npm on MAC OSX 10.12.6 due to an error message stating "Unexpected end of JSON input while parsing near '...x","firebase":"~1.0.1)"

Currently, I am using node version 10.10.0 and npm version 6.4.1. I am attempting to install firebase CLI for a firebase project that has already been created in order to work on cloud functions. Strangely, the installation is successful on other systems ...

What is the best way to sort through this complex array of nested objects in Typescript/Angular?

tableData consists of an array containing PDO objects. Each PDO object may have zero or more advocacy (pdo_advocacies), and each advocacy can contain zero or more programs (pdo_programs). For example: // Array of PDO object [ { id: 1, ...

Is it possible to verify type equality in Typescript?

If the types do not match, I want to receive an error. Here is an example of an object: const ACTIVITY_ATTRIBUTES = { onsite: { id: "applied", .... }, online: { id: "applied_online", .... }, ... } as co ...

Error message: "Heroku dyno unable to locate module in Node application"

I am encountering an issue with my node.js app and API where it runs successfully using heroku local, but fails to run on a remote dyno. The specific error message I am receiving after the build is: 2018-02-19T21:19:38.000000+00:00 app[api]: Build started ...

Utilizing Eithers to effectively manage errors as they propagate through the call chain

I'm delving into functional programming and exploring different ways to handle errors beyond the traditional try/catch method. One concept that has caught my attention is the Either monad in various programming languages. I've been experimenting ...

Encountered an error during the React-Native AndroidX Task: Failed to compile Debug Java code with Javac in @react-native-community_view

Following the AndroidX update in modules for React Native (in this case @react-native-async-storage/viewpager), compilation is failing with errors indicating that symbols and methods cannot be found. I've attempted to resolve the issue by adding the ...

What is the best way to center vertically the angular + material mat-checkbox outside of a form group?

I am faced with two scenarios: The first scenario involves using a FORM GROUP with Angular 5 and Angular Material Design. Below is the code for handling multiple checkboxes: <div *ngSwitchCase="'checkboxField'" class="checkbox-field"> ...

Angular 11 Import Guide for MAT_DATE_LOCALE

I am struggling with importing 'mat-date-locale' in Angular 11 modules. The link I followed didn't provide a solution, as mentioned here: Cannot find name "MAT_DATE_LOCALE" with Material.angular Datepicker. In my project, I have A ...

Locating and casting array elements correctly with union types and generics: a guide

My type declarations are as follows: types.ts: type ItemKind = 'A' | 'B'; type ValidItem<TItemKind extends ItemKind = ItemKind> = { readonly type: TItemKind; readonly id: number; }; type EmptyItem<TItemKind extends ...

ASP.Net Core 3.1 server receives a blank user in JWT Bearer token

Today, I've been working on integrating JSON Web Token information with HttpContext.User using the Microsoft.AspNetCore.Authentication.JwtBearer library. The Issue: Whenever I make a request to the server, I can access functions with the [Authorize] ...

Constructor not executing when using Object.create

Attempting to instantiate a class within a static method, I am using Object.create(this.prototype), which appears to be functioning correctly. Nonetheless, when I check the console, my property items is showing as undefined. The base class called model lo ...

Leveraging the power of LocalStorage in Ionic 2

Trying to collect data from two text fields and store it using LocalStorage has proven tricky. Below is the code I have set up, but unfortunately it's not functioning as expected. Can you provide guidance on how to resolve this issue? In page1.html ...

Singleton pattern in Node.js dependencies management

I am currently in the process of developing my own npm package titled my-package. This package has a dependency on dependency-a and is intended to be used in a project called cool-project, which also relies on both my-package and dependency-a. cool-projec ...

Serious issue: a dependency request is an expression (Warning from Angular CLI)

I am currently exploring the dynamic loading of lazy child routes within a lazy routing module. For example: const serverResponse = [ { path: "transaction", children: [ { path: "finance", modulePath: &qu ...

Encountering an Error When Trying to Run Npm Install in React-Native

I encountered an issue while trying to perform an npm install on my project, so I deleted the node modules folder in order to reinstall it. However, even after running npm install in the appropriate directory, I continued to face numerous errors in my term ...

NPM is giving me a headache as it throws an error whenever I attempt to install a new package

Hey there, I'm having an issue with installing node packages in my react app. Every time I try to install one, I keep getting this error message: npm ERR! path C:\Users\earth\Desktop\Project\DAPP\client\node_modules ...

Oops! Vue.js encountered an issue where it couldn't access the property 'version' because it was undefined

Whenever I execute npm start, I encounter the following error message: ERROR TypeError: Cannot read property 'version' of undefined TypeError: Cannot read property 'version' of undefined It occurs after I have executed: npm install ...