angular2+常见的错误应用汇总

一、angular2 ng build --prod 报错：Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

• 原因： angular-cli 版本低。
• 解决办法一：
  • 1、 rm -rf node_modules/
  • 2、 npm install --save-dev @angular/cli@latest
  • 3、 npm install
• 解决办法二：
  • 配置中--prod 改为 --env=prod

二、npm start 报错：Error: Cannot find module 'lodash'

• 1、 rm -rf node_modules/
• 2、 npm install

三、Can't bind to 'ngModel' since it isn't a known property of 'input'.

• 1、在此组件所在的module中引入FormsModule：

1

• 2、在此组件所在的module中添加：

2

四、Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("

      <li class="item chkitem" *ngFor="let dItem of deptList"  [ERROR ->]*ngIf="!isCopy">

• 指令ngFor和ngIf不要写在同一个标签上。

五、有时候引入第三方组件时有些样式无法修改，此时可以试试以下两步：

• 1、引入ViewEncapsulation

1

• 2、添加encapsulation: ViewEncapsulation.None

2

六、ng2生命周期钩子不能写成箭头函数的形式，否则不响应。

七、关于html标签原有属性的赋值有两种形式：

• 1、通常赋常量值

常规形式

 

注意：红框内的“selectAll”是常量值。

• 2、给属性赋变量值，有以下两种形式
  • ①、给变量值套上‘{{}}’，如下图红框中所示：

变量形式一

• ②、给属性加上‘[]’，如下图红框中所示：

变量形式二

 

注意：红框中的dItem.indexId是变量值。

八、[(ngModel)]属性影响input默认选中

• 1、一般情况下，我们默认让某个input（radio或checkbox）选中时，只需在input中加checked即可，如下图：

通常情况下

• 2、下面这种情况下checked是不起作用的，即input默认是未选中的，解决办法把ngModel属性删掉就可以了：

错误形式

九、打包前运行正常，打包后用eclipse起项目运行报错：AllComponent_Host.html:1 ERROR TypeError: Cannot read property 'parentDepId' of undefined。

• 从报错信息我们可以看到是因为有属性未定义，但打包前的代码运行是正常的，这是什么原因呢？
• 这个情况比较特殊，先看导致错误前后的代码：

错误代码

更正后的代码

• 注意：

  • 1、上面两图代码的区别，只是slice方法的参数不同而已；
  • 2、第一张图的代码在开发环境是运行正常的，打包后在eclipse中起项目是错误的；
  • 3、问题原因：两种环境下window.location.pathname的值不同，所以截取的字符串出错了，更正后的代码即可解决这个问题。

• 结论：这个问题如果在开发时遇到并不难解决，但难的是构建后和构建前不一致时的定位。

十、cnpm代替npm安装包后npm run build:prod容易出现的问题（npm和cnpm混用导致的）(mac中使用cnpm无问题，和系统也有关系)：

at Error (native)
at Object.fs.openSync (fs.js:640:18)
at Object.fs.readFileSync (fs.js:508:33)

• 解决办法：
  • 1、卸载node_modules后用npm重装（前提是npm速度还可以）；
  • 2、卸载node_modules后修改(降低)ng的版本，再次安装(用cnpm)，如下图

我在当前项目用的版本

注意：项目中的node_modules文件夹中的代码如果混用了npm install和cnpm install时会出现类似的问题！
建议：在npm install之前把node和ng的全局版本都更新到最新，本地ng版本也更新到最新版本；

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！