The file node_modules/angular2-qrscanner/angular2-qrscanner.d.ts has been detected as version 4, while version 3 was expected. Resolving symbol

We're encountering a Metadata error that is causing obstacles in our deployment process. This issue is preventing the execution of ng build. Below, you will find the configuration details along with the complete error trace.

ERROR in Error: Metadata version mismatch for module <Angular4.3-AppPath>/node_modules/angular2-qrscanner/angular2-qrscanner.d.ts, found version 4, expected 3, resolving symbol <Module_Name>in <Angular4.3-AppPath>/src/app/modules/manage/device/device.module.ts, resolving symbol <Module_Name>in <Angular4.3-AppPath>/src/app/<Module_Path>.ts
at syntaxError (<Angular4.3-AppPath>\node_modules@angular\compiler\bundles\compiler.umd.js:1725:34)
at simplifyInContext (<Angular4.3-AppPath>\node_modules@angular\compiler\bundles\compiler.umd.js:24953:23)
at StaticReflector.simplify (<Angular4.3-AppPath>\node_modules@angular\compiler\bundles\compiler.umd.js:24965:13)
at StaticReflector.annotations (<Angular4.3-AppPath>\node_modules@angular\compiler\bundles\compiler.umd.js:24395:41)
at _getNgModuleMetadata (<Angular4.3-AppPath>\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (<Angular4.3-AppPath>\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at <Angular4.3-AppPath>\node_modules@angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce ()
at _extractLazyRoutesFromStaticModule (<Angular4.3-AppPath>\node_modules@angular\compiler-cli\src\ngtools_impl.js:128:10)
at Object.listLazyRoutesOfModule (<Angular4.3-AppPath>\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (<Angular4.3-AppPath>\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (<Angular4.3-AppPath>\node_modules@ngtools\webpack\src\plugin.js:241:66)
at _donePromise.Promise.resolve.then.then.then.then.then (<Angular4.3-AppPath>\node_modules@ngtools\webpack\src\plugin.js:495:24)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Compilation failed.

Settings: angular2-qrscanner version: 1.0.7 Angular CLI: 1.5.0 Node: 8.10.0 OS: win32 x64 Angular: 4.3.2 ... common, compiler, compiler-cli, core, forms, http ... platform-browser, platform-browser-dynamic, router @angular/animations: 4.4.0-RC.0 @angular/cdk: 2.0.0-beta.10 @angular/cli: 1.5.0 @angular/flex-layout: 2.0.0-beta.8 @angular/material: 2.0.0-beta.10 @angular-devkit/build-optimizer: 0.0.33 @angular-devkit/core: 0.0.20 @angular-devkit/schematics: 0.0.35 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.0 @schematics/angular: 0.1.3 typescript: 2.6.1 webpack: 3.8.1

typescriptnpmangular-cling-build

Answer №1

Successfully fixed the issue on localhost:4200 by deprecating the package to [email protected]. Everything is now working perfectly!

However, when hosting it as an Azure WebApp, the camera does not load and an error message appears in the Chrome console:

The media was refused to load from 'blob:/5c07044f-447c-45a9-979e-458d5e955f8f' due to a Content Security Policy violation with directive "default-src 'unsafe-inline' data: https:". It seems that the 'media-src' was not explicitly set, so the 'default-src' is being used.

I have found a solution for this issue: Edge and IE browsers do not show this error, but the camera doesn't scan. I am considering switching to a different QR scanner or sticking with "angular2-qrscanner". I will need to make a decision soon.

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

Issue: EACCES error encountered while attempting to install ESLint through npm

Attempting to set up ESLint using npm with the command: npm install -g eslint But encountering the following error: Deans-Air:~ deangibson$ npm install -g eslint npm ERR! tar.unpack untar error /Users/deangibson/.npm/eslint/2.4.0/package.tgz npm ERR! Da ...

node.jsmacosnpmeslint

What are the steps to leverage npm installed packages in my .js files?

I'm new to web development and I'm trying to incorporate node packages into my workflow. Specifically, I'm attempting to test out the axios ajax library. It seemed like this would be a simple task, but it's proving to be quite challeng ...

javascriptnpm

How to easily upload zip files in Angular 8

Currently, I am working on integrating zip file upload feature into my Angular 8 application. There are 3 specific requirements that need to be met: 1. Only allow uploading of zip files; display an error message for other file types 2. Restrict the file s ...

htmlangulartypescriptfile-uploadangular8

Encountered a problem deploying AWS Step Functions: "Error: Command '.Account' is unknown."

I have been working on deploying a sequence of AWS step functions using the setup.sh file. After successfully testing the step functions in a controlled environment, no issues were found within the source code. This represents the Deployment Code ./setup.s ...

amazon-web-servicesnpmjqaws-step-functions

JavaScript module declarations in TypeScript

Recently, I delved into the world of a Node library known as bpmn-js (npmjs.com). This library is coded in JavaScript and I wanted to incorporate typings, which led me to explore d.ts files. My folder structure looks like this webapp @types bpmn ...

javascripttypescripttypescript-typings

Angular 12 web version displays error message: "404 not found" for the requested URL

I recently completed my first website using Angular and uploaded it to the server successfully. When browsing through the pages, everything seems fine. However, I encountered an issue when trying to access specific URLs by copying and pasting them into the ...

angulartypescriptionic-framework

Webpack focuses solely on serving HTML files, neglecting to deliver the underlying code

Hey there! I'm currently working on a project that involves using React, TypeScript, and Webpack. I ran into some errors previously that prevented the code from compiling, but now that's fixed. However, when I run webpack, it only serves the HTML ...

reactjstypescriptwebpackreact-tsx

What is the best way to fully reload an Angular component when the route is changed?

I'm looking for a way to reload or refresh a sidebar component when the route changes. Below is the code I currently have: constructor( private auth: AuthService, private router: Router, private changeDetector: ChangeDetectorRef ) { ...

angulartypescriptangular7

Troubleshooting problem with sorting in Angular 4 material header

Using Angular 4 material for a table has presented me with two issues: 1. When sorting a table, it displays the description of the sorting order in the header. I would like to remove this. It displays "Sorted by ascending order" here. The ngx modal theme ...

javascripthtmlangulartypescriptangular-cdk

Tips for hiding a sidebar by clicking away from it in JavaScript

My angular application for small devices has a working sidebar toggling feature, but I want the sidebar to close or hide when clicking anywhere on the page (i.e body). .component.html <nav class="sidebar sidebar-offcanvas active" id="sid ...

javascriptangulartypescript

Change validators dynamically according to conditions

Scenario: At the start, there is a single text box named Name1, a date picker called DOB1, and a check box labeled Compare. Both Name1 and DOB1 are mandatory. When the checkbox is clicked, two new form controls are dynamically included, named Name2 and DO ...

angulartypescriptvalidationionic4angular-forms

Encountering issues when trying to combine Sequelize with TypeScript

As I attempted to transition my NodeJs application to TypeScript, I encountered issues with Sequelize. Upon attempting to implement the code from a website, an error occurred: This expression is not constructable. Type 'typeof import("/home/de ...

javascriptnode.jstypescriptsequelize.js

Experiencing excessive CPU utilization from Node.js while executing the vue-cli-service serve command

Whenever I run my npm script that uses vue-cli-service serve, the CPU usage by Node exceeds 100%. How can I troubleshoot this problem? I am using a Mac and have installed Node through nvm. My Node version is 10.16 and my npm version is 6.9. ...

node.jsvue.jsnpmvue-cli-3

pnpm: unable to locate command?

When working within a next.js project, I encountered an issue where typing npm run dev in the terminal resulted in nothing happening, except for the error message: sh: pnpm: command not found. I have double-checked that I am in the correct directory and h ...

npmnext.jsterminal

understanding the life cycle of components in Ionic

I created a component with the following structure: export class AcknowledgementComponent implements AfterViewInit { private description: string; @Input('period') period: string; constructor() { } ngAfterViewInit() { console.log ...

angulartypescriptionic2ionic3

The struggle of implementing useReducer and Context in TypeScript: A type error saga

Currently attempting to implement Auth using useReducer and Context in a React application, but encountering a type error with the following code snippet: <UserDispatchContext.Provider value={dispatch}> The error message reads as follows: Type &apos ...

reactjstypescriptnext.js

404 Error: Unable to Locate Socket Io

I'm currently working on implementing a chat feature in Angular 2 using Socket IO, following this tutorial. However, I encountered an error message during a test on the server: GET http://localhost:3000/socket.io/?EIO=3&transport=polling& ...

node.jsangulartypescriptsocket.io

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation

Angular 2/4 throws an Error when a Promise is rejected

I implemented an asynchronous validator function as shown below. static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> { return new Promise((resolve, reject) => { setTimeout(() => { if (contr ...

angulartypescriptangular2-formsangular-promise

Combining switch statements from various classes

Is there a way to merge switch statements from two different classes, both with the same function name, into one without manually overriding the function or copying and pasting code? Class A: protected casesHandler(): void { switch (case){ ...

javascripttypescriptmerge