angular x版本日常报错归纳（不断更新）

￡神魔★判官ぃ 2023-03-03 04:53 11阅读 0赞

## 1.angular项目打包，node内存溢出 ##

错误日志01：  
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)\[UploadYourResumeComponent

解决方案：  
检查你当前页面（.ts）中是否使用其他模块组件，若存在则删除，因为如果新建一个页面并配置module文件，那么本页面所涉及到的外部组件必须在本module中导入。

场景：执行angular cli脚手架的打包命令 ng build – prod 时，打包进度92%时，无法前进，最后报出信息：JavaScript heap out of momory 百度给出结论是node的溢出（）  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center][]

1.  打开项目中mode\_modeles/.bin/ng文件  
    记事本打开ng文件，将\#!/usr/bin/env node --max\_old\_space\_size=4096放首行。（尝试无果）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 1]  
    2.将本地node升级（Windows系统好像只能重新node.js 下载后将其覆盖老版本） 问题解决！

旧版本： node.js v10  
新版本：node.js v12

node.js直接覆盖升级后，查看本地npm版本存在老版本，此时项目中启动中执行npm install  
报错 ：npm ERR! cb.apply is not a function （删除npm旧版本全局安装的信息AppData\\Roaming\\下的文件 npm和cache文件，重新安装！）

npm ERR! A complete log of this run can be found in:

这里说到node.js的升级，想说下自己的感受，如果你未使用nvm去管理不同版本的npm,此时重新下载安装node.js，你会发现node 升级了而对应的npm缺没有升级，苦闷吧，我就是持续纠结了一段时间，我明明将老的node.js卸载后，也命令确认过未有node和npm的版本了，为什么新的node安装后，发现了老的npm呢， 后面找些了如何删除npm, 找到用户下例如：  
C:\\Users\\Greg Zhong\\AppData\\Roaming  
你只要将AppData\\Roaming\\中的npm和npm cache文件删除干净，就可以看到新的npm版本了， 所以这里我们发现使用nvm去管理我们的npm不同版本还是很重要的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 2]使用npm config ls 查看配置信息，找到prefix就可以查看npm全局安装位置。

为什么会出现node内存溢出？  
node和V8关系：【未官方求证过，在某篇博客看到的，仅限参考】  
V8作为node的JavaScript的脚本引擎，node在享受V8的优点时，也会受到V8的限制，尤其是内存限制。在64位操作系统中内存约为1.4G，32位操作系统中0.7G

结语：这个的确很烦人，搞了很久的时间去验证解决，网上针对问题的解决文档较少，很多东西需要自己实践去解决，

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

## 2.uncaught（in promist）:NulljectorError:staticInjectorErroe(AppModule)\[RecipeCommentDetailComponent ->NgbActiveModal\] ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 3]  
一般报错这个信息，都是提示我们该页面未在module中引入，但是有时候在module中的declarations引入了，仍旧报这个错误，本人在跳转通过按钮【routerLink】跳转页面时一直报这个未导入的问题，后面解决发现跳转过去的页面的**构造函数中使用了其他插件**，  
![在这里插入图片描述][20200914134255855.png_pic_center]

我在module中未引入，所以报错。

## 3.angular 6路由（queryParams）传参和接收参数 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 4]  
接受参数页面：  
1.引入  
import \{ActivatedRoute\} from ‘@angular/router’;

2.写入构造  
protected activatedRoute: ActivatedRoute,

3.使用接受路由传参  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 5]  
注： 页面启动，首先加载构造函数和ngOnIt 所以接收参数可按喜好，自己抉择！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/ed44181412484d4293e86176afab5276.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/a462116302d14c9ea1d39aaced4f7ff2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230208/d0f202a9a58f41258162707f34c978b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230208/5c4df79adaa841daac214852e739804f.png
[20200914134255855.png_pic_center]: /images/20230208/c72ef88a9151493db3bf903408b5679f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230208/afdb49865d8142c48b27a1ebbf18a330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20230208/73d1ff3100034bc1b56ea48a9c10af18.png