[英]Using external javascript AMD Modules in Angular2 CLI
当我使用Angular2预发行版时,我不得不使用systemjs
来使用外部javascript库,即ESRI ArcGIS JavaScript API,它基于AMD模块(虽然可以输入)。
现在我想迁移到Angular2 CLI。 但是,在Angular2从systemjs
移动到webpack
并且没有要修改的webpack.config
文件之后,我无法看到如何导入像arcgis这样的外部库。
外部库存储在:
<script src="https://js.arcgis.com/3.19/"></script>
示例:在我的角度组件中,我不知何故需要能够导入这些:
import map from 'esri/map';
导入' https://js.arcgis.com/3.19/esri/map.js '
知道如何实现这一目标吗?
编辑:如果我将map.js的链接添加到angular-cli.json
"scripts": [
"../node_modules/jquery/dist/jquery.js",
....
"https://js.arcgis.com/3.19/esri/map.js"
],
并import {map} from 'esri/map';
导入它作为import {map} from 'esri/map';
我得到一个webpackMissingModule: C:\\Users\\xy\\project\\src\\https:\\js.arcgis.com\\3.19\\esri\\map.js
示例angular-cli.json
包含外部库抱歉转储数据,但这是一个提示,因为你可以看到我添加了styles
和scripts
脚本和css以及angular-cli.json中的addons
数组
{
"project": {
"version": "1.0.0-beta.19-3",
"name": "adm"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"assets/lib/bootstrap/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"assets/lib/metismenu/metisMenu.css",
"assets/lib/animate.css/animate.css",
"assets/css/customradiocss.css",
"rainbow/blackboard.css"
],
"scripts": [
"assets/lib/jquery/jquery.js",
"assets/lib/bootstrap/js/bootstrap.js",
"assets/lib/metismenu/metisMenu.js",
"assets/lib/screenfull/screenfull.js",
"assets/js/core.js",
"assets/js/app.js",
"assets/js/easyResponsiveTabs.js",
"rainbow/rainbow-custom.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": ["../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
您可以通过以下两种方式之一完成此操作:
在index.html中导入脚本,然后在组件中,将API入口点声明为常量:
const argGIS:any;
然后将它用作您使用它的任何其他地方。 你将没有智能支持,但它会起作用。
使用npm模块,它看起来像一个存在。 安装它:
npm install arcgis --save
将它添加到angular-cli.json中的“脚本”中
"../node_modules/arcgis/file.js"
查看index.d.ts文件以查找要导入的内容并将其导入组件中:
import {Something} from 'arcgis';
一个选项是,将其导入主索引html文件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.