angular报错：“”You seem to not be depending on “@angular/core”. This is an error“”

最新推荐文章于 2025-11-30 14:00:26 发布
原创 最新推荐文章于 2025-11-30 14:00:26 发布 · 921 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angular

在使用Angular-cli初始化项目过程中遇到启动错误，通过重新安装依赖包解决了编译问题，确保项目能够正常运行。

这几天老师要求使用Angular-cli初始化项目将以前的一个项目移植到ng项目中，所以开始学习使用angular，照着这篇文章进行安装

https://www.cnblogs.com/JennyLin77/p/6249270.html，安装好后跟着用以下命令创建并运行项目：

ng new ProjectName  //ProjectName为你的项目名

cd ProjectName

ng serve  // 启动项目

执行到最后一步却报了个错 ：

各种百度没有解决，比较多的是说应该在项目路径下执行serve命令，但可以看到就是在项目路径下执行的，实在不知道什么问题。然后看到Stack Overflow上一个回答，想着试一试，然后在创建好的项目目录下执行以下命令:

E:\Tools\NodeJS\angular-weblab>npm install

再次执行 ng serve

 然后输入地址，成功打开网页：

结论：在这个路径下缺少包，重新装以下就能编译了。在这里记录一下。

Angular--You seem to not be depending on "@angular/core". This is an error.
罗俊
08-21 2741
前言 这段时间在弄一个体育测试方面的系统，前端是用Angular敲的。在一开始拿到代码的时候，配置好Nodejs以及Angular CLI之后，安装好node_modules，就能用ng serve正常的运行起来，但是今天开完会，宋总说代码更新了，需要我们重新Down代码，于是我在没有保存原来的代码的情况下直接删除源代码，然后往之前的那个盘里相应位置Down代码，完事之后配置好一切，但是运行的时...
Lecture 10: Uncertainty (cont.). Stationary states. Particle on a circle.
dao_2019的博客
01-25 561
L10.1 Uncertainty and eigenstates (15:53) L10.2 Stationary states: key equations (18:43) L10.3 Expectation values on stationary states (09:00) L10.4 Comments on the spectrum and continuity conditions (13:09) L10.5 Solving particle on a circle (11:05) L1
You seem to not be depending on "@angular/core". This is an error.
偷得浮生半日闲
10-18 941
node_modules appears empty, you may need to run `npm install` You seem to not be depending on "@angular/core". This is an error.
angular问题解决：“”You seem to not be depending on “@angular/core”. This is an error“”
杨楠
05-18 5329
前言：继上一篇博客，angular/cli安装成功之后，重新启动服务 ng serve ，然后就报错了，上面意思是说没有依赖于“@ angular / core”。 这是一个错误。内容：1、问题一：You seem to not be depending on “@angular/core”. This is an error（1）、删除node_modules，再重新安装rimraf node_...
【Angular】报错：“You seem to not be depending on “@angular/core”. This is an error“
shangao1352的博客
12-19 348
Angular报错：“You seem to not be depending on “@angular/core”. This is an error” 报错场景：angular/cli安装成功之后，重新启动服务 ng serve时遇到上述错误 解决方法：删除node_modules依赖包，重新进行npm i
You seem to not be depending on “@angular/core”. This is an error
idomyway的博客
04-18 573
问题描述在ng serve angular项目时遇到You seem to not be depending on “@angular/core”. This is an error……解决方法：1、删除node_modules 2、npm install 重新安装
Introduction to Web Programming: A One-Hour Comprehensive Tutorial
最新发布
Morpheon的博客
11-30 588
Web Programming Fundamentals: A Comprehensive Introduction This tutorial covers the core concepts of web programming, focusing on the differences between static web pages and dynamic web applications. Web applications, unlike static pages, generate content
几何算法——5.关于ACIS和Parasolid曲线曲面求交的调研以及求交框架设计（附代码）
luolei188的博客
02-16 2116
关于曲线曲面求交的框架
RFID 仿真/模拟/监控/拦截/检测/嗅探器
weixin_33895695的博客
09-24 2535
Sound card based RFID sniffer/emulator  (Too tired after recon.cx to do draw the schematics better than that :) Stay tuned for the next version including Tag emulation.) baudline FFT signal anal...
【Angular2】You seem to not be depending on “@angular/core”. This is an error
学习 - 总结 - 分享 - Francis
11-17 4866
问题在jenkins构建中出现这个问题，但是本地运行正常You seem to not be depending on “@angular/core”. This is an error 解决把node_modules删除，再重新安装rimraf node_modules cnpm install  参考： https://stackoverflow.com/questions/41534459/
ScrollView实现自定义RelativeLayout跟随手势上下滑动显示隐藏
08-16
根据ScrollView的自定义实现 RelativeLayout跟随手势的上下滑动显示和隐藏顶部标题栏，话不多说 直接上代码
npm start Error"You seem to not be depending on "@angular/core". This is an error."
weixin_30810583的博客
10-31 180
　　今天早晨在学习ant Design的分页功能的时候，按照git上面的源码乱改一通，把package.json文件改掉了。但是呢，我最后徐撤回了全部修改，理所当然的我认为我的代码可以跑起来了，结果，ng serve 报错 You seem to not be depending on "@angular/core". This is an error. 　　然后我去上网百度了一下，也...
Angular Error - You seem to not be depending on “@angular/core“ and/or “rxjs“. This is an error.
Simon loves games
07-31 921
错误详情 解决方法 # 先运行npm link $ npm link $ ng serve
Angular-cli报错处理 You seem to not be depending on "@angular/core". This is an error.
etemal_bright的博客
05-02 1728
按照官网执行 npm install -g @angular/cli ng new my-app cd my-app ng serve –open 执行到最后一步却报错 E:\learnProject\angularDemo\firstAngular\my-app>ng serve --o You seem to not be depending on "@angular/co...
Angular常见报错
weixin_44535575的博客
02-23 589
Cannot find module “tslib” 原因有两个： 1、自动导入了type，删除即可 import { Type } from '@angular/compiler/src/core'; 2、引入ChangeDetectionStrategy的路径有误 正确： import { ChangeDetectionStrategy } from '@angular/core'; ...
angular项目中常见报错及解决方法
alice9999999的博客
03-31 1678
（1）产生原因：其实这是 Angular 的警告机制，防止由于模型数据（model data）与视图 UI 不一致，导致页面上存在错误或过时的数据展示给用户。
Angular报错汇总（持续更细）
打字员blog
03-06 449
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘disabled: true’. Current value: ‘disabled: false’.解决方法： @Component({ selector: ’ ', templa...
import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from
andrewDengpf的博客
07-12 1913
定义一个Angular2/4 service:import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import { User } from '../_models/index'; @Injectable() e
使用上面的插件依然报错 ./src/index.less?ngGlobalStyle:2:0 - Error: Module parse failed: Unexpected character '@' (2:0) File was processed with these loaders: * ./node_modules/@angular-devkit/build-angular/node_modules/less-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders. | /* You can add global styles to this file, and also import other style files */ > @import "~@cloudscope/core/index.css"; | @import "~@cloud/tiny3/themes/theme-default.css"; | @import 'assets/css/zTreeStyle/zTreeStyle.css'; ./src/app/app.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: ts.getDecorators is not a function
06-14
<think>我们正在处理两个主要问题：1.Less文件解析错误：Moduleparsefailed:Unexpectedcharacter'@'(可能是由于Less文件中的@import语句引起的)2.构建时出现`ts.getDecoratorsisnotafunction`错误（这通常与TypeScript版本或Angular编译器有关）根据用户提供的信息，我们使用AngularCLI15.1.2，并且可能使用了自定义Webpack配置（通过@angular-builders/custom-webpack）。同时，问题涉及less-loader和angular-devkit/build-angular。解决方案分为两部分：###第一部分：解决Less文件解析错误（Unexpectedcharacter'@'）这个错误通常发生在Webpack无法正确解析Less文件中的@import语句。我们需要确保Webpack配置中正确设置了less-loader来处理Less文件。步骤：1.确保安装了必要的loader和依赖：```bashnpminstalllessless-loader--save-dev```2.在自定义Webpack配置（通常是`webpack.config.js`或`custom-webpack.config.js`）中添加对Less文件的处理规则。注意：Angular默认支持Sass，但不直接支持Less，因此需要手动配置。示例配置（webpack.config.js）：```javascriptmodule.exports={module:{rules:[{test:/\.less$/,use:['to-string-loader',//如果需要将样式注入到组件中（用于Angular组件中的styleUrls）'css-loader','less-loader']}]}};```注意：如果样式是通过`@import`在组件中引入的（即在组件的`styleUrls`中使用了`.less`文件），我们通常使用`to-string-loader`（或Angular默认的`style-loader`的变体）。但是，如果是在全局样式文件中引入，则可能需要不同的处理方式（如使用MiniCssExtractPlugin）。3.如果全局样式文件中使用@import引入Less文件，则可能需要另外添加一个规则来处理这些全局文件。例如，在`angular.json`中指定的全局样式文件（styles数组）：```javascript//在webpack.config.js中，我们可以为全局样式单独设置规则（不使用to-string-loader）constMiniCssExtractPlugin=require('mini-css-extract-plugin');module.exports={module:{rules:[{test:/\.less$/,include:path.resolve(__dirname,'src/styles'),//假设全局样式在src/styles目录use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']},{test:/\.less$/,exclude:path.resolve(__dirname,'src/styles'),use:['to-string-loader','css-loader','less-loader']}]},plugins:[newMiniCssExtractPlugin({filename:'[name].css'})]};```4.在`angular.json`中配置使用自定义Webpack配置，并指定builder为`@angular-builders/custom-webpack`。同时，确保全局样式文件已经被正确添加到`angular.json`的`styles`数组中。###第二部分：解决`ts.getDecoratorsisnotafunction`错误这个错误通常是因为TypeScript版本过高或过低，与Angular编译器不兼容。Angular15要求TypeScript版本为~4.8.2或~4.9.3（具体版本可查看Angular15的package.json的peerDependencies）。解决方案：1.检查TypeScript版本：```bashnpmlisttypescript```2.如果版本不是4.8.x或4.9.x，则安装兼容版本：```bashnpminstalltypescript@~4.8.2--save-dev```3.如果已经安装了正确版本的TypeScript，那么可能是Angular编译器的问题。尝试清除缓存并重新安装：```bashnpmcacheclean--forcerm-rfnode_modulesnpminstall```4.如果问题仍然存在，检查`@angular/compiler-cli`和`@angular/compiler`的版本是否与AngularCLI版本（15.1.2）一致。确保所有Angular包都是15.1.x版本。5.另一个可能的原因是`@angular-builders/custom-webpack`的版本不兼容。请确保使用我们之前确定的版本（15.1.1）：```bashnpminstall@angular-builders/custom-webpack@15.1.1--save-dev```6.如果使用了一些自定义的TypeScript转换（例如自定义装饰器），请确保相关插件与TypeScript4.8+兼容。###总结步骤：1.安装less-loader和less：```bashnpminstalllessless-loader--save-dev```2.创建或修改自定义Webpack配置文件（如`custom-webpack.config.js`）以包含Less规则（参考上面的配置示例）。3.在`angular.json`中配置使用自定义Webpack：```json"architect":{"build":{"builder":"@angular-builders/custom-webpack:browser","options":{"customWebpackConfig":{"path":"./custom-webpack.config.js"},//...其他原有配置}},"serve":{"builder":"@angular-builders/custom-webpack:dev-server","options":{"browserTarget":"your-app:build"}}}```4.确保TypeScript版本为4.8.2或4.9.3（Angular15兼容版本）：```bashnpminstalltypescript@~4.8.2--save-dev```5.确保所有Angular相关包版本一致（15.1.2），并重新安装依赖：```bashrm-rfnode_modulesnpminstall```6.如果还有问题，检查是否有其他loader或插件与less-loader冲突，并确保Webpack规则正确匹配了Less文件。###注意事项：-如果项目中同时使用了Sass和Less，需要分别配置规则，并注意排除规则（exclude）或包含规则（include）以避免冲突。-如果使用第三方UI库（如AntDesign）的Less样式，可能需要配置less-loader的`lessOptions`，例如：```javascript{loader:'less-loader',options:{lessOptions:{modifyVars:{//修改变量},javascriptEnabled:true//如果第三方库需要}}}```###相关问题：1.如何为Angular项目配置Sass？2.如何解决Angular升级后的TypeScript版本冲突？3.如何为第三方UI库（如AntDesign）配置自定义主题？4.Angular自定义Webpack配置的常见问题有哪些？</think>### 解决方案：Angular Less 文件解析错误与 `ts.getDecorators` 报错 #### 一、解决 Less 文件 `@import` 解析错误 **根本原因**：Angular CLI 15 默认不支持 Less，需要手动配置 Webpack 的 Less 规则。 ##### 步骤 1：安装必要依赖 ```bash npm install less less-loader@10 --save-dev # 注意：less-loader 必须使用 v10（Webpack 5 兼容） ``` ##### 步骤 2：创建自定义 Webpack 配置 新建 `custom-webpack.config.js`： ```javascript module.exports = { module: { rules: [ { test: /\.less$/, use: [ { loader: 'to-string-loader' }, // Angular 组件样式必需 { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true // 允许 Less 中的 JS 表达式 } } } ] } ] } }; ``` ##### 步骤 3：配置 `angular.json` ```json { "projects": { "your-project": { "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./custom-webpack.config.js" }, // ...其他配置 } }, "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "browserTarget": "your-project:build" } } } } } } ``` ##### 关键点： - `to-string-loader` 将 CSS 注入 Angular 组件[^1] - `lessOptions.javascriptEnabled` 解决第三方库（如 Ant Design）的兼容问题[^2] - 确保 `@import` 路径使用相对路径（如 `@import './variables.less';`） --- #### 二、解决 `ts.getDecorators is not a function` 错误 **根本原因**：TypeScript 版本与 Angular 15 不兼容。 ##### 解决方案： 1. **锁定 TypeScript 版本** 在 `package.json` 中指定兼容版本： ```json { "devDependencies": { "typescript": "~4.8.4" // Angular 15 官方支持版本 } } ``` 2. **清除缓存并重装依赖** ```bash rm -rf node_modules package-lock.json npm cache clean --force npm install ``` 3. **检查装饰器语法** 确保组件代码无过时语法： ```typescript // ✅ 正确 @Component({...}) export class MyComponent {} // ❌ 避免 const Component = (options) => {...} // 非标准装饰器 ``` --- ### 验证配置 1. 测试 Less 文件导入： ```less /* src/app/styles.less */ @color: red; .test { color: @color; } ``` ```typescript // 组件中引用 @Component({ styleUrls: ['./styles.less'] }) ``` 2. 启动项目验证： ```bash ng serve ``` --- ### 常见问题排查 | 错误现象 | 解决方案 | |----------------------------------|----------------------------------| | `Cannot find module 'less'` | `npm install less --save-dev` | | `this.getOptions is not a function` | 降级 `less-loader` 到 v10 | | 第三方库样式报错 | 在 `lessOptions` 添加 `modifyVars` | --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值