如何包括使用较旧的Angular4.x导入方法的第三方库？

Question

什么是正确的工作流到包括图书馆的角度4.0，并使用它在一个组件？

我的脚步：

yarn add mathjs

然后，应该有一种方法在构建生命周期中注入js库，以便angular4组件可以使用它。JHipster利用Webpack和纱线。

然后我尝试添加到组件(文档)中：

import { mathjs } from "./mathjs";  

和

var math = require('mathjs');

这些都不管用。我遗漏了什么？

更新：

似乎mathjs使用了更老的方法，建议使用var math = require('mathjs')。也许它在某种程度上与JQuery问题相似.

UPDATE2

Answer 1

这是一个很好的问题，我很高兴你问我，因为我希望我第一次遇到这个小问题的时候就有了我要写的东西。这是一个类型/javascript和webpack的问题之前，它是一个角度的问题。我肯定会尽快在我的博客上写一篇文章。

你的场景：

你跑

npm install mathjs

1. 现在您尝试从组件中使用math.js：
2. 查找math.js dist js文件(node_node/mathjs/dist/math.js)并引用如下 import {mathjs} from "../../node_modules/mathjs/dist/math";
3. 但是你会收到错误信息，上面写着"set --allowJS".，你这样做： Set --allowJS in config (tsconfig.json) { "compilerOptions": { "allowJs": true, ...
4. 现在你得到了：

错误出现在./node_ code /mathjs/dist/math.js (12209,13)：检测到无法到达的代码。

1. 在math.js源代码中，您可以看到它是一个古老的模块，但是没有根包装函数(一个函数将它们全部带出来，在黑暗中绑定它们。)(稍后将详细介绍)。

Solution：为目标库(@type/mathjs)安装一个类型文件

1. 首先，检查一下是否可以在https://microsoft.github.io/TypeSearch/中为您的模块获取@类型文件
2. 从npm (https://www.npmjs.com/package/@types/mathjs)抓取mathjs类型文件，并运行npm将键入.d.ts文件添加到目标库的node_modules目录中 npm install --save @types/mathjs
3. 正确添加您的类型ref import * as mjs from "mathjs"

像这样使用它：

console.log("e was: " + mjs.e);

我在这里的github上有完整的math.js库解决方案，https://github.com/res63661/importOldJSDemoWithTypings/

更多:举个例子，只看你自己的角度项目。每次创建带有ng新的新项目后，CLI都会在运行npm时创建node_modules文件夹。深入到这里，并注意到许多.js文件的.js文件。

当处理类型或定义自己的(.d.ts文件)时，请确保在构建之间重新启动服务器，因为类型当前似乎没有动态更新。

进一步阅读：

1. http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html
2. https://angular.io/guide/typescript-configuration#typescript-typings
3. https://microsoft.github.io/TypeSearch/

最后：

如果您处于紧要关头，而这并不适用于您，我成功地为另一个(小得多的)模块创建了一个自定义包装器，方法是将它封装在主导出类型中。

export var moduleNamer = (function(){
  //module implementation
}());

然后将本地的.js文件转储到我的组件中，然后按以下方式引用它：

//reference like this from your component:
import {moduleNamer} from "./source";  //from source.js

-富有

Answer 2

我这样做了，这对angular9有效。

首先安装npm软件包mathjs。

npm install mathjs

然后导入组件或指令。

import { round } from 'mathjs'

你可以用这个来测试。

console.log(round(math.pi, 3) )

Answer 3

尝试将脚本包含到index.html中：

<script src="./assets/math.js" type="text/javascript"></script>

然后将其添加到组件文件中：

declare const math; 

然后，可以在组件中使用数学：

ngOnInit(): void {
    console.log(math.sqrt(-4););
}