angular 4，全局导入外部javascript

我知道以前有人问过这个问题，但在搜索和尝试了很多东西之后，我不得不问

我正在使用包并尝试导入

我可以像这样直接将它导入到我的组件中

import * as loadImage from 'blueimp-load-image/js/index.js';

但据我所知，我应该在zone.js之前导入外部脚本（使用异步操作），因为否则可能会导致更改检测问题。 事实上，这正是我在iOS中使用Safari时遇到的问题。目前，我必须手动调用更改检测

在angular starter软件包中，名为

polyfills.ts

的文件中需要

zone.js

，该文件由webpack作为chunk/js文件添加

import 'blueimp-javascript-to-blob-for-angular';
//how to import so it's useable in any component?
import 'blueimp-load-image/js/index';
import 'core-js/es6';
import 'core-js/es6/set';
import 'core-js/es7/reflect';

require('zone.js/dist/zone');

if ('production' !== ENV) {
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

如何以及在何处导入zone.js之前的外部javascript文件（以下内容），以便在组件中仍能使用它？

到目前为止，我的问题是无法访问外部库函数，因为它们总是

未定义。但它们已添加到生成的javascript文件中

在我看来，将外部javascript导入angular 4项目的整个过程非常复杂

Javascript文件的内容：

module.exports = require('./load-image')

require('./load-image-scale')
require('./load-image-meta')
require('./load-image-fetch')
require('./load-image-exif')
require('./load-image-exif-map')
require('./load-image-orientation')

使用普通html脚本标记，在index.html文件的头部分（应用程序的入口点）导入外部javascript文件
例如：

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

如果您正在使用如图所示的
AddAssetTMLPlugin

您需要创建另一个
条目
点，该点将需要外部js文件，并在其他捆绑包之前使用
AddAssetHtmlPlugin
插件加载。
但这将导致额外的请求。是的。。但是，当index.html页面（即您的单页应用程序）加载到浏览器@Arikaelisn时，它只会加载一次外部javascript文件。没有办法将其直接包含到应用程序中（导入/要求等？），您可以在要使用它的应用程序的html模板中添加相同的脚本标记@阿里凯尔。无法在.ts文件中导入javascript文件，因为.ts是typescript文件，.js是javascript。因此，您必须在html模板或index.html文件中导入所有外部.js文件。您有机会尝试吗？我刚刚尝试过。它可以工作并添加必要的JS文件（只需导出SourceMaps）。但老实说，在我的书中，导入Js文件应该没有这么难（我花了好几个小时尝试不同的方法）。虽然这种方法可行，但我认为它还远远不够理想。无论如何，谢谢。但webpack现在抱怨
未捕获引用错误：导入文件的第1行未定义模块。
。因此可能需要以浏览器理解的方式传输此ES6模块。。。哦，myyy…@Arikael，到底什么是困难的？您正在使用构建工具，应该使用它支持的方法。您需要一个新的入口点，因为ESM模块是静态的，并且在执行导入它们的模块之前执行。最后一个错误可能是一个单独的问题。如果网页包配置正确，它会将
模块
转换为自己需要的格式
  /**
   * Plugin: AddAssetHtmlPlugin
   * Description: Adds the given JS or CSS file to the files
   * Webpack knows about, and put it into the list of assets
   * html-webpack-plugin injects into the generated html.
   *
   * See: https://github.com/SimenB/add-asset-html-webpack-plugin
   */
  // new AddAssetHtmlPlugin([
  //   { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
  //   { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
  // ]),