Angular-cli报错处理 You seem to not be depending on "@angular/core". This is an error.

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

#angular启动报错

本文记录了使用 Angular CLI 创建项目过程中遇到的依赖错误及解决方法。通过重新安装依赖包，成功解决了因缺少 '@angular/core' 导致的问题。

按照官网执行
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/core". This is an error.
百度无果 总感觉是依赖包没有安装成功
于是，执行了
E:\learnProject\angularDemo\firstAngular\my-app>cnpm install

再次执行 ng serve –o 成功打开网页

Angular--You seem to not be depending on "@angular/core". This is an error.
罗俊
08-21 2740
前言 这段时间在弄一个体育测试方面的系统，前端是用Angular敲的。在一开始拿到代码的时候，配置好Nodejs以及Angular CLI之后，安装好node_modules，就能用ng serve正常的运行起来，但是今天开完会，宋总说代码更新了，需要我们重新Down代码，于是我在没有保存原来的代码的情况下直接删除源代码，然后往之前的那个盘里相应位置Down代码，完事之后配置好一切，但是运行的时...
Introduction to Web Programming: A One-Hour Comprehensive Tutorial
最新发布
Morpheon的博客
11-30 585
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
【Angular2】You seem to not be depending on “@angular/core”. This is an error
学习 - 总结 - 分享 - Francis
11-17 4864
问题在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/
You seem to not be depending on "@angular/core". This is an error.
偷得浮生半日闲
10-18 940
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 5328
前言：继上一篇博客，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“”
朝时的博客
12-14 920
这几天老师要求使用Angular-cli初始化项目将以前的一个项目移植到ng项目中，所以开始学习使用angular，照着这篇文章进行安装 https://www.cnblogs.com/JennyLin77/p/6249270.html，安装好后跟着用以下命令创建并运行项目： ng new ProjectName  //ProjectName为你的项目名 cd ProjectName n...
Lecture 10: Uncertainty (cont.). Stationary states. Particle on a circle.
dao_2019的博客
01-25 555
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
几何算法——5.关于ACIS和Parasolid曲线曲面求交的调研以及求交框架设计（附代码）
luolei188的博客
02-16 2107
关于曲线曲面求交的框架
FDTD product reference manual-Simulation objects（二）
weixin_43044416的博客
08-29 2181
Note:[p0] = CmNote:whereand θsims=zλdwhere:∗Where FT−1where g(ω)Note:where, INote :# OptionalNote:τc≈10−11sτc≈10−11swhere W(w)
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 重新安装
ScrollView实现自定义RelativeLayout跟随手势上下滑动显示隐藏
08-16
根据ScrollView的自定义实现 RelativeLayout跟随手势的上下滑动显示和隐藏顶部标题栏，话不多说 直接上代码
Angular Error - You seem to not be depending on “@angular/core“ and/or “rxjs“. This is an error.
Simon loves games
07-31 920
错误详情 解决方法 # 先运行npm link $ npm link $ ng serve
【Angular】报错：“You seem to not be depending on “@angular/core”. This is an error“
shangao1352的博客
12-19 347
Angular报错：“You seem to not be depending on “@angular/core”. This is an error” 报错场景：angular/cli安装成功之后，重新启动服务 ng serve时遇到上述错误 解决方法：删除node_modules依赖包，重新进行npm i
【angular】you have to be inside an Angular CLI project in order to use the serve command
玫瑰与鹿°
10-09 2887
ng serve 后出现问题： 出错原因： 打开文件夹的路径不对 正确步骤： 1、打开文件夹 2、选择其中含有“e2e”、“src”的文件夹，打开就行 3、再次 ng serve，成功 我出的错误： 打开了本应打开的文件夹的上一级。
VS Code：You have to be inside an Angular CLI project in order to use the serve command.
天天开心鸭！
08-15 1944
前言： 　　在运行前端项目的时候突然报了个错，措手不及的我赶紧找了找度娘，下面总结一下问题解决办法。 问题截图： 问题原因： 　　没有安装angularCLI 问题解决： 　　npm install --save-dev @angular/ci@latest ...
angular部分报错处理
樊建华
11-20 1418
一，报错：Could not find module "@angular-devkit/build-angular" from。。。 解决方式： npm i --save-dev @angular-devkit/build-angular 二，报错：You seem to not be depending on "@angular/core" and/or "rxjs". This is an...
Angular 官方教程：英雄指南 下载运行不了
大强博客
08-05 842
1、报错信息： D:\eclipse-workspace\dqgy\dqgy\toh-pt6>ng test Could not find module "@angular-devkit/build-angular" from "D:\\eclipse-workspace\\dqgy\\dqgy\\toh-pt6". Error: Could not find module "@angul...
使用上面的插件依然报错 ./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` | --- ###
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值