Embedding Globalize.js into an Angular component

Hey there! I'm currently working on building an Angular 4 application that needs to support L10n. I've decided to incorporate globalize into my project. Below is a snippet of my App component:

import { Component, OnInit } from '@angular/core';
import globalize from 'globalize';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  glb: any;

  constructor() {
    var formatter = globalize.numberFormatter();
    console.log(formatter(233));
  }

  ngOnInit() {
    this.glb = globalize;
    console.log(this.glb.currencyFormatter("1234"));
  }
}

However, I'm encountering the following error during compilation:

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'globalize' in 'C:\project\aag
 @ ./src/app/app.component.ts 12:0-34
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4201 ./src/main.ts

Your assistance with this issue would be greatly appreciated!

Answer №1

Attempt to bring it in using this method

import * as Localize from 'localize';

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

Error code 2769 in Typescript occurs when attempting to transfer process information to the data state in order to utilize it within a modal

I'm encountering an issue while trying to pass a process to a setData state from a .map function in order to display it on a modal. The error message I'm receiving is: "No overload matches this call. Overload 1 of 2, '(props: { compone ...

Angular's browser animation feature allows for smooth slide-up animations from the bottom

I have been experimenting with creating a simple animation, and it's working, but in the opposite direction of what I intended. I want the div to open from bottom to top and close from top to bottom. Here is my animation code in Angular: animations: ...

When utilizing the package, an error occurs stating that Chart__default.default is not a constructor in chart.js

I have been working on a project that involves creating a package with a react chart component using chart.js. Everything runs smoothly when I debug the package in storybook. However, I encountered an error when bundling the package with rollup, referenc ...

An uncommon token was found by Jest - import (Angular CLI 6)

Struggling to get jest installed and running in an angular/cli (v6) app on Mac. Despite trying various methods to set up jest, I keep encountering the following error: Test suite failed to run Jest encountered an unexpected token This usually me ...

Looking for the location of the traceResolution output?

When I enable traceResolution in my tsconfig.json file, where can I expect to see the resulting output? { "compilerOptions": { "traceResolution": true, ... The --traceResolution flag enables reporting of module resolution log messages. You ...

I encountered an issue when trying to call a class in angular 2, receiving the error message "Supplied parameters do not match any

A new class named items-class.ts was successfully created: export class ItemsClass { constructor(public name:string, public desc:string, public stat:string){} } To implement this class in a component called app.component.ts: import { Component } fro ...

A guide on implementing RxJS Observables to target a specific DIV element

Currently, I am working with Angular 2. At the moment, I have been using this method to select a specific DIV element: <div #aaa> </div> @ViewChild('aaa') private aaa: ElementRef; ngAfterViewInit() { let item = this.aaa.nativeEle ...

When attempting to send file data in a $http Post request in Angular 8, the Rails API logs show an empty object {}

Using Angular 8 with a Rails 5.2 API I am currently attempting to add an image attachment feature to my Event model in the edit form. I have been following instructions from this specific tutorial Below is a snippet of my TypeScript code: const httpOpti ...

What could be causing Typescript Intellisense to not display Object extensions?

Let's take a look at this unique way to extend the Object type: interface Object { doSomething() : void; } Object.prototype.doSomething = function () { //perform some action here } With this modification, both of the following lines will c ...

Typescript compiler: Unable to locate the definition for 'Map' data type

I am developing an Electron + Angular application. I have decided to incorporate Typescript for my Electron component, so I created a main.ts file and attempted to compile it to main.js using the 'tsc main.ts' command. Unfortunately, I encountere ...

The 'GoogleAuthProvider' property cannot be found on the 'AngularFireAuth' type

When attempting to sign in with Google using 'AngularFireAuth', I encountered an error. Here is the code snippet from my auth.service.ts file: import { Injectable } from '@angular/core'; import { first } from 'rxjs/operators'; ...

The Recoil Nexus encountered an error: the element type provided is not valid. It should be a string for built-in components or a class/function for composite components, but an object was

Encountered the following error message: Error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at ReactDOMServerRenderer.render ... This issue arose when integra ...

Is there a way to both add a property and extend an interface or type simultaneously, without resorting to using ts-ignore or casting with "as"?

In my quest to enhance an HTMLElement, I am aiming to introduce a new property to it. type HTMLElementWeighted = HTMLElement & {weight : number} function convertElementToWeighted(element : HTMLElement, weight : number) : HTMLElementWeighted { elemen ...

What exactly does Isomorphic rendering entail when it comes to ReactJS?

Javascript frameworks pose a challenge for Search Engine optimization as they create dynamic content that is not easily indexed. React addresses this issue with Isomorphic rendering. But what exactly does this concept entail and how does it differ from Ang ...

Tips on updating TypeScript to a higher major version

Despite upgrading all packages, deleting node_modules and package-lock.json, and reinstalling with npm install, the typescript runtime in my git repo is still showing version 4.9.5. How can I update the tsc version to be higher than 5.0? $ npx tsc --versi ...

Explore the route parameter in Angular 2

Trying to transfer a variable between two components using route parameters? In the first component, an id is sent using this function: sendId(id : string) : void { this.router.navigate(['/component2', id]); } The routing module setup inclu ...

Page Breaks - Patience in anticipation of dataSource readiness

I am facing an issue with my pagination service and component. The dataSource appears empty when the page is loaded for the first time, but by the second time it is populated and I can display the dataTable and paginate successfully. Is there a workaround ...

The error `TypeError: Unable to access properties of an undefined value (reading 'authService')` occurred

I'm attempting to check if a user is already stored in local storage before fetching it from the database: async getQuestion(id: string): Promise<Question> { let res: Question await this.db.collection("questions").doc(i ...

Leveraging the OpenLayers Map functionality within an Angular service

I am curious to learn if there is a way to utilize a service in Angular for creating an OpenLayers map and then passing that service to other components to update the map based on interactions within those components. I have outlined my approach below. Des ...

Session is not functioning properly as anticipated

import * as express from 'express'; import * as session from 'express-session'; import * as bodyParser from 'body-parser'; const app: express.Express = express(); app.use(bodyParser.json()); app.use(session({ secret: &apos ...