Angular 13 package throws error "moment is not a function" when imported into a Angular 13 project

Question

i'm upgrading a private library (privLib) to Angular 13, so i can migrate all other projects, but when imported into a project one of the services uses moment and throws an error: "ERROR TypeError: moment is not a function".

Using the libray by itself in dev mode there is no problem. It Build without any problem and also publishing is without issues. When imported in other project, instead, throw an error "moment is not a function" if the component used from the privLib has it.

some of the files:

service.ts

import moment from 'moment';

...

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

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "esModuleInterop":true,
    "allowSyntheticDefaultImports": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2020",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2020",
      "es2018",
      "es2015",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true,
    "fullTemplateTypeCheck": true, 
    "enableIvy": true
  }
}

ng-package.json

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

moment version is ^2.29.1

I've already tried to follow other question in here, but some of that has "resolved" without explaing how. And others don't resolve the issue for me

edit: added Package.json

{
  "name": "privLib",
  "version": "105701.0.3",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ux:lib": "ng-packagr -p ng-package.json -c tsconfig.json && bundle-scss --config && npm pack ./dist",
    "clean:install": "rm -rf node_modules/ && npm i",
    "analyze": "ng run privLib:analyze",
    "postinstall": "ngcc --properties es2015 browser module main --first-only"
  }
  "dependencies": {
    "@angular-slider/ngx-slider": "~2.0.3",
    "@angular/animations": "~13.4.0",
    "@angular/cdk": "~13.3.9",
    "@angular/common": "~13.4.0",
    "@angular/compiler": "~13.4.0",
    "@angular/core": "~13.4.0",
    "@angular/forms": "~13.4.0",
    "@angular/material": "~13.3.9",
    "@angular/material-moment-adapter": "~13.3.9",
    "@angular/platform-browser": "~13.4.0",
    "@angular/platform-browser-dynamic": "~13.4.0",
    "@angular/router": "~13.4.0",
    "@fortawesome/angular-fontawesome": "~0.10.2",
    "@fortawesome/fontawesome-svg-core": "~6.4.2",
    "@fortawesome/free-brands-svg-icons": "~6.4.2",
    "@fortawesome/free-regular-svg-icons": "~6.4.2",
    "@fortawesome/free-solid-svg-icons": "~6.4.2",
    "@types/estree": "^1.0.2",
    "@types/ws": "8.5.4",
    "angular2-notifications": "9.0.0",
    "bootstrap": "~4.5.3",
    "chart.js": "~2.9.4",
    "hamburgers": "~1.2.1",
    "hammerjs": "~2.0.8",
    "jquery": "~3.5.1",
    "moment": "^2.29.1",
    "ng2-charts": "~2.4.3",
    "ng2-file-upload": "~2.0.0-3",
    "ngx-bootstrap": "~8.0.0",
    "ngx-captcha": "~11.0.0",
    "ngx-mask": "~11.1.5",
    "ngx-popper": "~7.0.0",
    "popper.js": "~1.16.1",
    "rxjs": "~6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.11",
    "@angular-eslint/builder": "^13.5.0",
    "@angular-eslint/eslint-plugin": "^13.5.0",
    "@angular-eslint/eslint-plugin-template": "^13.5.0",
    "@angular-eslint/schematics": "13.5.0",
    "@angular-eslint/template-parser": "^13.5.0",
    "@angular/cli": "^13.3.11",
    "@angular/compiler-cli": "^13.4.0",
    "@angular/language-service": "^13.4.0",
    "@babel/compat-data": "^7.8.6",
    "@babel/helper-plugin-utils": "^7.13.0",
    "@ngx-builders/analyze": "^2.0.0",
    "@types/core-js": "^2.5.2",
    "@types/jasmine": "^3.4.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "bundle-scss": "~1.3.4",
    "eslint": "^8.2.0",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jsdoc": "latest",
    "eslint-plugin-prefer-arrow": "latest",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^13.3.1",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "typescript": "~4.6.4",
    "webpack": "^4.41.5"
  }
}

Answer 1

Based on what you provided i'd say your package does not provide moment as a dependency.

https://github.com/ng-packagr/ng-packagr/blob/main/docs/dependencies.md

Explains it quite good. I'd recommend you to add moment to the list of peerDependencies in your package.json

https://blog.domenic.me/peer-dependencies/ explains how to do this.

As a side not I see jquery in your dependency list. I cannot think of a scenario where this is a valid dependency for Single Page Application.

Please follow the recommendations of ng-packagr and provide necessary dependencies as peer dependencies. Then try to build your solution again.