开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 8:错误:未捕获(in promise)：NullInjectorError: StaticInjectorError(AppModule)

Angular 8是一种流行的前端开发框架，用于构建现代化的单页应用程序。它基于TypeScript编写，并且具有强大的工具和功能，使开发人员能够快速构建高性能的Web应用程序。

错误:未捕获(in promise)：NullInjectorError: StaticInjectorError(AppModule)是Angular应用程序中常见的错误之一。它通常表示在注入依赖项时出现问题，导致无法解析或找到所需的依赖项。

解决此错误的一种常见方法是检查应用程序的模块（AppModule）中的提供商配置。确保所有需要注入的服务或依赖项都正确地添加到提供商数组中。另外，还应检查是否正确导入了所需的模块。

以下是一些可能导致此错误的常见原因和解决方法：

未正确导入所需的模块：检查是否正确导入了所有需要的模块，并在应用程序的模块中进行了正确的配置。
未正确配置提供商：确保所有需要注入的服务或依赖项都正确地添加到提供商数组中。例如，如果要注入一个名为DataService的服务，应在提供商数组中添加{ provide: DataService, useClass: DataService }。
循环依赖：检查是否存在循环依赖关系，即两个或多个服务之间相互依赖。解决此问题的一种方法是重新设计代码以避免循环依赖。
依赖项未正确注入：确保在需要注入依赖项的组件或服务中正确使用了依赖注入的语法。例如，在构造函数中使用@Inject装饰器注入依赖项。

总之，错误:未捕获(in promise)：NullInjectorError: StaticInjectorError(AppModule)表示在Angular应用程序中出现了依赖项注入的问题。通过检查模块配置、提供商配置、导入的模块以及依赖注入的语法，可以解决此错误。

对于更多关于Angular的信息，您可以访问腾讯云的Angular产品介绍页面：Angular产品介绍。

相关搜索:错误:未捕获(在promise中)：错误: StaticInjectorError(AppModule)[ Http ]：StaticInjectorError Http 错误错误:未捕获(在promise中)：NullInjectorError: StaticInjectorError(Wr)[hm -> t]：未捕获(在promise中)：覆盖: StaticInjectorError(AppModule)[CdkConnectedOverlay ->覆盖]获取错误为"NullInjectorError: StaticInjectorError(AppModule)[ContactService -> HttpHeaders]“错误:未捕获(在promise中)：错误: StaticInjectorError(AppModule)[RegisterPage -> PostProvider]：如何解决？错误:未捕获(在承诺中)：错误: StaticInjectorError(AppModule)[HomePage -> InAppBrowser]：错误:未捕获(在promise中)：错误: StaticInjectorError[e -> t]：StaticInjectorError(Platform: core)[e -> t]：NullInjectorError:没有tI提供程序 StaticInjectorError(AppModule)[NbOAuth2AuthStrategy -> InjectionToken窗口]；NullInjectorError错误: InjectionToken窗口没有提供程序 Firebase函数Promise链未捕获错误 TypeScript:未捕获的Promise内部错误 cordova-plugin-printer @ionic-native/打印机错误:未捕获(在promise中)：NullInjectorError 未捕获的错误:由模块“”AppModule“”声明的意外值“”undefined“”Angular2异常:错误:未捕获(在promise中)：错误:无法匹配任何路由：未捕获(在promise中)：NotSupportedError: GATT错误未知错误:未捕获(在promise中)：无效链接: ProductListComponent JS Live Search筛选器未捕获promise错误 Angular 8中的插件:未捕获ReferenceError: SystemJS 错误:未捕获(在promise中)：错误:没有ActivatedRoute提供程序错误错误:未捕获(在promise中)：MyPlugin没有web实现错误错误:未捕获(在promise中)：错误:没有Boolean提供程序

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

angular工程目录结构说明

整体结构说明文件名称文件说明 node_modules npm 安装的第三方依赖 src 存放业务源码 angular.json angular 配置文件 karma.conf.js 测试配置文件（...alert("请求地址出错"); break; case 408: alert("请求超时"); break; case 500: alert("服务器内部错误..."); break; case 501: alert("服务未实现"); break; case 502: alert("网关错误"); break...DOCTYPE html> DefaultAngularApp.../core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule

1101 0

Angular 快速学习笔记(1) -- 官方示例要点

语法绑定数据管道pipe 格式化数据 {{ hero.name | uppercase }} Details [(ngModel)] 双向绑定，form需要引入FormsModule AppModule...异步处理可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象） b. angular使用了Rxjs，因此使用Observable，Observable 是...Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它 b. ng generate module app-routing...使用http，需要在AppModule中， @angular/common/http 中导入 HttpClientModule 符号，并把它加入 @NgModule.imports 数组 c....它把错误对象传给错误处理器，错误处理器会处理这个错误 private handleError (operation = 'operation', result?

3.6K0 0

Angular 快速学习笔记(1) -- 官方示例要点

语法绑定数据管道pipe 格式化数据 {{ hero.name | uppercase }} Details [(ngModel)] 双向绑定，form需要引入FormsModule AppModule...异步处理可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象） b. angular使用了Rxjs，因此使用Observable，Observable 是...Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它 b. ng generate module app-routing...使用http，需要在AppModule中， @angular/common/http 中导入 HttpClientModule 符号，并把它加入 @NgModule.imports 数组 c....它把错误对象传给错误处理器，错误处理器会处理这个错误 private handleError (operation = 'operation', result?

3.7K5 0

Angular核心-创建对象-HttpClient

Angular核心-创建对象博客首页：蔚说的博客欢迎关注点赞收藏⭐️留言作者水平很有限，如果发现错误，求告知，多谢！有问题可私信交流！！！...（达内教育学习笔记）仅供学习交流 Angular核心-创建对象 Angular核心-创建对象创建对象的两种方式Angular核心概念---服务和依赖注入创建服务对象的步骤：使用Angular官方提供的服务对象...“可被注入的” @Injectable({ providedIn:"root" //指定当前服务对象在根模块中提供-appmodule }) export class LogService.../浏览器支持的原生技术；基于回调方式处理响应 jQuery.ajax() 也是XHR，只是进一步封装而已/比原生要简单，基于回调方式处理 Axios 也是XHR，只是进一步封装而已/比原生要简单，基于Promise...HttpClient 也是XHR，只是进一步封装而已/比原生要简单，基于‘观察者模式’处理响应；可以排队、并发、撤销 Fetch 不再是XHR，是W3C提出的新技术，有望取代XHR/比XHR从根本上就更加先进；天然基于Promise

1.3K2 0

Angular2 拦截器（页面请求修改Url+headers传值+获取服务器返回的错误信息）

extends Http { status = { "status.400": "错误的请求。..., "status.501": "未实现。服务器不识别该请求方法，或者服务器没有能力完成请求。", "status.503": "服务不可用。...RequestOptions,Router,StorageService] } //主要结束 ], bootstrap: [AppComponent] }) export class AppModule...//userApiservice import { Injectable } from '@angular/core'; import { Http } from '@angular/http';...constructor(private http:Http) { } /** * 登录 * @param user 用户对象用户名，密码 */ apilogin(user:object):Promise

3K2 0

学习NestJS开发小程序后台（一）

InjectRepository(UserRepository) private readonly userRepository: UserRepository, ) {} async findAll(): Promise... { return this.userRepository.find(); } async create(user: User): Promise { return...二、注册全局错误过滤器在main.ts文件中注册全局错误过滤器： import { NestFactory } from '@nestjs/core'; import { AppModule }...app.useGlobalFilters(new GlobalExceptionFilter()); await app.listen(3000); } bootstrap();现在，所有在应用程序中抛出的异常都会被全局错误过滤器捕获...，在捕获到错误时使用日志服务记录错误信息。

2162 0

Nest.js 实战 (十二)：优雅地使用事件发布订阅模块 Event Emitter

超过此数量时，将抛出警告 captureRejections: true, // 是否捕获异步函数的拒绝（rejection）。...如果设置为 true，则会在事件处理函数中捕获 Promise.reject wrapEmitters: true, // 是否包装事件发射器。...如果设置为 true，那么所有的事件发射器都会被包装，以提供更多的功能 ignoreErrors: true, // 当事件处理过程中出现错误时，是否忽略这些错误。...如果设置为 true，则不会抛出错误，而是会被忽略 }), ],})export class AppModule {}通过这些配置选项，你可以根据自己的需求定制事件发布/订阅的行为，使其更符合你的应用程序的具体要求...借助其内置的错误处理机制和事件监听管理功能，我们能够构建出更加健壮和可靠的应用程序。

1221 0

angular4实战（4）ngrx

但自己本地没有把这段代码跑成功，未报错，但不起作用，就用做简单的方法来实现reducer的汇总。...StoreModule.forRoot(reducer) ], providers: [], bootstrap: [AppComponent] }) export class AppModule...segmentfault.com/a/1190000008754052 async 官方解释： The async pipe subscribes to an Observable or Promise...高中英语水平翻译一下：async这个管道，会返回订阅的Observe ,promise对象的最新的值，当观察者发现值有改变时，就会触发组件的检查策略，并且在组件销毁时也会自动的去取消订阅避免内存泄漏。...项目地址：https://github.com/jiwenjiang/angular4-material2

1.1K3 0

Angular 从入坑到挖坑 - HTTP 请求概览

const url = ''; return this.http.post(url, { data: '' }, this.httpOptions); } } 4.2、捕获错误信息...在处理错误信息的回调方法中，方法返回了一个 HttpErrorResponse 对象来描述错误信息因为这里的错误更多是服务在与后端进行通信产生的错误，因此对于错误信息的捕获和处理更应该放到服务中进行，...GetQuotesResponseModel>(url) .pipe( catchError(this.handleError) ); } /** * 错误信息捕获处理...; } } 当请求发生错误时，通过在 HttpClient 方法返回的 Observable 对象中使用 pipe 管道将错误传递给自定义的错误处理器，从而完成捕获错误信息的后续操作 ?...4.2.2、请求重试某些情况下存在因为特殊原因导致短时间的请求失败，这时可以在 pipe 管道中，当请求失败后，使用 retry 方法进行多次的请求重试，在进行了多次重试后还是无法进行数据通信后，则进行错误捕获

5.3K1 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

doctype html> NgTestdemo <!...; // 根模块 import { AppModule } from '....environment.production) { enableProdMode(); } // 引导程序启动 platformBrowserDynamic().bootstrapModule(AppModule...}) export class AppModule { }复制代码 ---- 常见模板指令用法解释 {{item | SliceStr:1:2:'...' }}: 可以响应组件内对应的item字段值变化...发现文章有错误的，或者有更好讲解的，请留言指出，我会及时修正，谢谢！其他的一丢丢废话：若是学会了ng2技术栈，其实你过程接触了Typescript，Rxjs，es6&7等

6.2K2 0

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

每个Angular应用程序必须有一个叫AppModule的主模块。代码应该根据应用程序业务案例分为不同的子模块（NgModule）。...扩展阅读：https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices 8. ...在构建时检测错误：由于预先编译，可以检测到许多编译时错误，能够为应用程序提供更好的稳定性。...通常Observable比Promise更受欢迎，因为它不但提供了Promise特性，还提供了其它特性。使用Observable可以处理0,1或多个事件。你可以在每种情况下使用相同的API。...Observable是可取消的，这相比于Promise也具有优势。

17.3K8 0

【Appetite】ionic3实录（五）基本服务实现

static formHeaders = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'....then(result => result.json()) .catch(resp => this.handleHttpError(resp)); } /** * 处理http错误...因为目前大多插件的异步使用Promise，Observable转Promise比较简单，而Promise转Observable比较麻烦，为了更方便集成，所以把官方推荐的Observable方式转成Promise...注意catch里面用了return，表示捕获了异常处理并返回，下次链式调用将进入then，这样每个调用网络请求后的逻辑操作可以全放在then里，省掉写catch的部分。...这些服务会随着业务功能的开发而补充，服务的每个方法可以不写返回类型（如fun: Promise里的 Promise），但为了肉眼快速分辨出是异步方法还是普通方法？

3.1K4 0

基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇

在未触发主应用路由规则时（由路由配置表的 $route.name 判断），将渲染微应用节点；从上面的分析可以看出，我们使用了在路由表配置的 name 字段进行判断，判断当前路由是否为主应用路由，最后决定渲染主应用组件或是微应用节点...(); }, }); /** * 添加全局的未捕获异常处理器 */ addGlobalUncaughtErrorHandler((event: Event | string) => { console.error...AppModule } from "....__POWERED_BY_QIANKUN__) { platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err)...DOCTYPE html> <meta name="viewport" content

6.7K4 0

Angular HttpClient 拦截器

HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule...logger: LoggerService) {} get(req: HttpRequest): HttpResponse | null { // 判断当前请求是否已被缓存，若未缓存则返回...HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule...{} 当应用启动后，我们点击页面上的 Get Users 按钮，此时控制台会输出以下内容： logger.service.ts:8 Save entry.url response into cache...logger.service.ts:8 GET http://jsonplaceholder.typicode.com/users succeeded in 1296ms 然后在过期前，我们再次点击

2.6K2 0

Angular4记账webApp练手项目之五（Angular4项目中创建service（服务）和使用http模块）

有关@Injectable和@Component，都是angular中的关键字或者关键注解。通过注解来表明js文件的类型，以方便angular框架进行调用。...constructor(private service: AccountService) { service.getBillTypes(); // 调用方法 } 查看下效果，提示错误...; Zone: angular ; Task: Promise.then ; Value: 原来是在app.module.ts 里面也要添加引用 import {AccountService} from...这里写图片描述因此我们修改方法，在model文件夹下添加自定义的Result类型， // 接口返回数据格式 export class Result { error: any; // 错误时返回的信息...url, data) .toPromise().then(r => r.json() as Result) .catch(this.handleError); } // 捕获异常并输出

1.3K1 0

深入理解 Nest.js 控制器：构建强大的RESTful API

@Get()findAllUsers() { const users = // 获取用户数据 return users;}Promises：您可以返回一个 Promise，Nest.js 会等待 Promise...异常处理Nest.js 控制器还提供了强大的异常处理机制，以处理在请求处理过程中可能出现的错误和异常。...使用 try-catch在控制器方法中，您可以使用 try-catch 语句来捕获和处理异常。例如，如果在处理请求时发生了错误，您可以抛出一个异常，然后在 catch 子句中处理它。...如果在处理请求时发生了其他错误，我们抛出了一个 InternalServerErrorException 异常，该异常表示服务器内部错误。...req, res, next) { console.log(`Request to ${req.url}`); next();}@Module({ // 模块配置...})export class AppModule

4512 0

angular之interceptors拦截器

DOCTYPE html> /* $http service在Angular中用于简化与后台的交互过程，...之前进行预处理（如加入token），或者是在Server返回数据到达客户端还未被处理之前进行预处理（如将非JSON格式数据进行转换）；当然还有可能对在请求和响应过程过发生的问题进行捕获处理...所以Angular为我们提供了$http拦截器，用来实现上述需求。...requestError拦截器会捕获那些被上一个请求拦截器中断的请求。

2.1K5 0

Angular2 之路由与导航基础知识路由模块组件路由路由守卫

一个url对应的一个页面，在angular2中是一个组件。定义一个规则。...import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/..., HeroListComponent, CrisisListComponent ], bootstrap: [ AppComponent ] }) export class AppModule...也可以返回返回一个Observable或Promise，并且路由器会等待这个可观察对象被解析为true或false。...如果我们让用户立即移到下一个界面，而保存却失败了（可能因为数据不符合有效性规则），我们就会丢失该错误的上下文环境。在等待服务器的答复时，我们没法阻塞它 —— 这在浏览器中是不可能的。

3.3K1 0

用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理

angular 5 全局错误处理参考文档: https://angular.io/api/core/ErrorHandler 首先按照文档在客户端项目建立app.error-handler.ts 文件...之所以发生这个错误, 是因为AppErrorHandler在angular引入Toastr模块之前就初始化了....所以当错误发生的时候, toastr的error方法被调用了(状态改变了), 但是angular并不知道这个变化, 所以toastr通知没有显示. 那如何解决呢?.../app.component'; Raven .config('https://fa66d9390ab04c7f8e8c82ad0613fb4e@sentry.io/301095') .install...AppComponent ], providers: [ { provide: ErrorHandler, useClass: AppErrorHandler } ] }) export class AppModule

1.5K5 0

精读《捕获所有异步 error》

成熟的产品都有较高的稳定性要求，仅前端就要做大量监控、错误上报，后端更是如此，一个未考虑的异常可能导致数据错误、服务雪崩、内存溢出等等问题，轻则每天焦头烂额的处理异常，重则引发线上故障。...，但再过 1s 这个未捕获异常就消失了，变成了捕获的异常。...还是之前的例子，Promise 无法捕获内部的异步错误： new Promise((res, rej) => { setTimeout(() => { throw Error('err')...而 unhandledrejection 可以监听到 Promise 中抛出的，未被 .catch 捕获的错误。...总结关于异步错误的处理，如果还有其它未考虑到的情况，欢迎留言补充。

7992 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭