角度4，全局導入外部javascript

我知道這個問題之前已經被問過了，但是在搜索並嘗試了大量我不得不問的東西之後。角度4，全局導入外部javascript

我使用的是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'); 
}

如何以及在哪裏我可以導入我的外部JavaScript文件zone.js之前（下面的內容），所以我仍然可以使用它在我的組件？

到目前爲止，我的問題是，我無法訪問外部庫函數，因爲他們總是undefined。但他們已被添加到生成的JavaScript文件。

將外部javascript導入到angular 4項目中的整個過程對我來說似乎非常複雜。 JavaScript文件的

內容：在您的index.html文件的頭部部分

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')

來源

2017-08-21 Arikael

你有沒有機會嘗試[我的解決方案]（https://stackoverflow.com/a/45793458/2545680）？ –

如果您使用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插件在其他軟件包之前加載。

來源

2017-08-21 09:19:21

我剛試過。它的工作原理和添加必要的JS文件（只需要擴展SourceMaps）。但是，說實話，在我的書中，導入Js文件的東西不應該很難（我花了幾個小時嘗試不同的方法）。儘管這種方法有效，但我認爲這並不理想。無論如何，謝謝。但是webpack現在在導入的文件的第一行上抱怨'Uncaught ReferenceError：模塊沒有被定義'。 – Arikael

所以可能需要在瀏覽器能夠理解的東西中傳輸這個ES6模塊...... oh myyy ... – Arikael

@Arikael，究竟有什麼難的？您正在使用構建工具，您應該使用它支持的方法。您需要一個新的入口點，因爲ESM模塊是靜態的，並且在執行導入它們的模塊之前執行。最後一個錯誤可能是一個單獨的問題。如果Webpack配置正確，它會將'module'轉換爲它自己的require格式 –

導入外部JavaScript文件，這是入口點到你的應用程序，使用普通的HTML腳本標籤例如：

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

來源

2017-08-21 08:17:57

但這會導致一個額外的請求。 – Arikael

是的..但它會加載外部JavaScript文件只有一次，當index.html頁面（即您的單頁應用程序）加載到瀏覽器@Arikael –

是沒有辦法將其直接包含到應用程序（導入/ require等？） – Arikael

角度4，全局導入外部javascript

回答

相關問題