I've been using msal.js for authentication in my Angular application. This is working fine for development builds using ng serve. Unfortunately this library gives me an error when I try to run a server build using node. This build is generated using npm run build:prod and served by using npm run server. After attempting to serve this using node, the following error occurs:
/Users/mikey/Documents/projectname-angular8/dist/server.js:170525
class WindowWrapper extends Window {
^
ReferenceError: Window is not defined
at Module.<anonymous> (/Users/mikey/Documents/projectname-angular8/dist/server.js:170525:29)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:21:30)
at Object.#azure/msal-angular/dist/msal.module (/Users/mikey/Documents/projectname-angular8/dist/server.js:148059:18)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
at Object../src/app/app.server.module.ngfactory.js (/Users/mikey/Documents/projectname-angular8/dist/server.js:142963:13)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
at Object../src/main.server.ts (/Users/mikey/Documents/projectname-angular8/dist/server.js:147883:37)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
at Object.0 (/Users/mikey/Documents/projectname-angular8/dist/server.js:147904:18)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
I can understand why the error is happening, but as this third party library is required, I am unable to remove this package from the project all together. I've tried only loading this part of the code in app.browser.module.ts but then I am having injection errors when attempting to run the server side version in the browser.
I hope someone can explain me how I can make a runnable server side build of this project while using this third party library.
Related
I'm trying to serve the angular code using this command npm run serve:ssr.
Getting the following error,
throw new Error('It looks like your application or one of its dependencies is using i18n.\n' +
^
Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add #angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '#angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
at _global.$localize (/Users/jawad/Documents/jawad/truedealsweb/dist/server.js:68040:15)
at Module../node_modules/#ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:134281:24)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object../node_modules/#ng-bootstrap/ng-bootstrap/ng-bootstrap.ngfactory.js (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:148309:12)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object../src/app/app.server.module.ngfactory.js (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:275302:12)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object../src/main.server.ts (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:294702:37)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object.0 (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:294731:18)
Also I have add the #angular/localize in polyfills.ts but still getting same error.
I wanted to start using Google Authentication in my nodejs webapp am using the googleapis package.
The moment I require this package after installing it, I immediately get the following error:
protocol sync?8d88:2 Uncaught Error: Cannot find module './framer'
at webpackEmptyContext (eval at ./node_modules/http2/lib/protocol sync recursive (app.js:1053), <anonymous>:2:10)
at Array.map (<anonymous>)
at eval (index.js?1fa7:46)
at Object../node_modules/http2/lib/protocol/index.js (chunk-vendors.js:7788)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.eval (http.js?4679:136)
at eval (http.js:1264)
at Object../node_modules/http2/lib/http.js (chunk-vendors.js:7711)
at __webpack_require__ (app.js:854)
I've looked into the source here:
var modules = ['./framer', './compressor', './flow', './connection', './stream', './endpoint'];
modules.map(require).forEach(function(module) {
for (var name in module.serializers) {
exports.serializers[name] = module.serializers[name];
}
});
And confirmed that those files are present:
I've already tried to reinstall the packages (http2 & googleapis) but no change.
Why would those relative require statements fail? The files are clearly present.
My webapp is a client-server app using vue. Also note that this is my first little project using node so if you need any additional information on this issue from me just let me know.
Thanks in advance for the help.
I also faced this issue while trying to make googleapis lib work in React app. Reason is googleapis is recommended for server-side web apps.
For React/Client side web apps, I made it work following this documentation.
https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#js-client-library
I'm playing with the Google Cloud API Speech-to-Text Node client library. Works quite well, and well described in their documentation.
Problems come when I wanted to use it in a VueJS : it simply seems not to be supported.
First attempt :
npm run serve returns
ERROR Failed to compile with 3 errors 11:35:13
This dependency was not found:
* http2 in ./node_modules/#grpc/grpc-js/build/src/channel.js, ./node_modules/#grpc/grpc-js/build/src/subchannel.js and 1 other
But http2 is a core module in Node now, and when I run node -p http2 I do get results.
Second attempt :
npm i http2
npm run serve returns
WARNING Compiled with 1 warnings 11:41:07
warning in ./node_modules/http2/lib/protocol/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
In browser, console provides error
Uncaught Error: not supported
at Root.loadSync (root.js?ee6e:234)
at Object.loadSync (index-light.js?071f:69)
at Object.eval (index.js?f193:244)
at eval (index.js:250)
at Object../node_modules/#grpc/proto-loader/build/src/index.js (app.js:1383)
at __webpack_require__ (app.js:724)
at fn (app.js:101)
at Object.eval (grpc.js?6f5f:34)
at eval (grpc.js:288)
at Object../node_modules/google-gax/build/src/grpc.js
My Vue App is basic and can be retrieved using vue-cli by running vue create app. I then added in the HelloWorld Component the basic code displayed in the quickstart guide.
My theory is : VueJS can't use google-gax module due to gRPC. What do you think ?
Currently the Google Cloud API client libraries such as the one you are using cannot be used from the browser. As you noted, those libraries use gRPC, which in turn uses http2. The problem is that currently no major browser allows JavaScript libraries to use the full functionality of the HTTP/2 protocol, so there is currently no complete browser shim for the Node http2 module.
The http2 module you got from npm is a different library with a different API. It most likely also does not work in the browser for the same reason.
It works fine when i run with node Express server (I use #ng-toolkit/universal) But with aspnet core node engine throwing NodeInvocation Exception Reference Error: Window is not defined in a third party modules like ngx-bootstrap and angular-jwt.
NodeInvocationException: Prerendering failed
because of error: ReferenceError: window is not
defined
at Object.<anonymous>
(C:\2ndCustomer\Angular6\node_modules\#auth0\angular-
jwt\bundles\core.umd.js:1:704)
And ngx-bootstrap error but when i run with express server.ts it works fine
https://github.com/maciejtreder/ng-toolkit
I am deploying my app on IIS but it is not working. What I am doing is run the command ionic build browser and host the www folder on IIS. When I run the hosted website I got two error. One is cordova.js is not found and the other one is in my service that object(....) is not a function. I have tried many things but it's not working. Below are the error i got on brwoser console:
cordova.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
event-service.ts:6 Uncaught TypeError: Object(...) is not a function
at Object.605 (event-service.ts:6)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.37 (index.ts:1)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.157 (index.ts:1)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.exports.isScheduler (ArrayObservable.js:8)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.exports.isArrayLike (merge.js:3)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
Can anyone tell what i missing or am i doing something wrong?
try running the project with cordova:
ionic cordova run browser
to build the project:
ionic cordova build browser
Reinstall node and delete node_modules and run npm install resolved the issue.