ReferenceError: dc 未定义，即使按顺序导入 d3、dc 和 crossfilter答案

【问题标题】：ReferenceError: dc is not defined, even after importing d3,dc and crossfilter in orderReferenceError: dc 未定义，即使按顺序导入 d3、dc 和 crossfilter
【发布时间】：2018-07-22 18:28:09
【问题描述】：

在我使用 dc.js 和 Leaflet 构建的 Angular 应用程序中，我按照 d3、crossfilter2、dc、leaflet 的顺序在 component.ts 中完成了以下导入。

在 index.html 中我有 dc-leaflet.js 的 cdn

但是在控制台中我得到了错误：

ReferenceError: dc 未定义
在 dc-leaflet.js:10
在 dc-leaflet.js:124

和

ReferenceError: dc 未定义
在 scripts.bundle.js:10
在 scripts.bundle.js:124

【问题讨论】：

在浏览器的开发控制台 (F12) 中，检查“网络”选项卡是否存在加载顺序/时序问题（或错误）。一些外部库返回一个加载其他模块的脚本——angular 可能会在它完全加载之前尝试使用其中一个......
再一次，这听起来像是模块加载器的问题——有些非常严格并且保持每个模块完全独立（没有全局变量），除非它们声明彼此之间的依赖关系。如果您知道如何选择模块加载器，请尝试选择一个真正让 JS 成为 JS 的非常基本的加载器。

标签： javascript angular d3.js dc.js crossfilter

【解决方案1】：

所以，

我认为您还需要用于传单、交叉过滤器和 d3 的 CDN。

dc.js 是一种将所有库链接在一起的插件。

你看看这些例子：dc.js leaflet es6

这些使用 ES6 导入（有点像脚本标签）。

    import * as thing from 'thing';

与

我还包含了项目的 cdn 脚本标记 版本。

此外，我建议您使用 webpack 或您使用的任何方式注册这些库。如果这不起作用，请使用 StencilJS，fits in angular

我个人已经让这些库在 StencilJS 中工作。

【讨论】：