Module not found

[bananenhoschi]

Hi there,

I'm trying to use your library. I've some troubles to build the application. The app is bearly naked, that means just the unleash client lib and angular material. While building the app I receive this error:

./node_modules/@snowfrog/ngx-unleash-proxy-client/fesm2015/snowfrog-ngx-unleash-proxy-client.mjs:4:0-53 - Error: Module not found: Error: Can't resolve 'unleash-proxy-client' in 'C:\dev\ccyp\nostro\micro-frontends\feature-demo\node_modules\@snowfrog\ngx-unle
ash-proxy-client\fesm2015'

Error: node_modules/@snowfrog/ngx-unleash-proxy-client/lib/internal.d.ts:1:98 - error TS2307: Cannot find module 'unleash-proxy-client' or its corresponding type declarations.

1 export { IVariant as UnleashVariant, IContext as UnleashContext, IConfig as UnleashConfig } from 'unleash-proxy-client';

angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "feature-demo": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/feature-demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "feature-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "feature-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "feature-demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "feature-demo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "feature-demo:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "feature-demo"
}

package.json

  "name": "feature-demo",
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/cdk": "^13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/material": "^13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@snowfrog/ngx-unleash-proxy-client": "^1.0.2",
    "rxjs": "^7.5.2",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.1",
    "@angular/cli": "~13.2.1",
    "@angular/compiler-cli": "~13.2.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.13",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.5.5"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  }
}

Thank you for your help!

Best regards

[bananenhoschi]

Tested it also with a new angular app (ng new my-app). Doesn't work either.

[wolftrax5]

I have that error too, fix installing in the app the lib unleash-proxy-client

[snowfrogdev]

@bananenhoschi Thanks for trying out the library. At the moment, unleash-proxy-client is a peer dependency, which means that you have to install it yourself by doing npm i unleash-proxy-client. Let me know if that fixes your problem.

[snowfrogdev]

This is now explicitly explained in the readme.md file as of v.1.0.3

[bananenhoschi]

Works! Thanks for the fast fix!