Error in Angular 2: Module 'angular2/core' not found

I seem to be encountering an issue with Angular 2 and Typescript. Every time I attempt to gulp build, I keep getting the same errors. I've tried numerous solutions, including adding the <reference> tags in the files. Any suggestions on what steps to take next?

(7,26): error TS2307: Cannot find module 'rxjs/Rx'./Users/macbook/workspace/rss/src/app/services/rootscope.ts
(8,46): error TS2307: Cannot find module 'angular2/core'./Users/macbook/workspace/rss/src/app/services/rootscope.ts
(17,48): error TS2304: Cannot find name 'Observer'./Users/macbook/workspace/rss/src/app/services/api.ts
(6,26): error TS2307: Cannot find module 'angular2/core'./Users/macbook/workspace/rss/src/app/services/api.ts
(7,27): error TS2307: Cannot find module 'angular2/http'./Users/macbook/workspace/rss/src/app/services/api.ts
(15,13): error TS2339: Property 'http' does not exist on type 'API'./Users/macbook/workspace/rss/src/app/services/api.ts
(19,20): error TS2339: Property 'http' does not exist on type 'API'./Users/macbook/workspace/rss/src/app/services/api.ts
(23,20): error TS2339: Property 'http' does not exist on type 'API'../src/app/app.ts
(6,25): error TS2307: Cannot find module 'angular2/platform/browser'../src/app/app.ts
(7,25): error TS2307: Cannot find module 'angular2/core'../src/app/app.ts
(8,47): error TS2307: Cannot find module 'angular2/http'. 

rootscope.ts

/// <reference path="../../../node_modules/reflect-metadata/reflect- metadata.d.ts" />
/// <reference path="../../../node_modules/angular2/typings/browser.d.ts" />
/// <reference path="../../../node_modules/angular2/core.d.ts" />
/// <reference path="../../../node_modules/angular2/http.d.ts" />
/// <reference path="../../../node_modules/rxjs/Rx.d.ts" />

import {Observable} from "rxjs/Rx";

import {Injectable,EventEmitter,Output} from "angular2/core";

@Injectable()
export class ROOT_SCOPE {
  data: any;
  dataChange: Observable<any>;
  @Output dataChangeObserver: EventEmitter=new EventEmitter();

  constructor() {
    this.dataChange = new Observable((observer:Observer) => {
      this.dataChangeObserver = observer;
    });
  }

  set(data:any) {
    this.data = data;
    this.dataChangeObserver.next(this.data);
  }
}

Answer №1

I encountered a similar problem in the past due to a misconfiguration in System.config.js. Be sure to verify that the configuration settings are accurate.

Answer №2

Customize External Web Tools

Set up Visual Studio to utilize external web tools from a global source instead of the default tools included with Visual Studio:

•Access the Options menu by clicking on Tools and selecting Options

•Navigate to Projects and Solutions | External Web Tools in the left-hand panel

•Arrange the $(PATH) entry above the $(DevEnvDir) entries on the right side. This directs Visual Studio to prioritize external tools (like npm) from the global path over its own built-in tools.

•Click OK to save your changes and close the dialog box

•To apply this adjustment, restart Visual Studio

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

What is the reason for encountering a TypeScript error when using a union type?

interface Bird { age:string, eat:()=>any } interface Fish { age:string, swim:()=>any } type Pet = Fish | Bird; everything looks good so far, defining a Pet type const pet:Pet={ age:"sd", eat:()=>{} } when trying to return ...

Should data objects be loaded from backend API all at once or individually for each object?

Imagine having a form used to modify customer information. This form includes various input fields as well as multiple dropdown lists for fields such as country, category, and status. Each dropdown list requires data from the backend in order to populate i ...

The Date Filter is causing a glitch in formatting the date value

I have a variable called dateSubmitted with the value of "dateSubmitted": "07-09-20:11:03:30" Currently, I am utilizing Angular Version 7 Within my HTML code, I am using the date filter to format the date like so: <td> {{element.dateSubmi ...

Exploring datepicker options for my React Project - Determining the top choice for a datepicker

Uncertain if this is the most suitable place to pose this query. In the midst of developing a React website. Date input fields are essential for my project. Attempting to find a user-friendly method for date input. Possibly considering four options: ...

Creating a Commitment - Resolving the "Expected ')' after argument list" Error

Can someone please help me locate the syntax error in this code snippet? I've been searching for ages! An error occurred: Uncaught SyntaxError: missing ) after argument list promiseArray.push( new Promise(function (resolve, reject) { ...

What's the best way to ensure that your item list automatically updates the rendered list when an item is deleted

I've developed a web cart using Redux. The cart functions as expected, except for one issue - when I delete an item from the cart, the changes are only displayed after refreshing or navigating to another page. How can I update the view dynamically as ...

The simple passport.js sign-up feature is not successful as it mistakenly believes that the username is already in

Currently, I am working on setting up a basic signup feature for my Node + Express + Sequelize application using passport.js. The database is empty at the moment, and I am utilizing the passport-local strategy to extract the user's email and password ...

Issue with Vanilla JS form validation in Bootstrap 4

I successfully created a script to validate my Bootstrap 4 form, but I'm facing an issue where the error message is replacing the input field. Should I pursue validating BS4 with Vanilla JS or stick to using Bootstrap validation? What's the indus ...

Encountered an unexpected token '<' while attempting to renderToString() in SSR with React

While working on SSR with React, I have come across the following error: Syntax error: Unexpected token '<'` <div id="root">${ReactDOMServer.renderToString(<App />)}</div> As discussed here babel-register does not pr ...

Storing a Vue/JS element reference in a constant using Typescript

In my template, I have one form element and one button element: <button type="submit" id="ms_sign_in_submit" ref="submitButton" class="btn btn-lg btn-primary w-100 mb-5"> </button> Wi ...

Could someone please assist me in figuring out the issue with my current three.js code that is preventing it from

Recently, I decided to delve into learning three.js and followed the getting started code on the official documentation. However, I encountered a frustrating issue where the scene refused to render, leaving me completely perplexed. Here is my index.html: ...

setting the minimum date for a datepicker

Does anyone know how to set the minimum date for a calendar to be 2 days from the current date? For example, if today is the 27th, the minimum date should be the 29th. Any suggestions? Thanks. https://i.sstatic.net/7yHhH.png #html code <mat-form-field ...

Is there a way to dynamically update the path in react using react-router-dom?

Is there a way to fix the issue with updating the path dynamically using an API call in the router? The problem I'm facing is that when I click on the navigation menu, it loads perfectly the first time. However, if I refresh the page, I get a 404 erro ...

What are the methods of examining a scenario when JavaScript is enabled versus when it is disabled?

My application now includes ajaxy table sorting, and I am looking to implement cucumber tests that cover the functionality with and without JavaScript support. Using capybara, I know that by using the @javascript flag, it will execute the test with a java ...

Declaring a function type with a void parameter type in typescript

Embarking on my journey with ts and currently exploring TypeGraphQL. I came across something that caught my attention and seems unfamiliar to me: export declare type ReturnTypeFunc = (returns?: void) => ReturnTypeFuncValue; How should this type be unde ...

When handling cross-domain Jquery Ajax requests, the error function may unexpectedly return a success status

While attempting a cross domain GET request using jQuery AJAX, I am encountering a situation where the error function returns success as the status. The data I am expecting to be returned from the get service is: document.write("<div class=\"displ ...

Creating an autocomplete input field using existing JavaScript code can be done by incorporating the necessary logic

I've added some javascript and HTML snippets for reference. Currently, the code functions as follows: - When I click on the input with id=zipcode, a prompt box appears asking for a ZIP code. Is there a way to enhance this functionality? Specifically, ...

Display map upon clicking on Google Map marker trigger an AJAX request

Hello, I'm facing an issue with creating a new map when clicking on a marker. Here is the process I want to achieve: Show the default google map with included markers - this part works fine When I click on a marker, I want to create a new map where ...

What is the process for retrieving a documentDB document using Azure functions?

After setting up an Azure function and a DocumentDB database with a users collection, I find myself at a roadblock trying to establish the connection between the two. My intention is to input a username and have the function automatically retrieve the corr ...

Learn how to effectively switch tabs and pass data within an Angular Bootstrap application by utilizing the

Recently diving into Angular, I've come across what seems to be a simple problem: transferring data between tabs in an angular bootstrap project. Currently, my main component contains a tab structure (I'll simplify for clarity): <div> ...