【Angular】官方“英雄指南”ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS245

在学习Angular过程中,遇到使用HTTP模块调试时出现错误。问题出现在node_modules包中,通过删除并使用cnpm重新安装解决问题,避免了网络不稳定导致的npm安装异常。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【背景】

  学习Angular,首先从官方学习,先看完官方网站。初步学习Angular,看着官方的教程一步一步的敲,过程中基本没有遇到什么问题,但敲到最后了,使用HTTP的时候,居然报错了!我把源码重新复制了一遍,还是不行。

【问题】

  使用vscode开始调试后,发现错误出现在node_modules包中。在这里插入图片描述

【解决方法】

  怀疑是使用npm install命令下载的包有问题,把这个文件夹删除,然后使用 cnpm install 就可以了。

  如果删除不了,关闭vscode,找到项目文件夹,找到node_modules删除即可。

  由于npm安装插件是从国外服务器下载,受网络影响很大,可能出现异常,继而淘宝团队生产一个完整的npmjs.org镜像,用cnpm代替npm, cnpm与nodejs的npm用法一致,只是在执行命令时,将npm改为cnpm

【总结】

  遇到问题都是有原因的,找到为什么,下一步就可以解决了。

<think>问题:在Angular14升级到15后,在angular.json中引用了多个CSS文件,但在构建时出现了关于CodeMirror的CSS文件的错误,提示需要合适的loader来处理这些文件。错误信息:```Youmayneedanappropriateloadertohandlethisfiletype,currentlynoloadersareconfiguredtoprocessthisfile.Seehttps://webpack.js.org/concepts#loaders|/*Thelintmarkergutter*/>.CodeMirror-lint-markers{|width:16px;|}```分析:在Angular15中,默认的构建工具可能对CSS文件的处理方式有所改变。错误信息表明Webpack在处理这些CSS文件时,没有配置合适的loader。特别是,错误发生在CodeMirror的CSS文件中。解决方案:我们需要让AngularCLI能够处理这些外部CSS文件。有几种方法可以解决:1.**将CSS文件导入到全局样式文件中**:我们可以将报错的CSS文件(例如`codemirror/addon/lint/lint.css`)导入到项目的全局样式文件(如`styles.less`或`styles.css`)中,而不是在`angular.json`中直接引用。这样,AngularCLI在构建时会通过CSS预处理器(如果配置了)或Webpack的CSSloader来处理它们。2.**配置AngularCLI以处理这些CSS文件**:如果不想改变导入方式,我们可以修改Webpack配置来添加对特定路径下CSS文件的处理。但是,AngularCLI默认不暴露Webpack配置,我们可以使用`@angular-builders/custom-webpack`来扩展配置。由于第一种方法更简单且不需要额外工具,我们优先尝试第一种方法。###方法1:将CSS文件导入到全局样式文件中步骤:1.打开项目的全局样式文件(通常是`src/styles.less`或`src/styles.css`,取决于你的项目设置)。2.在文件顶部使用`@import`语句引入报错的CSS文件。例如:```less@import&#39;~codemirror/lib/codemirror.css&#39;;@import&#39;~codemirror/addon/hint/show-hint.css&#39;;@import&#39;~codemirror/addon/fold/foldgutter.css&#39;;@import&#39;~codemirror/theme/ambiance.css&#39;;@import&#39;~codemirror/theme/material-palenight.css&#39;;@import&#39;~codemirror/addon/lint/lint.css&#39;;@import&#39;~codemirror/theme/idea.css&#39;;//其他报错的CSS文件类似引入```注意:使用`~`前缀表示从`node_modules`中导入。3.然后,从`angular.json`文件中移除这些CSS文件的引用。这样,这些CSS文件将通过全局样式文件被处理,从而避免Webpackloader的问题。###方法2:使用自定义Webpack配置如果方法1无效,或者你更希望保留在`angular.json`中的引用,那么可以尝试使用自定义Webpack配置。步骤:1.安装`@angular-builders/custom-webpack`:```bashnpminstall-D@angular-builders/custom-webpack```2.在项目根目录创建一个Webpack配置文件,例如`extra-webpack.config.js`,内容如下:```javascriptmodule.exports={module:{rules:[{test:/\.css$/,use:[&#39;style-loader&#39;,&#39;css-loader&#39;],},],},};```注意:这个配置会处理所有的CSS文件。但要注意,AngularCLI内部已经使用了一些CSS处理,所以这样添加可能会重复处理,或者需要更精确的配置。3.修改`angular.json`文件,将构建器改为`@angular-builders/custom-webpack:browser`,并指定自定义配置:```json"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js"},//...其他原有配置}},//同样修改test配置(如果有需要)"test":{"builder":"@angular-builders/custom-webpack:karma","options":{"customWebpackConfig":{"path":"./extra-webpack.config.js"},//...其他原有配置}}}```注意:这种方法需要更谨慎,因为可能会与Angular内部的Webpack配置冲突。###推荐方案由于错误只发生在特定的几个CSS文件上,而且这些文件来自`node_modules`,建议采用第一种方法,即通过全局样式文件导入。这样既简单又符合AngularCLI的工作方式。如果问题仍然存在,可以尝试检查这些CSS文件是否被多次导入,或者路径是否正确。###示例代码假设全局样式文件是`src/styles.less`,则添加如下导入:```less//在styles.less文件中@import&#39;~codemirror/lib/codemirror.css&#39;;@import&#39;~codemirror/addon/hint/show-hint.css&#39;;@import&#39;~codemirror/addon/fold/foldgutter.css&#39;;@import&#39;~codemirror/theme/ambiance.css&#39;;@import&#39;~codemirror/theme/material-palenight.css&#39;;@import&#39;~codemirror/addon/lint/lint.css&#39;;@import&#39;~codemirror/theme/idea.css&#39;;```然后,在`angular.json`中,删除这些CSS文件的引用,只保留项目自己的全局样式和必要的第三方全局样式(如ng-zorro的样式等)。修改后的`angular.json`的`styles`数组可能如下:```json"styles":["src/styles.less","node_modules/ng-zorro-antd/ng-zorro-antd.min.css","node_modules/@cloud/tiny3/themes/styles.css","node_modules/@cloudscope/core/ui/mask/mask.css","node_modules/@cloudscope/core/ui/message/tips.css","node_modules/@cloudscope/core/ui/font/style.css","node_modules/@cloudscope/core/ui/regionTree/regionTree.css","node_modules/@cloudscope/core/ui/loading/loading.css"],```注意:移除了所有CodeMirror相关的CSS文件,因为它们已经在`styles.less`中导入了。###解释通过将CSS导入到全局样式文件中,AngularCLI在处理全局样式时会自动使用配置的CSS预处理器(如Less)和Webpack的CSSloader,这样就不会出现loader未配置的问题。同时,这种方法避免了修改Webpack配置的复杂性。如果问题解决,则说明成功;如果还有问题,请检查控制台错误信息,确保所有需要的CSS都正确导入,并且路径正确。###相关问题§§相关问题§§:1.Angular中,如何正确引入第三方库的CSS文件?2.使用AngularCLI构建时,如何处理非JavaScript/CSS资源文件(如图片、字体等)?3.在升级Angular版本后,如何处理常见的构建错误?4.如何自定义AngularCLI的Webpack配置?</think>### 解决方案:解决 Angular 15 中 CSS 文件加载错误 #### 问题原因 在 Angular 15 中,当直接在 `angular.json` 中引用第三方 CSS 文件时,Webpack 可能无法正确处理这些文件,因为: 1. Angular 15 使用更严格的 Webpack 配置 2. 某些 CSS 文件(如 CodeMirror)包含特殊语法(如嵌套规则) 3. 缺少对应的 CSS 预处理器配置 #### 推荐解决方案:使用全局样式文件导入 这是最安全且官方推荐的方式: 1. **创建/修改全局样式文件** 打开 `src/styles.less`(或 `styles.css`,根据项目配置) 2. **添加导入语句** ```less /* src/styles.less */ /* 第三方库样式 */ @import "~codemirror/lib/codemirror.css"; @import "~codemirror/addon/hint/show-hint.css"; @import "~codemirror/addon/fold/foldgutter.css"; @import "~codemirror/theme/ambiance.css"; @import "~codemirror/theme/material-palenight.css"; @import "~codemirror/addon/lint/lint.css"; @import "~codemirror/theme/idea.css"; /* Cloudscope 核心样式 */ @import "@cloudscope/core/ui/mask/mask.css"; @import "@cloudscope/core/ui/message/tips.css"; @import "@cloudscope/core/ui/font/style.css"; @import "@cloudscope/core/ui/regionTree/regionTree.css"; @import "@cloudscope/core/ui/loading/loading.css"; /* 其他第三方样式 */ @import "ng-zorro-antd/ng-zorro-antd.min.css"; @import "@cloud/tiny3/themes/styles.css"; ``` 3. **清理 angular.json** 修改 `angular.json` 文件,移除所有直接引用的 CSS 文件: ```json "styles": [ "src/styles.less" // 仅保留全局样式文件 ], ``` #### 备选方案:自定义 Webpack 配置(高级) 如果必须保留 `angular.json` 中的引用: 1. 安装依赖: ```bash npm install -D @angular-builders/custom-webpack css-loader postcss postcss-loader postcss-preset-env ``` 2. 创建 `webpack.config.js`: ```javascript // webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/i, use: [ &#39;style-loader&#39;, &#39;css-loader&#39;, { loader: &#39;postcss-loader&#39;, options: { postcssOptions: { plugins: [require(&#39;postcss-preset-env&#39;)], }, }, }, ], }, ], }, }; ``` 3. 修改 `angular.json`: ```json "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./webpack.config.js" }, "styles": [ "src/index.less", "node_modules/ng-zorro-antd/ng-zorro-antd.min.css", // ... 其他CSS文件保持不变 ] } } } ``` #### 解决方案说明 1. **全局导入方案**: - ✅ 使用 Angular 内置的 CSS 处理管道 - ✅ 自动处理 Less/CSS 预处理 - ✅ 避免 Webpack 配置冲突 - ❌ 需要手动维护导入顺序 2. **Webpack 自定义方案**: - ✅ 保留 angular.json 原始结构 - ✅ 更精细控制 CSS 处理 - ❌ 增加构建复杂度 - ❌ 可能需处理版本兼容性问题 #### 验证步骤 1. 删除 `node_modules/.cache` 目录 2. 重新安装依赖: ```bash rm -rf node_modules/.cache npm install ``` 3. 启动开发服务器: ```bash ng serve ``` > **推荐首选全局导入方案**,它更符合 Angular 的工作方式且维护成本更低。如果遇到特定 CSS 文件解析问题,可在 `styles.less` 中使用 `@import (inline) "file.css"` 强制原始导入。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值