如何将我自己的 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.

更新 我试过@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/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();
}

Answer 2

我认为您可能还需要通过脚本标记将您的代码包含在 index.html 中。

您可能会发现这个其他答案很有用：https://stackoverflow.com/posts/40635697/edit