When attempting to start npm, Angular2 fails to recognize a specific module

I recently installed a new module and added it to my system JS configuration as follows:

// specifying where to look for things using the map object
  var map = {
    'angular2-notifications': 'node_modules/angular2-notifications',
  };

  // loading configuration when filename or extension is missing using the packages object
  var packages = {
    'angular2-notifications': {defaultExtension: 'js'},
  };

After importing the module into my component:

import {NotificationsService, SimpleNotificationsComponent} from 'angular2-notifications'

I encountered the following error:

error TS2307: Cannot find module 'notifications'.

This error is related to the preceding import statement.

I found that the module works fine if I delete all references to it, start my app, and then add the imports and directives again while the app is already running.

Why does the error occur when I run npm start, but everything functions correctly with no errors when the app is already running?

Answer №1

When it comes to the sequence of execution, the TypeScript compiler takes precedence over SystemJS. This means that the compiler (tsc) is unaware of your SystemJS setup. Therefore, you need to reference the node module using the name it was installed as:

import {NotificationsService, SimpleNotificationsComponent}
  from 'angular2-notifications';

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

Have you utilized the Remember Me feature on the Angular login page before?

Here is the Angular Html code I have written: <form action="#" [formGroup]="login" (ngSubmit)="onSubmit()" class="login-form"> <label for="email">Email</label> <input type=" ...

What are the limitations of using concatMap for handling multiple requests simultaneously?

In my current function, I am receiving an array of objects called data/ids as a parameter. Within this function, I need to execute a post request for each element/id: fillProfile(users) { const requests = []; console.log( 'USERS.length:&apos ...

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

Executing functions in Vue TypeScript during initialization, creation, or mounting stages

Just a few hours ago, I kicked off my Vue TypeScript project. I've successfully configured eslint and tslint rules to format the code as desired, which has left me quite pleased. Now, I'm curious about how to utilize the created/mounted lifecycl ...

Tips for creating an Angular component that can receive a single value from a choice of two different lists

My angular component requires a value that belongs to one of two lists. For example: @Input() public type!: enumA | enumB; However, this setup becomes problematic when the enums share values or are linked together in a way I find undesirable. I would pre ...

Tips for minimizing delay after user input with Material UI

Background I'm currently working on a website project that includes a carousel of MUI cards using a unique stack as the underlying component. However, I've encountered an issue where there is a noticeable 4-second delay whenever I try to scroll ...

Troubleshooting Angular AutoComplete's Lack of Response from Async Validator

I am looking to enhance the user experience by implementing autocomplete functionality that triggers an error and sets the FormControl to invalid when a user deletes a character from a selected value. Unfortunately, I have encountered difficulties in achie ...

What is the reason for my Angular2 application not being able to locate my model?

An error occurred: XHR error (404) loading Access the Plnkr link here: https://plnkr.co/edit/gwa3NWArtWK0wjf2jr2h?p=preview I have created a file named models/home.ts https://i.sstatic.net/FQlgi.png The file includes: export function homeData() { re ...

Breaking apart a combination of unions into a collective group of tuples within TypeScript

Looking for a solution similar to TypeScript extract union type from tuple, this question delves into how to split ['a' | 'b', number] into ['a', number] | ['b', number] rather than focusing on why they are not direc ...

Creating an enum in TypeScript can be accomplished by using the enum

What transformations do enums undergo during runtime in the TypeScript environment? Fruit.ts enum Fruit {APPLE, ORANGE}; main.ts let basket = [Fruit.APPLE, Fruit.ORANGE]; console.log(basket); The resulting main.js file remains identical to the .ts ver ...

How can TypeScript leverage the power of JavaScript libraries?

As a newcomer to TypeScript, I apologize if this question seems simplistic. My goal is to incorporate JavaScript libraries into a .ts file while utilizing node.js for running my program via the console. In my previous experience with JavaScript, I utilize ...

When the URL is entered manually, there appears to be some unusual behavior with Angular

Currently, I am in the process of developing a web application using Angular 7 for the frontend and NodeJS, MongoDB, and ExpressJS for the backend. The app functions as expected when I interact with it by navigating through, but there is an issue when manu ...

Tips for effectively mocking a service class in a hybrid Angular project to facilitate unit testing

I'm currently working on a hybrid Angular project, but I've encountered some challenges with unit testing. Despite trying out this solution, it doesn't seem to be effective for my particular project. I keep receiving an error when running ...

Tips for displaying HTML content from a JSON web template

Currently, I am working with a JSON web template that consists of nested elements. My goal is to render HTML based on the content of this JSON web template. I attempted using ngx-schema-form, however my JSON does not contain properties variables. I also t ...

Guide on extracting just the key and its value from a Filter expression in a DynamoDB Query using Typescript

Presented here is a filter expression and Key Condition. The specific set of conditions are as follows: {"Age":{"eq":3},"Sex":{"eq":"MALE"}} const params: QueryCommandInput = { TableName: my_tab ...

Exploring the Angular Heroes Journey: What's the significance of one being labeled with a colon while the other is identified

Setting: Angular 5+ Source: https://angular.io/tutorial Within the heroes.component.ts class, we see an assignment using a colon: export class HeroesComponent implements OnInit { heroes: Hero[]; However, in the app.component.ts class, a different as ...

Steps for Adding a JSON Array into an Object in Angular

Here is a JSON Array that I have: 0: {name: "Jan", value: 12} 1: {name: "Mar", value: 14} 2: {name: "Feb", value: 11} 3: {name: "Apr", value: 10} 4: {name: "May", value: 14} 5: {name: "Jun", value ...

Clicking the button fails to trigger the modal popup

Upon clicking a button, I am attempting to open a modal popup but encountering an error: The button click works, however, the popup does not appear after the event. test.only('Create Template', async({ page })=>{ await page.goto('h ...

The Action-Reducer Mapping feature is encountering a type error when handling multiple types of actions

Earlier today, I posed a question about creating a mapping between redux action types and reducers to handle each type explicitly. After receiving helpful guidance on how to create the mapping, I encountered an error when attempting to use it in creating ...

Is it possible to get intellisense for Javascript in Visual Studio Code even without using typings?

Is it possible to have intellisense support in Visual Studio Code for a 3rd party library installed via npm, even if there is no typings file available? I have noticed this feature working in IntelliJ/Webstorm, so I believe it might be feasible. However, ...