angular2+常见的错误应用汇总

浅浅的花香味﹌ 2021-10-23 10:25 364阅读 0赞

一、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：

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTQ4YjIzMjU3NDUxYWEwNmUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy80NjQvZm9ybWF0L3dlYnA][]

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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWViYmQyMWI2NjExNmZiMzkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8yMDAvZm9ybWF0L3dlYnA][]

四、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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWEzMGYwOGFkYzY2ODVmNDkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw][]

*  2、添加encapsulation: ViewEncapsulation.None

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTgyMjc0NDkwOTcwNGU5YTQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy83ODYvZm9ybWF0L3dlYnA][]

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

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

*  1、通常赋常量值

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTkzNjNlMzI1OTk0ZWNiY2MucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy84ODgvZm9ybWF0L3dlYnA][]

常规形式

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

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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTFlNDk1MzgxZWYxOTIzNTgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw][]

变量形式一

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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTliYWNhNjU1ZmMzYmVmMjQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw][]

变量形式二

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

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

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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWNlMmQ2ZWU4MDBhZmVjNzkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy85OTIvZm9ybWF0L3dlYnA][]

通常情况下

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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTBhNTFkZWUyZWViOTM1OTMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw][]

错误形式

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

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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTIyNDdmNWUzMjJkOTRlNGUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy80NjUvZm9ybWF0L3dlYnA][]

错误代码

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTI5NmRhZjY0NDdlMzgzM2IucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy82MDgvZm9ybWF0L3dlYnA][]

更正后的代码

*  注意：
    
     *  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)，如下图

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWQyNjYzMmJkYjhkYTVjMzIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8zMDUvZm9ybWF0L3dlYnA][]

我在当前项目用的版本

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

--------------------

![20191229112121499.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTQ4YjIzMjU3NDUxYWEwNmUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy80NjQvZm9ybWF0L3dlYnA]: /images/20211023/1d33b39f1fb34949a2537978ba08485e.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWViYmQyMWI2NjExNmZiMzkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8yMDAvZm9ybWF0L3dlYnA]: /images/20211023/fabe71d195714261bacd5633d1d256da.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWEzMGYwOGFkYzY2ODVmNDkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw]: /images/20211023/791ea6a337d445ea8b7a870f9488473e.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTgyMjc0NDkwOTcwNGU5YTQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy83ODYvZm9ybWF0L3dlYnA]: /images/20211023/e4ce393ce3aa49a2b992a646820fc271.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTkzNjNlMzI1OTk0ZWNiY2MucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy84ODgvZm9ybWF0L3dlYnA]: /images/20211023/62bee42a245744a19abcf4cd3de74a08.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTFlNDk1MzgxZWYxOTIzNTgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw]: /images/20211023/f3955ff631764b6399d49a278a59f21d.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTliYWNhNjU1ZmMzYmVmMjQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw]: /images/20211023/f38d773a79b94e1ca34e597fab626dcd.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWNlMmQ2ZWU4MDBhZmVjNzkucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy85OTIvZm9ybWF0L3dlYnA]: /images/20211023/d6b5875e2e9a4e27afd21aa9ee4255b5.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTBhNTFkZWUyZWViOTM1OTMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8xMDAwL2Zvcm1hdC93ZWJw]: /images/20211023/351a073813c34e49b1f42bf9cefb156c.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTIyNDdmNWUzMjJkOTRlNGUucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy80NjUvZm9ybWF0L3dlYnA]: /images/20211023/a4a2c106c64a4fbfbee685922b31e57f.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LTI5NmRhZjY0NDdlMzgzM2IucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy82MDgvZm9ybWF0L3dlYnA]: /images/20211023/82958630e1254d69a3cb43662fb44029.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zODg0NDU3LWQyNjYzMmJkYjhkYTVjMzIucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8zMDUvZm9ybWF0L3dlYnA]: /images/20211023/ea560b1659ac4a71a869f04592fb12e0.png
[20191229112121499.png]: /images/20211023/94fc0b2ea8884c75b8ba7b5fc8f9965d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20211023/55550dcaab194520a00ad0d2067e018b.png