Install imdb-api and use it in Angular2 Webpack - node.js

I am trying to use the imdb-api repo (https://github.com/worr/node-imdb-api) in my angular2 project, but can't seem to get it working.
I'm working on the newest angular2 webpack (Angular2 Webpack Starter). I usually know how to get libs working, but this one is just not working :(
Have cloned the Angular2 Webpack starter, and made the Npm install and npm start.. everything works great.
Then I have installed version 2.0.0 of imdb-api like this:
npm install --save imdb-api
It installed with no problems.
In a component, (lets say the about component) , I have imported the module like:
import * as imdb from 'imdb-api';
In the constructor, I am trying to console.log(imdb) to see if it's available.
constructor(public route: ActivatedRoute) {
// var imdb = require('imdb-api');
console.log(imdb);
}
As you see, I also tried using the var imdb = require ...
The problem is all this gives me errors I just can't seem to solve. I am getting the following errors:
ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\request\lib'
ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\forever-agent'
ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\forever-agent'
ERROR in ./~/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\tough-cookie\lib'
ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\tunnel-agent'
ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Users\Mikkel\Documents\Programmering\angular2-webpack-starter\node_modules\tunnel-agent'
I have found a post about the request problem. The imdb-api is using the request-promise, thats why I'm getting the error.
The post you find here: https://github.com/request/request/issues/1529
The suggested to add the following:
console: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty'
to the node object in the webpack.config.js file. Have added it to the webpack dev config, but now I don't see any errors at all, but the application wont load.

Related

Config package in Vue 3 nodejs project

I'm building a project using Vue 3 and nodejs. I need to include some configurations that should change depending on where I run the code. I found the config package that seems very promising, but I started to get a huge number of errors during the start of the project.
The first issue regards some missing packages.
Module not found: Error: Can't resolve 'util' ...
Module not found: Error: Can't resolve 'path' ...
Module not found: Error: Can't resolve 'fs' ...
Module not found: Error: Can't resolve 'os' ...
I solved them by adding this code in the config file:
resolve: {
fallback: {
fs: false,
os: false,
util: false,
path: false
}
}
Now the project starts, but I get these warnings:
warning in ./node_modules/config/lib/config.js
Critical dependency: the request of a dependency is an expression
warning in ./node_modules/config/parser.js
require.extensions is not supported by webpack. Use a loader instead.
When I surf to localhost:8080 I get:
Uncaught ReferenceError: process is not defined
Instead of using resolve.fallback, I also tried to install the dependencies:
npm install path fs os util
but I continue to get the error for fs:
Module not found: Error: Can't resolve 'fs' ...
Is there a way to use the config package easily along with Vue 3?

Angular - How to import googleapis library?

I'm trying to incorporate the Google Drive API into one of my projects. The Node.js quick start guide requires me to import file-reading and googleapis libraries. However, when I try to do so, I run into issues when importing it into app.module.ts or any components:
Components import code:
import { Injectable } from '#angular/core';
import {google, drive_v3} from 'googleapis'
const drive = google.drive({version: 'v3'});
#Injectable({
providedIn: 'root'
})
export class SubscriptionService {
constructor () {}
}
Error:
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'child_process' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-auth-library/build/src/crypto/node/crypto.js
Module not found: Error: Can't resolve 'crypto' in '...\node_modules\google-auth-library\build\src\crypto\node'
ERROR in ./node_modules/jwa/index.js
Module not found: Error: Can't resolve 'crypto' in '...\node_modules\jwa'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-p12-pem/build/src/index.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\google-p12-pem\build\src'
ERROR in ./node_modules/googleapis-common/build/src/discovery.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\googleapis-common\build\src'
ERROR in ./node_modules/gtoken/build/src/index.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\gtoken\build\src'
ERROR in ./node_modules/agent-base/patch-core.js
Module not found: Error: Can't resolve 'https' in '...\node_modules\agent-base'
ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'net' in '...\node_modules\https-proxy-agent'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'os' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'path' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/gaxios/build/src/gaxios.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\gaxios\build\src'
ERROR in ./node_modules/google-auth-library/build/src/auth/oauth2client.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\google-auth-library\build\src\auth'
ERROR in ./node_modules/googleapis-common/build/src/apirequest.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\googleapis-common\build\src'
ERROR in ./node_modules/jws/lib/data-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/jws/lib/sign-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/jws/lib/verify-stream.js
Module not found: Error: Can't resolve 'stream' in '...\node_modules\jws\lib'ERROR in ./node_modules/https-proxy-agent/index.js
Module not found: Error: Can't resolve 'tls' in '...\node_modules\https-proxy-agent'
How do I properly import the googleapis library in Angular? I've tried adding the following script import to index.html as lots of people online suggest, but it doesn't seem to work (see comments).
<script src="https://apis.google.com/js/api.js"></script>
I have also made sure to perform the following installs:
npm install --save #types/gapi
npm install --save #types/gapi.auth2
npm install --save #types/gapi.client.drive
googleapis (and google-auth-library) is a NodeJS library. You can't use it in front-end projects as is. There're some workarounds - see https://medium.com/angular-in-depth/google-apis-with-angular-214fadb8fbc5 (but I didn't try it personally so can't recommend).
The other lib you mentioned - https://apis.google.com/js/api.js - is the right one, it's for front-end, but it's not modularized, it's just one big script that you need to load via script tag. That's because you cannot import it via import. To make TS compiler happy (providing you already installed types #types/gapi*) add this import in a file where you accessing gapi global object:
/// <reference types="gapi.client. drive" />

Error with xlsx-style when building angular 6 app

I installed xlsx-style in my angular 6 app via yarn and I get errors when I build my app :
ERROR in ../node_modules/xlsx-style/dist/cpexcel.js
Module not found: Error: Can't resolve './cptable' in 'C:\Users\cabannesj\Documents\Virga3\virga-frontend\node_modules\xlsx-style\dist'
ERROR in ../node_modules/xlsx-style/xlsx.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\cabannesj\Documents\Virga3\virga-frontend\node_modules\xlsx-style'
ERROR in ../node_modules/xlsx-style/ods.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\cabannesj\Documents\Virga3\virga-frontend\node_modules\xlsx-style'
I added 'xlsx.core.min.js' in the script section of my angular.json file.
I don't know what is missing to get xlsx-style work with my app.

webpack -- how to include nodejs module for js/jsx in non-current directory

Trying to include a npm module in my jsx.
My dir structure is something like:
app/
node_modules/
webpack.config.json
package.json
main.js
react/
myreact1.jsx
myreact2.jsx
Note: purposely do not want a package.json & node_modules in react/
I've figured out that I have to do this for webpack2 config:
resolve: {
modules: ["node_modules", path.resolve(__dirname, "node_modules")
}
This forces webpack to first always try ./node_modules, then default to app/node_modules
However, for the module I'm trying to include in myreact.jsx (npm: "request"), this module uses alot of native node libraries like "fs" and "tls", etc.
webpack now gives me this error:
Abbreviated error:
ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in '/myproj/app/node_modules/request/lib'
# ./~/request/lib/har.js 3:9-22
# ./~/request/request.js
# ./~/request/index.js
# ../react/myreact1.jsx
# ./app.jsx
# ./main.js
Display-error-details version of the error:
ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in '/myproj/app/node_modules/request/lib'
resolve 'fs' in '/myproj/app/node_modules/request/lib'
How do I get webpack to correctly find the native node modules 'fs', 'tls', 'net' etc for 'request' module and the other 3rd party modules it uses inside it's own node_modules?
Thanks for any help

TypeScript #types modules fail to resolve each other

When I use npm to install TypeScript definitions like this
npm install --save #types/express
I cannot use the installed modules as they fail to resolve each other. For example, #types/express requires #types/express-static-server-core, but as #types/express/index.d.ts contains a relative path to express-static-server-core, the module cannot be resolved:
node_modules/#types/express/index.d.ts(16,30): error TS2307: Cannot find module 'serve-static'.
node_modules/#types/express/index.d.ts(17,23): error TS2307: Cannot find module 'express-serve-static-core'.
node_modules/#types/serve-static/index.d.ts(15,26): error TS2307: Cannot find module 'express-serve-static-core'.
node_modules/#types/serve-static/index.d.ts(16,20): error TS2307: Cannot find module 'mime'.
How can I solve this issue? What is the best way to install TypeScript definitions?
As far as I know, typings is deprecated, so I tried to just install the type definitions from #types and then use
tsc --target ES5 --module commonjs index.ts
but it does not work yet. What am I doing wrong?
On the chance this is related, in one project, I was using generic types with express:
import { ParamsDictionary, Request, ... } from 'express-serve-static-core';
// ...
app.get<ParamsDictionary, UserDetails>(...);
That worked. When I tried to do the same thing in another project that wasn't using generic types:
import { Request, Response } from 'express-serve-static-core';
I was getting 'Unable to resolve path to module 'express-serve-static-core'.
When I changed my import to:
import express, { Request, Response } from 'express';
The problem went away.

Resources