Cannot build demo-app ('mat-toolbar' is not a known element etc.)

[arberosmani]

I'm trying to build the demo app based on the latest commit (f767a7a).

I followed the steps below:

> npm i
> npm run build:demo

Installing the npm dependencies works. However, the build of the demo app results in many error messages.

"npm i" output

➜  angularx-qrcode git:(main) npm i

up to date, audited 1349 packages in 9s

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

19 vulnerabilities (1 low, 7 moderate, 11 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible, run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Here a part of the build output showing some error messages:

➜  angularx-qrcode git:(main) npm run build:demo

> angularx-qrcode@17.0.1 build:demo
> ng build --project demo-app

✔ Browser application bundle generation complete.

./projects/demo-app/src/app/app.module.ts:22:0-52 - Error: Module not found: Error: Can't resolve 'dist/angularx-qrcode' in '/home/arber/data/git/github/angularx-qrcode/projects/demo-app/src/app'

Error: projects/demo-app/src/app/app.component.html:1:1 - error NG8001: 'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-toolbar color="primary" id="toolbar-header">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  projects/demo-app/src/app/app.component.ts:15:16
    15   templateUrl: "./app.component.html",
                      ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Error: projects/demo-app/src/app/app.component.html:3:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3     <mat-icon>qr_code_2</mat-icon>
      ~~~~~~~~~~

  projects/demo-app/src/app/app.component.ts:15:16
    15   templateUrl: "./app.component.html",
                      ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
[...]

You can find here the complete log: npm_build_output.txt

I think I'm using compatible versions of Node and TypeScript:

➜  angularx-qrcode git:(main) node -v
v20.9.0
➜  angularx-qrcode git:(main) npx tsc --version
Version 5.2.2

[Cordobo]

Hi @arberosmani

thanks for opening an issue with angularx-qrcode. Just a guess, did you remove the node_modules folder before npm i?

The result from my install (fresh node modules) returns successful:

> angularx-qrcode@18.0.0 build:demo
> ng build --project demo-app

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial chunk files           | Names         |  Raw size | Estimated transfer size
main.dbb7ff4a686a6fc4.js      | main          | 810.99 kB |               178.17 kB
styles.2d2519226faa3872.css   | styles        |  90.26 kB |                 8.45 kB
polyfills.66692366bbeeef83.js | polyfills     |  34.83 kB |                11.37 kB
runtime.9e66a7b3df2cabc8.js   | runtime       |   1.07 kB |               602 bytes

                              | Initial total | 937.14 kB |               198.60 kB

Build at: 2024-07-25T20:12:29.279Z - Hash: d4a64a584e62324d - Time: 11020ms

Warning: bundle initial exceeded maximum budget. Budget 512.00 kB was not met by 425.14 kB with a total of 937.14 kB.

➜  angularx-qrcode git:(main) 

[Cordobo]

I closed this, please re-open if you still encounter issues.