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

Question

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.

you have a small typo.. it should be install ...unless you made that mistake in the command — Suraj Rao
– Suraj Rao, Commented Sep 2, 2017 at 13:08
declare var myFunction: any ; import * as myFunction from "function" — Milad
– Milad, Commented Sep 2, 2017 at 13:25
@suraj Thank you, I corrected it. I didn't use this mistake in the command — redron
– redron, Commented Sep 2, 2017 at 13:33

Z. Bagley · Accepted Answer · 2017-09-02 13:37:06Z

1

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();
}

answered Sep 2, 2017 at 13:37

Z. Bagley

9,2681 gold badge44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

redron Over a year ago

Thank you, now I can import my files, but got another error.

Z. Bagley Over a year ago

If your custom .js has dependencies you'll have to explicitly include them. If your custom .js does not, then this is an unrelated error.

redron Over a year ago

It use request, which I add to my dependencies. But its stil don't work. I updated my question about new error.

megalucio · Accepted Answer · 2017-09-02 13:50:46Z

0

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

answered Sep 2, 2017 at 13:50

megalucio

5,4712 gold badges25 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related