如何将自己的node.js脚本添加到Angular 4项目 [英] How to add my own node.js script to Angular 4 project

问题描述

我有一个文件function.js，该文件导出函数以与一些api通讯并返回值.它使用请求库进行通信.我在node.js应用程序中使用它.如何在我的angular 4应用程序中导入/使用它?

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?

我想将此文件安装为node_module.所以我创建了新的文件夹功能 在哪里function.js，package-json和node_modules文件夹.然后通过命令

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 

然后在types.d.ts中声明它

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.

更新 我尝试了@Z. Bagley answear，现在我可以导入文件了.但出现错误:

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.

推荐答案

在Angular 4项目中包含自定义javascript函数的一种简单方法是在资产文件夹中包含该项目，然后使用require将该项目导入到您的组件打字稿.

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

(在@Component(...)之前)

declare var require: any;
const example = require('../assets/example');

(在export class AppComponent implements OnInit { ...内部)

ngOnInit() {
  example.test();
}

这篇关于如何将自己的node.js脚本添加到Angular 4项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！