The Angular 13 application encounters a "moment is not a function" error after importing an Angular 13 package

Upgrading a private library named privLib to Angular 13 has been my recent task in order to facilitate the migration of all other projects. However, an issue arises when this library is imported into another project where one of the services utilizes moment and triggers an error stating: "ERROR TypeError: moment is not a function".

When debugging the library in isolation during development mode, no problem is encountered. It compiles without any issues and can be published smoothly. But upon importing it into another project, the mentioned error surfaces if the component from privLib that requires it is used.

Below are snippets from some of the files:

service.ts

import moment from 'moment';

...

moment([dateParsed.getFullYear(), dateParsed.getMonth(), dateParsed.getDate()]) ----> this line triggers the error

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
  },
  "angularCompilerOptions": {
    ...
  }
}

ng-package.json

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "assets": [
    "src/assets",
    "src/scss/style-mixins.scss"
  ],
  "lib": {
    ...
  },
  "allowedNonPeerDependencies": [
    "."
  ]
}

The version of moment being used is ^2.29.1

I have attempted to follow solutions provided by others on this platform, but some seem unresolved or lack proper explanation. Others, unfortunately, do not solve the issue for me.

Edit: Added Package.json

{
  "name": "privLib",
  "version": "105701.0.3",
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Answer №1

After reviewing your information, it appears that the package you are using does not include moment as a dependency.

If you need more information on this topic, you can visit https://github.com/ng-packagr/ng-packagr/blob/main/docs/dependencies.md.

To rectify this issue, I suggest adding moment to the list of peerDependencies in your package.json file. You can learn how to do this by visiting .

Additionally, I noticed jquery in your list of dependencies. It is worth noting that having jquery as a dependency for a Single Page Application may not be necessary.

Follow the recommendations provided by ng-packagr and ensure all essential dependencies are categorized as peer dependencies before attempting to rebuild your solution.

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

Discovering the name of an object property by locating its corresponding id

I am working with a basic JSON data structure where I need to retrieve the name from an object by comparing its ID. For example, if I have the number 2, I need to check if it matches any object's ID. If the ID is equal to 2, then I must fetch the corr ...

Validator checking the status of an Angular form

Currently working on developing a custom form validator. In my test component, there are three checkboxes. The main form should only be considered valid if at least one checkbox is checked. https://stackblitz.com/edit/stackblitz-starters-69q3rq Within th ...

Deriving types from object combinations

Can the Foo type be 'flattened' to return { A?: string; B? number } in the code snippet below? type Foo = { A: string } | { B: number } type Flatten< T, Keys extends keyof T = T extends any ? keyof T : never, > = { [K in Keys]?: T[K] } ...

Error in Typescript SPFx: The property 'news' is not found in the type 'Readonly<{}>'

Currently, I am working on developing a spfx react component to showcase an RSS feed in the browser. My prototype is functional in a test environment, however, as spfx utilizes TypeScript, I am encountering a type error that I am unsure how to resolve. Rs ...

Utilizing Angular to convert a string array into an array of enum values through an HTTP GET request

I have a list of different user roles defined in my typescript code: enum UserRole { CONSULTANT, MANAGER, ... } There is a REST endpoint /users/id/roles that returns an array of strings representing the roles of a specific user: [ "CONSU ...

Error: Cannot modify the constant property 'name' of the function."&squo;

As I attempted to enter text into the input box, an error message appeared after typing my first letter stating "cannot assign to read only property". Below is the code I am referring to: The code of the component can be found here: https://i.sstatic.net ...

What is the process for generating flexible paths (URL strings) in angular applications?

Within my <app-parent> component, I have multiple buttons that each open a new floating panel on top of the parent. These floating panels also contain buttons that trigger the opening of additional floating panels, creating a stacking effect. My go ...

Testing Angular 2: Ensuring Component Properly Calls Router with Accurate Arguments

I'm facing an issue with a child component that includes a button element with 'routerlink' attribute for navigation upon clicking. The button does not have a '(click)' handler, only the routerlink. Currently, I am writing a unit ...

Centering on request, Google Maps adjusts its view to focus on

When I select a row, I want to set the map center to the provided coordinates in Primeng. The issue is that while this.options works fine in ngOnInit, it doesn't work when called in the showCords() function. Below is my code: gmap.component.ts im ...

Discover the steps to sign up for src updates in an Angular 7 iframe

Seeking a method to subscribe to the src (url) change within an IFrame in an Angular 7 Application. Is there a way to capture the src Change event? ...

Encountering the error message "String length is invalid" during the execution of ng build for a library

While working with Angular and attempting to build a large library using the command ng build <project>, we encountered the following issue: ❌ Generating "fesm2015" Invalid string length The build for fesm2020 was successful, but the sourcem ...

ng serve: Module 'tapable' not found

After moving my Angular 5 project to a new computer, I encountered an issue when attempting to ng serve: Cannot find module 'tapable' Error: Cannot find module 'tapable' at Function.Module._resolveFilename (module.js:469:15) at ...

What is the best way to connect an event in Angular 2?

This is an input label. <input type="text" (blur) = "obj.action"/> The obj is an object from the corresponding component, obj.action = preCheck($event). A function in the same component, preCheck(input: any) { code ....}, is being used. Will it wor ...

When exporting a custom ES6 module and importing it into a different local project, you may encounter unexpected outputs such as being undefined or

Currently, I am using TypeScript 3.4.5 and Webpack 4.32.2 on Windows 10 via WSL. My goal is to create a local package of tools that consolidates basic classes into an index file for exporting. However, when I try to import these classes into other project ...

How can I establish a connection to a Unix socket path using a connection string with Slonik?

Hey there! I encountered an issue while attempting to connect to a Google Cloud database using slonik: const pool = createPool( `socket:userName:password@/cloudsql/teest-123986:europe-west3:test?db=dbName` ) The error message I received was: error: throw ...

I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

I integrated the primeNg p-switch component into my Angular 2 project. By default, the input switch's values are boolean. However, I would like to have the values set to 'N' or 'Y' instead of true or false. @export class MyCompone ...

Show all span elements in a map except for the last one

Within my ReactJS application, I have implemented a mapping function to iterate through an Object. In between each element generated from the mapping process, I am including a span containing a simple care symbol. The following code snippet demonstrates t ...

Guide to adding annotations to a PDF document using Angular 2

As a novice in the field of Angular development, I am seeking guidance. Currently, I have an application that displays PDF files. My goal is to be able to annotate and make changes on these PDF files by adding drawings such as circles, lines, or text. Ho ...

Ways to resolve NPM dependency conflicts

Attempting to set up all the necessary npm packages for the AWS sample demo found at https://github.com/aws-samples/amazon-chime-sdk-classroom-demo on my laptop has been a bit challenging. Every time I try to run npm install I can't help but wonder i ...

Troubleshooting compilation problems in Angular2 with nested components

I have created two components in Angular2 using TypeScript: app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', styles : [` .parent { background : #c7c7c7; ...