如何將我自己的node.js腳本添加到Angular 4項目

Question

我有一個文件function.js，它導出的函數與一些api和返回值通信。它使用請求庫進行通信。我在node.js應用程序中使用這個。我如何在我的angular 4應用程序中導入/使用它？

我想安裝這個文件爲node_module。所以我創建了新的文件夾功能 其中是function.js，package-json和node_modules文件夾。然後我在NG4應用程序安裝它通過命令

npm install --save ./function 

然後在typings.d.ts我宣佈它

declare var Myfunction: any 

，並在我的組件導入

import * as Myfunction from "function" 

但是當我嘗試使用它我得到一個錯誤：

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 我試過@Z。 Bagley answear，現在我可以導入我的文件。但有錯誤：

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) 

我認爲是與請求庫連接，這可能不被瀏覽器支持。

Answer 1

在Angular 4項目中包含自定義JavaScript函數的一種簡單方法是將該項目包含在資產文件夾中，然後使用require將其導入到組件打字稿中。

的src /資產/ example.js

export function test() { 
    console.log('test'); 
} 

SRC /應用/ app.component.ts

（前@Component(...)）

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

（在內）

ngOnInit() { 
    example.test(); 
} 

Answer 2

我想你可能也需要通過腳本標籤包含在index.html的代碼。

您可能會發現有用的這個其他答案：https://stackoverflow.com/posts/40635697/edit