Angular CLI: 全局脚本

2024-05-02 03:37:33

全局脚本

有的时候，我们需要加载全局脚本，例如 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 ...
Angular CLI 全局 ng.cmd 文件内容分析
文件内容如下: REM Jerry ::这是注释 @ECHO off SETLOCAL CALL :find_dp0IF EXIST "%dp0%\node.exe" (SET & ...
Angular CLI在线安装和离线安装
Angular CLI 安装方式默认已经安装了 Node.js 和 npm 包管理器. 1. 在线安装可以使用外网的情况下,可以使用在线安装的方式. 要使用 npm 命令全局安装 CLI,请打开终 ...
全局Angular CLI版本大于本地版本
本文翻译自:Global Angular CLI version greater than local version When running ng serve I get this warning ...
全局安装 Angular CLI
网上关于Angular CLI的安装指南有很多,但总是缺一些细节,而这些细节总是导致各种各样的错误.现将安装过程记录如下. 安装前提:Nodejs已安装!Nodejs中包含npm,可用来下载各种工具插 ...
ng命令汇总：Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
Angular介绍、安装Angular Cli、创建Angular项目入门教程
场景 Angualr 是一款来自谷歌的开源的web 前端框架,诞生于2009 年,由Misko Hevery 等人创建,后为Google 所收购.是一款优秀的前端JS 框架,已经被用于Google ...
angular cli 切换 css_漫谈 Angular 定制主题的四种方式
主题定制是提升用户体验最常见的一种,前端框架众多,主题定制方式却异曲同工,下面来介绍一下 Angular 中实现主题定制的四种方式. 1. webpack loader React 版本的 Ant D ...
安装angular cli_Angular 9适用于初学者—如何使用Angular CLI安装第一个应用程序
安装angular cli Angular is one of the most popular JavaScript frameworks created and developed by Goog ...

最新文章

热门文章