What is the process for importing a TypeScript module in the StackBlitz editor?

When I enter the editor at Stackblitz.com and start a new Angular project, it comes with default files and folders already set up.

In the "Dependencies" section, I decide to add shortid. So, I input that in the designated box and it begins loading the correct version. Everything seems to be going smoothly at this point.

Next, in the app.component.ts file, my understanding is that I should be able to "import" this - but no matter how I try, I keep getting the error message "Cannot find module 'shortid'."

import * as sid from 'shortid';
  import { generate } from 'shortid';
  import "/node_modules/shortid";
  import shortid = require("shortid");
  

The following example doesn't show an error, but also doesn't seem to expose any of the functionalities provided by shortid.

import 'shortid';
  

Is there an issue with StackBlitz on this particular matter? Or could it be a mistake on my part?

Answer №1

Not all packages come with a default export, so in such cases you have to do the following:

import * as shortid from 'shortid';

Here is a functional StackBlitz example: https://stackblitz.com/edit/angular-kr9x7m

Update: I initially misunderstood your question. IntelliSense is not working for me either, but the functionality of shortid is still intact.

Answer №2

Restarting my application was the solution that worked for me.

Answer №3

For those facing a similar issue and stumbling upon this question, don't worry if Stackblitz gives an error about not recognizing a module. It may still work fine when you actually run the code. The error message is probably just a security feature in your browser (you might see something like this in the browser console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('https://stackblitz.com').

In most cases, you can safely ignore this and proceed with running your code.

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

TypeScript: By providing a variable CLASS as an argument to a function, automatically determine the return type to be an object of the specified class without any additional information

I am looking to create a function that accepts actual class objects themselves as arguments (within an object containing multiple arguments), with the return type of the function being inferred to be an instance of the class provided as the argument. In t ...

In order to either pass a component variable as a parameter or set it as a global variable

Currently, I am in the process of restructuring my Angular2/Ionic2 code and seeking advice on the best practice for my specific situation. Within my component, I have declared a variable (this.questions) that I need to utilize in my service method. There ...

Nativescript Image-picker is encountering difficulties locating files in external storage

I have been using nativescript-imagepicker from the related website and followed all the instructions in the documentation and sample codes. I even set the permission code in AndroidManifest.xml for API 29 and higher. However, I encountered an error after ...

The use of the `/deep/` combinator in CSS has been phased out and is set to be completely removed

After updating my angular to version 4.0.0 and chrome to 62.0.3202.94, I encountered the following error message: [Deprecation] /deep/ combinator in CSS is deprecated and will be removed in M63, around December 2017. Refer to for more information. The ...

A special term in Typescript that consistently points to the present object within the class

Is it feasible to utilize a reference to the current instance of a class in Typescript, similar to "this" in C# and Java, rather than the typical binding context interpretation in JavaScript? ...

Value attribute property binding

Currently, I am diving into the world of Angular 5 and focusing on grasping the fundamentals. One concept that caught my attention is template reference variables. However, I encountered a roadblock along the way. Instead of utilizing a template reference ...

What is the method for retrieving the name of an object's property within an Angular template

I am trying to display the name of a nested object's property using Angular interpolation <ng-container ngFor="let item of saleDetailsAggegater.productMap | keyvalue"> <tr *ngFor="let qtyMap of item.value | keyvalue"&g ...

Activate the download upon clicking in Angular 2

One situation is the following where an icon has a click event <md-list-item *ngFor="let history of exportHistory"> <md-icon (click)="onDownloadClick(history)" md-list-avatar>file_download</md-icon> <a md-line> ...

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

I have created a custom Directive called isSelected and applied it to several elements in different components as shown below: <i isSelected class="icon"></i> <i isSelected class="icon"></i> <i isSelected class="icon"></i ...

Is it possible to store all data in the Redux store while using Angular?

As I develop an Angular form, I find myself working with numerous 'select' fields. I'd like to populate these select field options from the server. Would it be advisable to store this data in the ngrx store? Or would using services suffice t ...

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

The server encountered an issue with starting the ANCM Out-Of-Process, resulting in HTTP Error 502

We currently have two projects in progress. One involves a Web API built on .NET Core 2.2.6 and an Angular 8 Single Page Application integrated within .NET Core 2.2.6. Both projects have been deployed on IIS 7 with the Web API functioning properly, but the ...

Creating an Excel file with Angular 6 using sheetJs and eliminating specific keys from the data

I have a JSON data structure that includes information about individuals and the cities they live in: [{"name":"peter", "surname":"cage", "nickname": "peterbob", "city":{"id":130, "name":"GreatCity"} }, {"name":"james", "surname":"parot", "nickname": "m ...

What steps are needed to integrate a Spring Boot application with Angular 2?

After incorporating Angular 2 into my Spring Boot application, I successfully deployed all of my files. However, the routing feature is not working as expected. Below is the file structure. This setup works smoothly with a Node.js server. https://i.sstati ...

What steps are needed to have typescript recognize a typed function as a throw-statement?

I'm grappling with a typescript issue - I have a custom function that consistently throws an error, which is used to handle null variables. Strangely, if I directly throw an error without using the function, typescript recognizes that the variable can ...

Although the karma test was successful, an error was encountered when running the npm test

While working with https://github.com/AngularClass/angular2-webpack-starter, I encountered an issue. When I navigate to the project directory and execute: karma start I receive the following output: SUMMARY: ✔ 0 tests completed However, when I run: np ...

Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in

Looking to integrate the Nuxeo ClientSdk with my Angular 6 client to consume its REST API, but facing issues due to the lack of typescript definitions for this JavaScript package. Tried importing the library into my project using the following code snippe ...

Tips for arranging TypeScript AST nodes and generating a TypeScript file as the final result

My objective is to reorganize the code in a way that sorts the link(foo) value based on the string text: import Text from '~/text.js' export default function rule(text: Text) { // Sorting rules alphabetically } Although I have made some progr ...

Can a button be incorporated into an accordion feature using DevExtreme Angular?

I am using devextreme-angular and I would like to include two buttons such as DELETE and EDIT to accordion. The accordions receive the posts I typed so i have title and content for each accordion. What I need now is to add these buttons to each of the cont ...

serve angular6 application using fastify

I have a question regarding my setup. I am working on an Angular 6 application with a Fastify back-end. Fastify serves the application like this: fastify.use(['/'], serveStatic(path.join(__dirname + '/../dist/'))); The Angular build i ...