How to add my own node.js script to Angular 4 project - javascript

I have a file function.js which exports function to comunicate with some api and return value. It comunicates using request library. I am using this in node.js app. How can I import/use it in my angular 4 app?
I thought to install this file as node_module. So I created new folder function
where is function.js, package-json and node_modules folder. and then I installed it in my ng4 app by command
npm install --save ./function
then in typings.d.ts I declare it
declare var Myfunction: any
and import it in my component
import * as Myfunction from "function"
but when i try using it I get an error :
ERROR in /Users/i343346/order-site/src/app/order/order.component.ts (37,12): Unexpected token. A constructor, method, accessor, or property was expected.
ERROR in /Users/i343346/order-site/src/app/order/order.component.ts (37,13): Function implementation is missing or not immediately following the declaration.
UPDATE
I tried #Z. Bagley answear and now i can import my file. but got error:
WARNING in ./node_modules/ajv/lib/compile/index.js 13:21-34 Critical dependency: the request of a dependency is an expression
at CommonJsRequireContextDependency.getWarnings (/Users/i343346/order-site/node_modules/webpack/lib/dependencies/CommonJsRequireContextDependency.js:27:4)
at Compilation.reportDependencyErrorsAndWarnings (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:677:24)
at Compilation.finish (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:535:9)
at applyPluginsParallel.err (/Users/i343346/order-site/node_modules/webpack/lib/Compiler.js:512:17)
at /Users/i343346/order-site/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:481:11)
at processModuleDependencies.err (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
WARNING in ./node_modules/ajv/lib/async.js 96:20-33 Critical dependency: the request of a dependency is an expression
at CommonJsRequireContextDependency.getWarnings (/Users/i343346/order-site/node_modules/webpack/lib/dependencies/CommonJsRequireContextDependency.js:27:4)
at Compilation.reportDependencyErrorsAndWarnings (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:677:24)
at Compilation.finish (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:535:9)
at applyPluginsParallel.err (/Users/i343346/order-site/node_modules/webpack/lib/Compiler.js:512:17)
at /Users/i343346/order-site/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:481:11)
at processModuleDependencies.err (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
WARNING in ./node_modules/ajv/lib/async.js 119:15-28 Critical dependency: the request of a dependency is an expression
at CommonJsRequireContextDependency.getWarnings (/Users/i343346/order-site/node_modules/webpack/lib/dependencies/CommonJsRequireContextDependency.js:27:4)
at Compilation.reportDependencyErrorsAndWarnings (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:677:24)
at Compilation.finish (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:535:9)
at applyPluginsParallel.err (/Users/i343346/order-site/node_modules/webpack/lib/Compiler.js:512:17)
at /Users/i343346/order-site/node_modules/tapable/lib/Tapable.js:289:11
at _addModuleChain (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:481:11)
at processModuleDependencies.err (/Users/i343346/order-site/node_modules/webpack/lib/Compilation.js:452:13)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
I think is connected with request library, which maybe isn't supported by browser.

A simple way to include custom javascript functions in your Angular 4 project is to include the item in your assets folder, and then use require to import it into your component typescript.
src/assets/example.js
export function test() {
console.log('test');
}
src/app/app.component.ts
(before #Component(...))
declare var require: any;
const example = require('../assets/example');
(inside export class AppComponent implements OnInit { ...)
ngOnInit() {
example.test();
}

I think you might also need to include your code in index.html via script tag.
You might find this other answer useful: https://stackoverflow.com/posts/40635697/edit

Related

SyntaxError: Cannot use import statement outside a module in kochava using Next.js

error - SyntaxError: Cannot use import statement outside a module
C:\xampp\htdocs\next-contv-web\node_modules\kochava\dist\kochava.js:17
import { Log } from "./utils/log";
react JS version being used: "react": "17.0.2"
next JS version: "12",
kochava version being used: "kochava": "^3.0.4"
Getting the above error msg when installed the kochava latest version in next/react (web sdk). Need help to resolve this issue.
Getting the below error after adding "type":"module" in the package.json of kochava and running the app again:
error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\xampp\htdocs\next-contv-web\node_modules\kochava\dist\utils\log' imported from C:\xampp\htdocs\next-contv-web\node_modules\kochava\dist\kochava.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\xampp\htdocs\next-contv-web\node_modules\kochava\dist\utils\log' imported from C:\xampp\htdocs\next-contv-web\node_modules\kochava\dist\kochava.js
at new NodeError (node:internal/errors:372:5)
at finalizeResolution (node:internal/modules/esm/resolve:437:11)
at moduleResolve (node:internal/modules/esm/resolve:1009:10)
at defaultResolve (node:internal/modules/esm/resolve:1218:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_MODULE_NOT_FOUND',
page: '/'
}

Error: A dynamic link library (DLL) initialization routine failed on electron but it's fine on node js

I'm trying to load a custom module in electron written in D with node_dlang package, which is fine with node, but it fails within electron.
the test with node, that runs just fine, goes like this:
const nativeModule = require('./module.node');
const assert = require('assert');
assert(nativeModule != null);
assert(nativeModule.ultimate() == 42);
But when I went to use it within electron.js, through the preload script, it returns in an error.
the preload script goes like this:
const {
contextBridge,
ipcRenderer
} = require("electron");
const nativeModule = require('./module.node');
const assert = require('assert');
assert(nativeModule.ultimate() == 42);
function pageLoaded()
{
// ...
}
window.addEventListener('DOMContentLoaded', pageLoaded);
the error when I attempt to load the module within electron application is:
A JavaScript error occured in the browser process
--------------------------- Uncaught Exception: Error: A dynamic link library (DLL) initialization routine failed.
\\?\C:\Users\001\Desktop\ele\module.node
at process.func [as dlopen] (VM70 asar_bundle.js:5)
at Object.Module._extensions..node (VM43 loader.js:1138)
at Object.func [as .node] (VM70 asar_bundle.js:5)
at Module.load (VM43 loader.js:935)
at Module._load (VM43 loader.js:776)
at Function.f._load (VM70 asar_bundle.js:5)
at Function.o._load (VM75 renderer_init.js:33)
at Module.require (VM43 loader.js:959)
at require (VM50 helpers.js:88)
at Object.<anonymous> (VM88 C:\Users\001\Desktop\ele\preload.js:6)
What's causing this and how do I fix this?
version
node version is: v14.17.0
electron.js: v13.1.1
both are 64-bit.
the module source code goes like this:
import std.stdio : stderr;
import node_dlang;
extern(C):
void atStart(napi_env env)
{
import std.stdio;
writeln ("Hello from D!");
}
int ultimate()
{
return 42;
}
mixin exportToJs! (ultimate, MainFunction!atStart);
it's compiled with dub command line. No arguments.
UPDATE 1 Do I need to rebuild this module? I found this but it didn't work for me either. I installed the electron-rebuild package by npm install --save-dev electron-rebuild and rebuild with .\node_modules\.bin\electron-rebuild.cmd -v 13.1.1 the command ran fine but I still got same error.
UPDATE 2: inside the console, I clicked in the javascript source code file link in the error message (from the exception) it points to this line of code, where there's this comment saying that:
no static exports found
what does that mean? is this related to the methods in D class? they're marked as public... not sure if related
Electron is a Windows-Application and therefore you need to remove output to std. Try to remove
import std.stdio : stderr;
and
import std.stdio;
writeln ("Hello from D!");
and retry import to Electron.
Please refer this (https://stackoverflow.com/a/74280836/9558119) post from me regarding same. Since it is electron build might be missing Visual C++ Build Environment: Visual Studio Build Tools

Resolve "Cannot find package" error using Node.js

I'm trying to import a module using Node.js. When I specify the path I'm importing from, it works perfectly fine. Code below runs without returning any error
import myFunc from("./lib/myPkg.js");
import pkg from ("root/node_modules/date-names/index.js");
const {days, months} = pkg;
However, I get this error when I try to import an npm package by calling import ordinal from "ordinal"
root#username:/path/to/main.mjs# node main.mjs
internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'ordinal' imported from /path/to/main.mjs
at packageResolve (internal/modules/esm/resolve.js:675:9)
at moduleResolve (internal/modules/esm/resolve.js:716:14)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:809:11)
at Loader.resolve (internal/modules/esm/loader.js:85:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
at link (internal/modules/esm/module_job.js:50:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
I have tried installing the package globally but I still can't get it to work.

trying to run npm package (readability) from browser using Browserify with no success

so i'm trying to make readabilityJs available to me from the browser.
i want to use it later in my app, i'm using BrowserifyJS + beefyJS to make it work.
here i'm trying to expose the function i want to use:
var read = require("readability-js");
module.exports = (url) => read(url, (err, article, meta) => {
// Main Article
console.log(article.content.text());
//
// Title
console.log(article.title);
// Article HTML Source Code
console.log(article.content.html());
});
than i using the function in index.js
var readability = require("./Readability");
const url = "https://tim.blog/2019/10/31/edward-norton-motherless-brooklyn/";
readability(url);
after that i'm running browserify to make bundle.js and beefy to run it all
browserify index.js -o bundle.js
beefy index.js 8080
here is what i getting:
bundle.js:35798 Uncaught TypeError: Cannot read property 'content' of undefined
at bundle.js:35798
at bundle.js:62995
at Request._callback (bundle.js:62933)
at self.callback (bundle.js:63402)
at emitOne (bundle.js:16927)
at Request.emit (bundle.js:17005)
at Request.self._buildRequest (bundle.js:63634)
at Request.init (bundle.js:63812)
at new Request (bundle.js:63378)
at request (bundle.js:63059)
can you help me implement it right?

Typescript module, require external node_modules

I need to use a simple node_module inside a simple typescript file, but it seems that the compiler doesn't want to get it.
Here's my simple ts file :
import glob = require('glob');
console.log(glob);
And I've got this error :
[13:51:11] Compiling TypeScript files using tsc version 1.5.0
[13:51:12] [tsc] > F:/SkeletonProject/boot/ts/Boot.ts(4,23): error TS2307: Cannot find external module 'glob'.
[13:51:12] Failed to compile TypeScript: Error: tsc command has exited with code:2
events.js:72
throw er; // Unhandled 'error' event
^
Error: Failed to compile: tsc command has exited with code:2
npm ERR! skeleton-typescript-name#0.0.1 start: `node compile && node ./boot/js/Boot.js`
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the skeleton-typescript-name#0.0.1 start script.
However, when I use a simple declaration in this same script, it works :
var x = 0;
console.log(x); // prints 0 after typescript compilation
What am I doing wrong in this case ?
EDIT:
Here's my gulp file :
var gulp = require('gulp');
var typescript = require('gulp-tsc');
gulp.task('compileApp', ['compileBoot'], function () {
return gulp.src(['app/src/**/*.ts'])
.pipe(typescript())
.pipe(gulp.dest('app/dist/'))
});
gulp.task('compileBoot', function () {
return gulp.src(['boot/ts/*.ts'])
.pipe(typescript({
module:'commonjs'
}))
.pipe(gulp.dest('boot/js/'))
});
gulp.start('compileApp');
Thanks for advance
Thanks for advance
You are using the correct syntax:
import glob = require('glob');
But the error: Cannot find external module 'glob' is pointing out that you are using a special case.
By default, the compiler is looking for glob.ts, but in your case you are using a node module, not a module that you have written. For this reason, the glob module will need special treatment...
If glob is a plain JavaScript module, you can add a file named glob.d.ts with type information that described the module.
glob.d.ts
declare module "glob" {
export class Example {
doIt(): string;
}
}
app.ts
import glob = require('glob');
var x = new glob.Example();
Some Node modules already include the .d.ts in the package, in other cases you can grab it from Definitely Typed.
Here is the error with your code
import glob = require('glob');
Because in node.js import is not a reserved keyword. If you require any module in your application, you simply require it using the statement
var glob = require('glob');
Once done you can then use
console.log(glob);
To print the value of glob.Replacing import will hopefully do the job for you.

Categories

Resources