"MediaDeviceInfo is not defined" on secure server

Bug When trying to serve on our secure (HTTPS & SSL ready) test environment we’re getting the following errors:

/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:431535
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", MediaDeviceInfo),
                                                                                ^

ReferenceError: MediaDeviceInfo is not defined
    at /Users/thisisme/Documents/Brand/Client/Project/dist/server.js:431535:81
    at Module.Object.defineProperty.value (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:431572:2)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:20:30)
    at Object.@zxing/ngx-scanner (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:310014:18)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../node_modules/@zxing/ngx-scanner/zxing-ngx-scanner.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:264790:10)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/app/barcode-scanner/barcode-scanner.component.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:296178:10)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/app/quick-order/quick-order.component.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:305426:10)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/app/app.server.module.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:295997:11)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/main.server.ts (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:309469:37)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)

The outcome of this, is that it won’t load the webpage at all (can’t handle request).

To Reproduce We’re running our pipelines via Azure, the projects gets pre-build with the right environment credentials, then deployed to our secure environment. I get that this is a little hard to reproduce, but upon reviewing this bug I came across one argument/solution; “Server is not secure, make sure it is”. So I’m kinda out of options as far as online research goes.

Expected behavior A working barcode scanner 🎉

Additional context As I said our building approach is a little bit different/complex than most. But I hope we can come up with a solution.

[mt-webdev]

We are running into the same issue. The app would be able to run a SSR build if we just import the module without declaring the ZXingScannerComponent.

Once we use ZXingScannerComponent the build crashes with the same error. As we used ZXingScannerComponent for typing of the ViewChild only, we switched it to any and the build would complete successfully.

[odahcam]

Understood, so you can’t always run something on server-side and expect browser APIs to be available, even in Angular SSR you must avoid running some pieces of code and, for that, you can use the isPlatformBrowser or isPlatformServer built-in funcions. I still a little confused about why this happened to you, if I found something I will update this issue’s status.