zwbHUST的博客

如果要声明一个公共组件，在app.module.ts中引入，declarations元数据数组中声明。这样所有属于AppModule模块的其他组件模板都可以使用。注意红字部分，在app.module.ts中声明公共组件，只有属于AppModule模块的其他组件的才能使用，有些子模块中的组件不能使用这个app.module.ts中声明公共组件。...

前几天运行好好的模块，切换分支后，起服务就报错了：查询到的原因，可能是js顺序加载问题，可尝试解决的方式：清除浏览器缓存，ctrl+F5强制刷新。如果还不行,可参数这篇排查：https://blog.youkuaiyun.com/sansan_7957/article/details/80229697...

今天更新了模块依赖的图标库，发现一些图标不显示。过程很漫长，先怀疑是不是环境没有更新，是不是环境问题，然后本地起服务，连环境图标也没有问题啊。最后的最后，才去比对字体文件，补丁包解压，找出fonts文件夹，和本地最新图标文件对比，擦！！！竟然不一样！！！fonts放在assets文件夹，源代码文件都是最新的，为啥打成补丁包以后，字体文件就不同了？那一定是打包编译环境出了问题啊！！！assets文件夹打包编译时，直接会打包啊，相当于复制粘贴吧，能有啥问题。最后一看package.json的ng bui

方式一，注册微服务（有局限）方式二，nginx反向代理（方便）见这里链接方式三，主要介绍这种方式-配置proxy.config.json（angular为例）1.package.json中配置：npm start ：ng serve--ssl--host0.0.0.0--port8000--disable-host-check--proxy-configproxy.config.json其中proxy.config.json与package.json同级，如果代理网站为h...

angular项目中，之前使用ng4，后来升级ng6后，rxjs也从5升到6，之前使用forkjoin，是这样用的：import { Observable } from "rxjs/Observable";import "rxjs/add/observable/forkjoin";Observable.forkJoin(ObservableInput1,,ObservableInput2).subscribe((datas) => { });升级后突然报错：TypeError

问题：package.json中依赖pchart：1.1.0和p-component，p-component内部也依赖了pchart，但版本是pchart：1.1.1。执行npm install后，就会出现这种情况：项目中的node_modules（外层node_modules）存在pchart：1.1.0；而p-component文件夹中也有一个node_modules（内层node_modules），存在pchart：1.1.1。如果用产品模式编译时ng build--prod，n.

解析换行符为例：<div>{{str }}<div>var str = '我是一个字符串，<br/>我要换行';这样明显是不能换行的，<br/>会被当成字符串显示！方法1：html解析<div id="test"><div>var str = '我是一个字符串，<br/>我要换行';$('#test').html(str);方法二：angular输入接口innerHtml&lt

<divid="test" ></div> --test是字符串 <div *ngFor="letitemofcollection;letindex=index;"id="{{'test' + index}}" ></div> --index是变量 <div *ngFor="letitemofcollection;letindex=index;" [id]=" 'test' + i...

如果在angualr项目中实现防抖节流，可以使用封装好的模块，比如rxjs。但今天说的是使用原始的防抖节流方法遇到的问题：以节流为例，先贴一段常见的原始节流代码：function throttle(fn) { let canRun = true; // 通过闭包保存一个标记 return function () { if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return canRun

angular项目中要以变量的形式，外部引入src,结果报错如下：<iframe name="myiframe" id="iframe1" [src]="srcUrl" width="100%" height="700px" ></iframe>解决方式：1.导入DomSanitizerimport { DomSanitizer} from '@angular/platform-browser';2.引用DomSanitizer，并转换urlsrcUrl:a

背景：通过路由传参的方法，传一个复杂对象obj = {"key":"name1","jsonString":'{"key":"name2"}'}首先，转字符串str =JSON.stringify(obj); 得到"{"key":"name1","jsonString":"{\"key\":\"name2\"}"}"假设路由是这样的（angular路由的写法）：route...

一般情况下 async-await 和 Observables 并不能“在一起使用”。但RxJS 从一开始就具备与 Promises 的高度互操作性。为什么有这个需求由于工作中使用的ng7，之前工作中碰上一个比较复杂的逻辑（大概时两个轮询相互调用，每个轮询都有多种状态，其中一个轮询还内置了setTimeout，setInterval）直接使用rxjs会导致嵌套非常多的层数（可能是我rx...

情形一：如果项目是基于自配置的webpack构建的。想要把拷贝文件到指定目录，这样配置；1.npm下载并安装 [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) 和[html-webpack-include-assets-plugin](https://github.com/jharris4...

1.Cannot find module 'tslib'报错，npm install tslib --save解决2.tslib_1.__exportStar(require("@angular/compiler-cli/src/metadata/collector"), exports);TypeError: tslib_1.__exportStar is not a function。发现...

1、("integrity":.{0,2}".*",) //替换末尾带逗号的行2、(,)(\n)(.*)("integrity":.{0,2}".*") //替换末尾不带逗号的行

背景：angular项目，利用cometd接收通知，当对组件多次初始化时，每次通知上报时，会收到几条重复的通知。猜测：应该是cometd注册了多个监听器，由于每次销毁组件时，没有把cometd监听器清除，导致每次初始化都会有一个监听器。解决：利用angular生命周期钩子ngOnDestroy，每次销毁组件时，清楚对应的cometd实例和监听器。// 销毁组件时清除cometd实例...

报错原因：最常见的有2种1.npm install出错2.npm run build出错第一种大多是依赖包没有拉下来，或者找不到依赖引用，抑或是版本升级导致的，这类报错相对清晰，按照报错排查，最好进行版本锁定。第二种有时npm start也没有错，但就是编译打包时报错，一般打包时如果是以产品模式编译，那么就要在产品模式下编译查看报错日志信息，产品模式下对模板校验比较严格，很多模板中...

本地起angular服务时，在控制台使用ng serve命令，默认端口号4200如果想要停止服务，在ctrl+c，然后输入Y,回车但是如果不慎把控制台关掉了，如果再起服务，会报端口4200被占用，怎么办呢？当然你可以重启电脑，或者换一个端口。但是我就是想关掉它！怎么找到这个进程把它关掉呢？方法：cd c:\Windows\System32》c:\Windows\System...

当新建模块，引用一个组件时，报错Can't bind to 'ngModel' since it isn't a known property of 'plx-select'.解决：查询官网文档可知 ngModel 指令存在于 npm package: @angular/forms, 参考官网样例在对应的 Module 中导入import{FormsModule} from"...

报错如下：此问题头痛了很久，找个几种原因总结如下：但这2种均不能解决我的问题，最后发现了另外一个原因，就是这个不能resolve的参数是一个HTTPService,这个服务在index.ts中export 了2次，注释掉其中一个，就不报此错误了，其实这可能只是表面原因，根本原因还待研究...

（待总结）ngOnInit &constructorngOnInit 是 Angular 2 组件生命周期中的一个钩子，Angular 2 中的所有钩子和调用顺序如下：ngOnChanges - 当数据绑定输入属性的值发生变化时调用ngOnInit - 在第一次 ngOnChanges 后调用ngDoCheck - 自定义的方法，用于检测和处理值的改变

一般angular路由传参，如果参数包含特殊字符，比如"/",需要先编码encodeURIComponent，否则匹配路由时会报错但是今天遇到一个奇怪的问题，当参数是包含"()"好像也不行，但是encodeURIComponent又不能对括号进行编码，好纠结！暂时没有找到相关原因，为什么包括（）也不行？...

resolve拦截是对数据进行预加载，加载成功后，在进行其他操作。待更。。

前言踩坑1.-aot预编译对代码的规范程度要求更为严格！前2天同事修改了一个组件，导致某项目很多模块编译失败，同样都依赖的这个组件，但有些模块却没有失败，原因就是报错的模块使用的就是-aot编译模式，而这个组件修改的代码存在不规范，导致预编译报错！编译报错：Supplied parameters do not match any signature of call target原因...

plx-districtTree是一个自定义组件，出现这个问题的原因基本就是模块加载的时候不能找到这个组件，说明没有正确引入这个组件，主要检测引入的问题！注：按照通常引入做法，尽量引入Module，尽量避免直接引入component，以免漏掉某个组件的引入！Uncaught Error: Template parse errors:Can't bind to 'treeNodes' si...

ViewChildViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，就能正确获取查询的元素。@ViewChild 使用模板变量名import { Component, ElementRef, ViewChild, AfterViewInit } from...

前些天，再写红包支付功能的时候， Expression has changed after it was checked.很头秃呀，上图。 Angular的核心是组件化，组件嵌套会形成一棵组件树。因此它的数据流是自顶而下，从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。尽管检查了父组件之后，子组件可能会改变父组件的数据使得父组件需要再次被检查，这是不被推荐的数据...

（留坑待补）1.组件的测试2.管道的测试3.服务的测试4.测试工具

对于自配置的webpack构建工具1. 下载 test.js npm 包(npm install test.js@latest ）2. npm下载并安装 [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) 和[html-webpack-include-assets-plugin](https:/...

一.样式问题1.利用样式list-style:none;去掉无序列表li前面的小点后，左边有一部分空余空间，由于用chrome开发，网上查询后说是浏览器内核问题，所以添加-webkit-padding-start:0px;解决问题。ul{ width:127px; background-color:#F0FFFF; list-style:none; margin：0px...

Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值。 举例：The  hero's name is {{Hero.name}}若name为空时，会报错，导致整个程序崩溃。若改成如下形式：The  hero's name is {{Hero?.name}}这样即使name为空也不会报错，只是不

例如配置"build": " build --dev --aot",编译时可能会比较慢。原因在于“aot”编译参数是为了进行预编译和编译优化，在发布版本的时候可以利用aot编译方式使用，在本地调试编译可以改为："build": " build --dev"。注意：这个只是当项目比较大，本地编译耗时太久时才考虑。因为有些问题是在aot模式下才显现，所以一定要是AOT模式下调试OK才可...

待研究，郁闷了很久

前言以前调试angular项目都是本地直接ng serve本地起服务，本地机器安装了node.js，但是某天一个非前端同事想要在他机器上起一个纯前端微服务，他的机子没有搭建angular环境，而且他也没有一个完整的angular项目源代码，他也不想搭建环境，更不想去npm install一大堆依赖包，他只有这个前端模块编译后的文件，即dist文件夹中的文件。有时项目打包生成的tar包，解压后也...

编译云ci报错：18:18:37 [INFO] <--- Last few GCs --->18:18:37 [INFO] [564:0x2cf5a90] 1773280 ms: Mark-sweep 1700.7 (1861.3) -> 1700.7 (1845.3) MB, 2620.6 / 0.0 ms (+ 0.0 ms in 0 steps since sta...

一.起因在一个A模块引入某个组件B的时候，本地起服务调试，发现一个比较奇怪的事情：这个B组件本身依赖一个第三方库（简称P v2），而模块A本身也依赖了P(v1)，但他们依赖的是不同版本的P，按照npm依赖包管理规则，B组件会优先查找它内部node_modules中的P（v2）,当找不到时，才会去外层node_modules去查找P（v1），理论上这是正常的，同事的电脑上也是按这个理论执行的，但...

先说2种引入js的方法，网上找到相关的文章，但具体没有写2者的区别，这个有待研究方法一：.angular-cli.json 中引入js方法二：index.html 中配置 js 文件只所以想总结2种方法的区别，是因为项目中使用cometd引入js文件时，在这2处都引入了js,且2处引用的js文件并非同一文件，可能是2个版本的cometd，结果报错让人崩溃，一般是报js文件中某个方法不...

报错：The build command requires to be run in an Angular project, but a project definition could not be found本来是为了解决cli版本过低的问题，一下子从1.2.7升级到7.3.6，运行node --max-old-space-size=3000 \"node_modules/@angular...

学习资料：https://blog.youkuaiyun.com/jiezhaoliao9206/article/details/77880735https://blog.youkuaiyun.com/liumiaocn/article/details/78776761https://blog.youkuaiyun.com/itest_2016/article/details/80048398https://www....

第一个参数是url,第二个参数是body，body为object，如果body为空的时候，参数填{}；this.http.post('url' + id, {}).subscribe(res =&gt; {}, error =&gt; {})