Angular: oracledb.js 48:21-45 Critical dependency

[sneh-joshi]

I am getting Critical dependency warning while using oracledb with Bootstrap-vue. My project is not running properly with this compilation warning.

What is your Node.js version? Is it 64-bit or 32-bit? Run version.js from https://github.com/oracle/node-oracledb/blob/master/examples/version.js
v6.11.2
What is your node-oracledb version?
2.2
What is your Oracle client (e.g. Instant Client) version? Is it 64-bit or 32-bit? How was it installed? Where is it installed?
InstantClient - 64bit
What is your Oracle Database version?
11g
What is your OS and version?
Mac
What error(s) you are seeing?
in .//oracledb/lib/oracledb.js
42:18-44 Critical dependency: the request of a dependency is an expression
warning in .//oracledb/lib/oracledb.js
48:21-45 Critical dependency: the request of a dependency is an expression

[cjbj]

If I interpret the messages correctly, they are pointing to the require() calls that try to load the node-oracledb binary.

@snehaljoshi72 since you have the environment set up, can you debug and see what the problem is? Based on a quick google, maybe even changing the code flow which is effectively:

var binaryReleasePath = '../build/Release/oracledb.node';
oracledbCLib =  require(binaryReleasePath);

to

  oracledbCLib =  require('../build/Release/oracledb.node');

might work.

[sneh-joshi]

Still not working.
Now getting following error.
This relative module was not found:

• ../build/Debug/oracledb.node in ./~/oracledb/lib/oracledb.js

[cjbj]

@snehaljoshi72 keep debugging! Where is oracledb.node? etc etc?

[sneh-joshi]

after I changed to Path in require following error I am getting.
/oracledb/build/Release/oracledb.node Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.(Source code omitted for this binary file)

[cjbj]

Maybe if you post details about how you have built / deployed, then someone with experience will comment?

[sneh-joshi]

I created bootstrap-vue project using web-pack.In my use case I need to get data from oracle db and show it to table. I am using Oracle Instant client v12.
I installed oracledb module and I can see it in modules folder. When I am using oracledb in <script> section of App.vue as following I am getting an error.

import oracledb from 'oracledb'.

I checked oracledb.js in /oracledb/lib/oracledb.js which require oracledb.node file which is in /build/Release/oracledb.node location but not able to find it.

[dmcghan]

@snehaljoshi72 The <script> tags indicate client-side/browser JavaScript code. This module is for Node.js, not browsers.

[sneh-joshi]

I tried with Node.js and export function to use in Vue file but that is also not working.

[dmcghan]

You need to create a REST API and consume the API from your Vue app.

[cjbj]

Closing - no activity.

[hmrasi]

I'm getting the following error while trying to run the angular2 code.
Importing the node module 'oracledb' in the typescript getting the warnings in that.

WARNING in ./node_modules/oracledb/lib/oracledb.js
48:21-45 Critical dependency: the request of a dependency is an expression
at CommonJsRequireContextDependency.getWarnings (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\web
pack\lib\dependencies\ContextDependency.js:39:18)
at Compilation.reportDependencyErrorsAndWarnings (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\we
bpack\lib\Compilation.js:703:24)
at Compilation.finish (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\webpack\lib\Compilation.js:56
1:9)
at applyPluginsParallel.err (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\webpack\lib\Compiler.js
:502:17)
at C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\tapable\lib\Tapable.js:289:11
at C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\html-webpack-plugin\index.js:60:9
at tryCatcher (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\re
lease\promise.js:512:31)
at Promise._settlePromise (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\release\promi
se.js:569:18)
at Promise._settlePromise0 (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\release\prom
ise.js:614:10)
at Promise._settlePromises (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\release\prom
ise.js:693:18)
at Async._drainQueue (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\release\async.js:1
33:16)
at Async._drainQueues (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\release\async.js:
143:10)
at Immediate.Async.drainQueues (C:\Users\hamadasi\WebstormProjects\Data_Injesion\IngestionFramework\src\bin\Ingestion_Framework Angular\node_modules\bluebird\js\release
async.js:17:14)
at runCallback (timers.js:810:20)
at tryOnImmediate (timers.js:768:5)
@ ./node_modules/oracledb/lib/oracledb.js
@ ./node_modules/oracledb/index.js
@ ./src/app/hero-form/hero-form.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

webpack: Compiled with warnings.

Any help?
Thanks

[dmcghan]

Is the Angular 2 code client side?

[hmrasi]

No.
And I'm trying with my local DB connections.

[cjbj]

@hmrasi do some googling and debugging. You can see what line of oracledb.js is problematic. Take a look at what it is trying to do.

Do node-oracledb apps work for you outside Angular?

[dmcghan]

No. And I'm trying with my local DB connections.

I'm not sure what you mean. Isn't Angular a client-side library?

[danilohgds]

@hmrasi , you should not import oraclebd in angular code.
oracledb should be used in a backend focused project. I suggest that you move your oracle code to a separate project and then expose through API's.

Angular is a client side framework for web development, ergo...runs in the browser...which is not something oracledb does.

[hmrasi]

Thanks for the reply.
@cjbj , it works for me in a separate file and I'm able to see the data. When integrating it with the angular code, im getting the above warnings.

@danilohgds As im new to Angular2 and Node, can you please explain me a few steps regarding the solution?

Thanks

[danilohgds]

Hi @hmrasi

I assume you are familiar with the concepts of backend and frontend development.

Angular being frontend, it does not mix with backend libraries( oracle db ).
Imagine that one is oil and the other one is water, no matter what you do, they don't mix =).

I suggest you follow along posts from Dan on his blog ( https://jsao.io/2018/04/creating-a-rest-api-handling-get-requests/ ), where he goes about how to create a rest client, server side code to share data with frontend clients.

Having done so, you should then write the http requests on angular side to call your server code, and provide you the data.
Follow this tutorial : https://www.metaltoad.com/blog/angular-5-making-api-calls-httpclient-service it will help you to do what is needed from the angular side.

Best of luck ;)

[hmrasi]

Thanks a lot @danilohgds
That really helps me.

[hailbop]

I'm in the same boat as @hmrasi and assumed node-oracledb in combination with Instant Client could do all the necessary steps to connect frontend Angular to the backend OracleDB, like web3.js does for ethereum for example. There shouldn't be the need to build a Rest API separately, as it would be much easier to just offer developers the Rest API they can use out of the box (and inside Angular, omg) rather than build an entirely separate NPM project from scratch. Just a thought :/ or as I like to say "build the Rest/JavaScript API, and they will come..."

[dmcghan]

@hailbop

This project, node-oracledb, is a driver/API to connect Node.js to Oracle Database. It's designed to be low-level and expose the features of the database to Node.js developers.

What you're talking about (a REST API app) would be a higher level tool that would use node-oracledb when it needed to connect to that database. Such tools already exist. See Sails.js and Loopback for examples. Oracle also provides such a tool: Oracle REST Data Services (ORDS). However, ORDS is a Java application, it runs in a J2EE app server like Tomcat, not in Node.js.

See this video for an overview of the manual approach vs using something like Sails or ORDS. Every application is different and there's no one right way to do anything really. Once you get into the higher-level tools, a lot of decisions will have been made for you. Whether or not that's a good thing will depend on your app and it's requirements.

[hailbop]

@dmcghan

Thanks for the resources, these are awesome! Did not know about Sails. It seems great and would definitely work as a stand alone app. The plan for now is to go from Angular 6 client-side (anticipating integrating my components into a legacy app) -> Node.js -> Oracle DB. Figuring out the best way to do it is tricky; as you said, there are many different ways to go about this.

We currently use ORDS/Tomcat for other Java applications that I'm not so familiar at the moment but hopefully can get up to speed.