Question

include the library到角4.0的正确工作流程是什么，并在组件中使用它？

我的步骤：

yarn add mathjs

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

然后我尝试添加到Component（docs）：

import { mathjs } from "./mathjs";

和

var math = require('mathjs');

那些没有用。我错过了什么？

更新

似乎mathjs使用旧方法建议var math = require('mathjs')。也许它在某种程度上类似于JQuery question ......

UPDATE2

Answer 1

这是一个很好的问题，我很高兴你问，因为我希望我第一次遇到这个小问题的时候就有了我要写的东西。这是一个打字稿/ javascript和webpack问题，然后才会出现角度问题。我当然正计划尽快在my blog上写一篇文章。

您的情景：

你跑

npm install mathjs

现在您尝试使用组件中的math.js：
查找math.js dist js文件（node_modules / mathjs / dist / math.js）并像这样引用

import {mathjs} from "../../node_modules/mathjs/dist/math";
但是您收到错误消息"set --allowJS".您这样做：

Set --allowJS in config (tsconfig.json) { "compilerOptions": { "allowJs": true, ...
现在你得到：

错误在../node_modules/mathjs/dist/math.js(12209,13）：无法访问检测到代码。

查看math.js源代码，你会看到它是一个旧的学校模块，但是没有root包装器函数（一个函数可以将它们全部带到黑暗中并绑定它们。）（稍后会详细介绍）。

解决方案：为目标库安装一个打字文件（@ types / mathjs）

首先，检查您是否可以在此处获取模块的@typings文件 https://microsoft.github.io/TypeSearch/
从npm（https://www.npmjs.com/package/@types/mathjs）获取mathjs typings文件并运行npm install将打包.d.ts文件添加到目标lib的node_modules目录

npm install --save @types/mathjs
正确添加类型参考

import * as mjs from "mathjs"

像这样使用：

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

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

更多：例如，您可以看到自己的角度项目。在使用ng new创建新项目后，每次运行npm install时，CLI都会创建node_modules文件夹。深入到这里并注意许多.js文件的d.ts文件。

当搞乱打字或定义你自己的（.d.ts文件）时，请务必在构建之间重新启动服务器，因为这些工作目前似乎没有动态更新

进一步阅读：

http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html

https://angular.io/guide/typescript-configuration#typescript-typings

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

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

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

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

declare const math;

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

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

Answer 3

我这样做了，它适用于angular9。

首先安装npm软件包mathjs。

npm install mathjs

然后导入您的组件或指令。

import { round } from 'mathjs'

您可以对此进行测试。

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

如何将包含旧导入方法的第三方库包含在Angular4.x中？

3 个答案:

您的情景：