Angular CLI 集成jQuery

Angular CLI有两种方式集成jQuery:以全局方式导入和以模块方式导入。

安装
在导入jQuery之前需要先安装:

npm install jquery --save
npm install @types/jquery --save

全局方式
在.angular-cli.json的app.scripts引入jquery

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
],

模块方式

模块方式主要体现在使用import来导入jquery

import * as $ from 'jquery';

插件

在引入jquery插件,需要确认插件有没有对应的types.d.ts文件,如果没有,则可以在src/types.d.ts定义插件的TypeScript类型。

类似于:

interface JQuery {
  myPlugin(options?: any): any;
}

如果插件没有对应的types,则会报以下类似的错误:

[TS][Error] Property 'myPlugin' does not exist on type 'JQuery'

注意:在一个项目里建议不要两种方式同时使用,这样会导致打包时会打包两份jquery。

版权声明:著作权归作者所有。

相关推荐

Angular 4:集成Angular Material2

Angular Material目的是按照Material Design的规范,使用Angular和TypeScript构建一个高质量的UI组件集。Angular 4已有的项目可以按照下面的步骤集成使用Angular Material2。安装Angular Material以及Angular CDKnpm install&nbs

Angular CLI:集成Autoprefixer兼容多浏览器以及浏览器版本

Angular CLI使用Autoprefixer来兼容不同的浏览器以及多个浏览器版本,我们不需要做额外的工作来集成Autoprefixer。Autoprefixer内部依赖于Browserslist,根据Browserslist的配置决定兼容哪些浏览器或浏览器版本。如果我们对浏览器的兼容范围有自己的需求,可以设置Browserslist的配置。集成Browserslist配置到Angu

Angular CLI:集成Angular Flex Layout

Angular CLI创建项目ng new myproject 安装Angular Flex Layoutnpm install @angular/flex-layout --save 导入Angular Flex Layout NgModule模块src/app/app.module.t

查看angular cli版本

ng help version 查看帮助说明$ ng help version ng version <options...>  Outputs Angular CLI version.  aliases: v, --version, -v  --

撤回Angular CLI执行的ng eject

使用angular cli执行ng eject后,就不允许执行ng server或ng build。执行ng server 或ng build会报一下错误:An ejected project cannot use the build command 

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预