Angular CLI: 全局脚本
全局脚本
有的时候,我们需要加载全局脚本,例如 jQuery 脚本库,第三方的控件库等等。比如 jQuery 可以直接加载到 window 对象上,这就需要我们使用 Angular 中的全局脚本来处理。
使用全局脚本
通过在 angular-cli.json 配置文件的 apps[0].scripts 属性中添加脚本文件可以应用于全局范围。这相当于您在 index.html 中添加 <script> 标记来精确加载它们。
这对于遗留的库或者脚本片段来说特别有用。
"scripts": [
"global-script.js",
],
重命名和延迟加载
可以使用对象格式实现重命名和延迟加载。
"scripts": [
"global-script.js",
{ "input": "lazy-script.js", "lazy": true },
{ "input": "pre-rename-script.js", "output": "renamed-script" },
],
在应用中使用全局库
一旦您通过scripts 导入一个库,您不需要在 TypeScript 代码中通过 import 再次导入它(例如 import * as $ from 'jquery';)。如果这样做了,您会得到两个不同的库:一个全局导入,一个作为模块导入。
这对于使用插件的库来说,尤其是个坏消息,比如 jQuery,因为每个复制品都有不同的插件。
相反,在项目中下载全局库的相应类型定义(npm install @types/jquery),遵循安装第三方库的步骤,您将可以访问库所导出的全局变量。
如果您使用的第三方库还没有类型定义,可以在 src/typings.d.ts 中手工定义为 any。
declare var libraryName: any;
在使用扩展其它库的脚本库时,例如 jQuery 的插件实例(例如 $('.test').myPlugin(); ) ,因为安装的类型 @types/jquery 可能没有包含 myPlugin 的定义,您可能需要在 src/typings.d.ts 中添加一个类似如下的接口。
interface JQuery {
myPlugin(options?: any): any;
}
否则,在您的 IDE 中,您可能会看到类似 [TS][Error] Property 'myPlugin' does not exist on type 'JQuery' 错误。
See also
https://github.com/angular/angular-cli/wiki/stories-global-scripts
Angular CLI: 全局脚本的更多相关文章
- angular cli全局版本大于本地版本 把本地版本升级方式
查看 angular 版本 ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...
- 迈向angularjs2系列(8):angular cli和angular2种子项目
文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
- 使用Angular CLI进行Build (构建) 和 Serve
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
- .Net Core + Angular Cli / Angular4 开发环境搭建
一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm ...
- 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...
- (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- Protrator 官网和下载工具稍慢 , 但能使用. Angular CLI 内置 官方推荐 TS的 demo 不明显 , 而且依赖无法安装
npm uninstall -g protractor && cnpm install -g protractor && protractor --version 复 ...
- .Net Core+Angular Cli/Angular4开发环境搭建教程
一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm ...
- Angular CLI的简单使用(2)
刚才创建了myApp这个项目,看一下这个项目的文件结构. 项目文件概览 Angular CLI项目是做快速试验和开发企业解决方案的基础. 你首先要看的文件是README.md. 它提供了一些如何 ...
随机推荐
- java中字符串"1999-10-01T00:00:00+08: 00" 转化为Date格式
String oldStr = "1999-10-01T00:00:00+08: 00": SimpleDateFORMAT sdf = new SimpleDateFORMAT ...
- initWithFrame方法的使用
1. initWithFrame方法是什么? initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对象,也有initWithFrame方法, ...
- numpy鸢尾花
import numpy from sklearn.datasets import load_iris #从sklearn包自带的数据集中读出鸢尾花数据集data iris_data = load_i ...
- 简述linux操作系统启动流程
Linux启动流程 POST-->BootSequence(BIOS)->Bootloader(MBR,grub)-->kernnel(ramdisk,initrd)-->ro ...
- Python基础:八、python基本数据类型
一.什么是数据类型? 我们人类可以很容易的分清数字与字符的区别,但是计算机并不能,计算机虽然很强大,但从某种角度上来看又很傻,除非你明确告诉它,"1"是数字,"壹&quo ...
- Sublime3安装及配置
1.官网下载 2.安装后输入密钥 ----- BEGIN LICENSE -----sgbteamSingle User LicenseEA7E-11532598891CBB9 F1513E4F 1A ...
- Kali无法启动、无法安装
好久未用Kali,换了个电脑后拷贝过去,发现打开登录界面无限循环,后删除下载新的vm镜像,发现无法开机,界面如下: 后经过各种尝试,发现为vmware版本太低的原因造成,升级vmware到版本14,可 ...
- [R] [Johns Hopkins] R Programming -- week 4
#Generating normal distribution (Pseudo) random number x<-rnorm(10) x x2<-rnorm(10,2,1) x2 set ...
- 在经过身份验证的服务中不支持跨域 javascript 回调
在 asp.net web forms 站点中做了一个 wcf restful service 接口,开启了webforms 身份认证. 当 webforms 站点用户登录之后,访问 restful ...
- Win10无法访问网上邻居电脑共享的文件夹怎么办
Win10无法访问网上邻居电脑共享的文件夹怎么办 现在许多电脑上装的都是Win系统,Win10无法访问网上邻居电脑共享的文件夹怎么办呢?下面小编为大家介绍下解决的方法吧! 1点击桌面上的“此电脑”图标 ...