I tried to install Angular QR Code Generator

I just following the installation steps. Current latest Angular is v14. The Angular QR Code Generator needs v13 to run.
By using the following command

ng version
npm uninstall -g @angular/cli
npm cache clean --force

npm install -g @angular/cli@13
ng version

Here Angular v13.3.7 is installed.

>ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.3.7
Node: 14.17.5
Package Manager: npm 8.5.5
OS: win32 x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.7
@angular-devkit/build-angular   13.3.7
@angular-devkit/core            13.3.7
@angular-devkit/schematics      13.3.7
@angular/cli                    13.3.7
@schematics/angular             13.3.7
rxjs                            7.5.5
typescript                      4.6.4

Then install the angular QR Code

>npm install angularx-qrcode --save

added 5 packages, removed 1 package, and audited 927 packages in 9s

109 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

I assume it was successfully installed. I opened a new project, project_name

> ng new project_name

I altered the file app.module.ts and app.component.html to implement the QR code.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

At last run

>ng serve
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.03 MB |
polyfills.js          | polyfills     | 294.85 kB |
styles.css, styles.js | styles        | 173.23 kB |
runtime.js            | runtime       |   6.52 kB |
main.js               | main          |   6.13 kB |

                      | Initial Total |   3.50 MB

Build at: 2022-06-10T02:31:02.657Z - Hash: 8ce9711c8f9d65cc - Time: 4168ms

Warning: C:\Users\fsloke\node_modules\angularx-qrcode\fesm2015\angularx-qrcode.mjs depends on '@cordobo/qrcode'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



../../../../node_modules/angularx-qrcode/fesm2015/angularx-qrcode.mjs:5:0-48 - Error: Module not found: Error: Can't resolve '@angular/platform-browser' in 'C:\Users\fsloke\node_modules\angularx-qrcode\fesm2015'

Error: ../../../../node_modules/angularx-qrcode/lib/angularx-qrcode.component.d.ts:2:39 - error TS2307: Cannot find module '@angular/platform-browser' or its corresponding type declarations.

2 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


× Failed to compile.

It Failed. After few checking I noticed that the node_modules folder appear two places

1. At the Window User folder. C:/Users/fsloke/node_modules
2. Inside the project that I "ng new project_name"

The error was caused by the missing file in node_modules at the Window User Folder. Actually, I tried to move the missing files into that folder, this will cause another missing files. I don't think this is the solutions. May I know have Anyway can fix this?

CodePudding user response：

I noticed that the node_modules folder appear two places

This is because you are installing qrcode package locally before creating the project. You need to add your library inside the project node_modules and it needs to be added as a dependency to your project's package.json file. Note that your home folder may have a new package.json and package-lock.json with only one dependency.

1. cd inside your project folder (The one created by ng new project_name).
2. Delete the node_modules folder in the project.
3. Do npm install to install existing angular dependencies.
4. npm install angularx-qrcode --save inside your project folder. This should add the library to your project's package.json
5. ng serve

The correct sequence:

1. npm install -g @angular/cli@13
2. ng new projectname
3. cd projectname
4. npm install angularx-qrcode --save
5. Your code changes
6. ng serve