Question

我知道这个问题之前已被问过，但在搜索并尝试了大量的事情之后我不得不问。

我正在使用Angular Starter包并尝试导入external javascript library

我没有问题直接导入我的组件，如此

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

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

在角度启动程序包zone.js中需要一个名为polyfills.ts的文件，该文件由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文件（下面的内容），这样我仍然可以在我的组件中使用它？

到目前为止，我的问题是我无法访问外部库函数，因为它们总是undefined。但它们已被添加到生成的javascript文件中。

将外部javascript导入角度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')

Answer 1

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

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

Answer 2

如果您使用AddAssetHtmlPlugin here

  /**
   * 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')}`) }
  // ]),

您需要创建另一个entry点here，该点需要外部js文件，并在其他捆绑包之前使用AddAssetHtmlPlugin插件加载。

angular 4，全局导入外部javascript

2 个答案: