devgirl
个人专栏

最新文章

angular cli配置路径别名替代webpack alias的方案

Angular cli内部是基于webpack实现构建项目:默认是没有webpack的配置文件webpack.config.js。部分与webpack相关的配置可以在.angular-ci.json中设置。如果需要定制的webpack.config.js,则需要使用eject命令发射出webpack.config.jswebpack alias可以让我们对路径设置别名,在模块之间引用是使用的是绝对

Linux排除特定文件打包压缩文件夹

Linux打包可以使用tar命令。如果要排除目录里的特定文件或文件夹,可以使用--exclude选项。$ tar --exclude='./folder' -zcvf /backup/filename.tgz .--exclude选项需要放在源文件和目的压缩包文件之前。排除多个文件/文件夹$ tar --exclude='./folder' --exclude='./upload/folder2'

CSS应用苹果的San Francisco字体

优先选择苹果字体,并兼容其它平台的字体。font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,"Helvetica Neue",Arial,sans-serif;

使用stackblitz在线运行github上基于Angular CLI构建的项目

在Github上面有很多Angular的demo,示例等等,我们要运行Github里的示例,需要经过下载,初始化项目,然后才到运行项目,这中间会花去很多时间。有一个叫做StackBlitz的项目,它可以看作一个轻量级的在线的IDE,它允许我们在线运行基于Angular CLI构建的项目。更进一步,对于Github上的项目,我们只需要简单地在浏览器输入对应的url即可运行我们想要的项目。示

Angular CLI使用淘宝npm镜像新建项目失败

Angular CLI切换为淘宝的npm镜像cnpm后新建项目总是报网络错误:$ ng new demo --style=scss --routing create demo/e2e/app.e2e-spec.ts (287 bytes) create demo/e2e/app.po.ts 

Angular CLI修改npm镜像为淘宝镜像cnpm

Angular CLI提供了ng set 命令用于设置参数。修改为淘宝镜像需要设置packageManager配置。ng set --global packageManager=cnpm 修改为npm镜像ng set --global packageManager=npm 查看所有配置项:ng ge

使用Angular CLI的6个最佳实践及专业技巧

我们在新建前端项目时,常常会为项目的代码结构以及技术选型(如gunt,gulp,webpack,systemjs等等)绞尽脑汁。Angular CLI为我们开发Angular应用提供了一个标准的项目模板。项目模板里包含了完整的测试:包括unit测试,e2e测试多环境构建,提供了develop和production这两种基本的构建还提供了一系列代码开发工具,如ng generat

Angular CLI 集成jQuery

Angular CLI有两种方式集成jQuery:以全局方式导入和以模块方式导入。安装在导入jQuery之前需要先安装:npm install jquery --save npm install @types/jquery --save 全局方式在.angular-cli.json的app.scripts引入jquery&quo

Angular CLI:添加组件ng generate component

Angular CLI添加组件命令ng generate component [name] 命令里的name为组件名,而generate指令可以简写为g:ng g component [name] 示例$ ng g component mydemo  create src/app

Angular CLI:解决webpack-dev-server报错Invalid Host Header

Angular cli底层是使用webpack,webpack默认会对访问的主机进行检测,这是为了防止主机受到DNS重新绑定攻击。解决方法根据运行的脚本不同分为两种情况解决。一、angular cli脚本如果是使用angular cli的脚本ng serve启动服务器,可以使用--disable-host-check解决。ng serve 

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:配置webpack热模块替换hmr(Hot Module Replacement)

热模块替换(Hot Module Replacement)是Webpack的特性,它可以让我们在调试时不需要重新构建就可以更新代码到正在运行的应用。Angular CLI需要做一些设置就可以使用webpack的热模块替换功能。添加依赖hrm依赖于@angularclass/hmr,安装@angularclass/hmr到dev-dependency$ npm

升级angular cli到最新版本

升级angular cli我们可能首先想到的是npm updatenpm update angular-cli -g 但执行完后,使用ng v查看angular cli 的版本,版本仍然为旧的。下面方法可以升级angular cli到最新版本:全局安装升级angular cli到最新的版本需要先卸载

查看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