首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

错误:'AppRoutingModule‘模块无法导入自身

错误:'AppRoutingModule'模块无法导入自身是一个常见的错误,通常发生在Angular应用程序中。这个错误的原因是在AppRoutingModule模块中导入了自身,导致循环依赖。

解决这个错误的方法是检查AppRoutingModule模块的导入语句,确保没有导入自身。通常,AppRoutingModule模块是用来定义应用程序的路由配置的,它应该导入其他模块或组件,而不是自身。

以下是一个示例的解决方案:

  1. 检查AppRoutingModule模块的导入语句,确保没有导入自身。
代码语言:txt
复制
// 错误示例
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module'; // 错误的导入语句

const routes: Routes = [
  // 路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes), AppRoutingModule], // 错误的导入语句
  exports: [RouterModule]
})
export class AppRoutingModule { }
代码语言:txt
复制
// 正确示例
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. 如果发现AppRoutingModule模块确实需要导入自身,那么需要重新设计应用程序的路由结构,避免循环依赖。
  2. 如果以上方法都无法解决问题,可以尝试重新创建一个新的AppRoutingModule模块,并确保正确地导入其他模块和组件。

总结:错误:'AppRoutingModule'模块无法导入自身是由于循环依赖导致的,解决方法是检查导入语句,确保没有导入自身,重新设计路由结构或创建新的模块。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android Studio 3.1无法导入模块的解决办法

3月份Android Studio 3.1版正式发布,谁知新版本搞出了新问题,譬如导入已有的模块,Android Studio就死活无法正常导入。...摸索了很久,才算总结出模块导入的几点解决办法: 一、依次选择菜单“File”——“New”——“Import Module”,按提示导入具体的demo。...此时Android Studio 3.1毫无反应,既不重编也不在左侧列表添加新模块。...此时要打开项目的settings.gradle,把下面这行: include ':app' 改成下面这样,也就是手动添加新模块的名称: include ':app', ':新模块的名称...二、Android Studio 3.1推荐的Gradle版本是4.4,并且SDK编译工具的最低版本号必须为27.0.3,所以还要打开模块的build.gradle,手动修改buildToolsVersion

2.7K10
  • NodeJS 导入包的时候出现的 @types 错误导致程序无法运行

    在一次开发 NodeJS 项目的时候,我们希望包的导入是用 import 导入的方式。 但是在具体导入的时候发现是使用 @types 导入的。...如果上面的图显示的导入方式,结果结果是导致程序错误无法运行。 问题和原因 尽管我们在包的配置文件中添加了需要导入的包的版本。...这个时候,我们需要找到这个包导入的依赖了。 在导入这个包所在项目的文件夹中,打开 package.json 这个文件。 在这个文件中也没有找到这个包的依赖,也不是使用types 定义的。... @types 的,所以我们按照 @types 导入了 bluebird。...但是实际使用的时候,我们的程序使用的是另外的一种导入方式。 因此,针对这个问题,我们最简单的办法就是将 /@types/request-promise 从你的包的依赖中删除。

    1.7K20

    pycharm中导入模块错误时提示Try to run this command from the system terminal

    pycharm中导入模块错误时,提示:Try to run this command from the system terminal....发现通过这种方法导入的keras模块和自己之前安装的不是python中安装的,是重新安装的。比如我的电脑之前anaconda中安装的是2.1.1版本 ,而这种方法是安装的2.3.1版本的。...根据导入模块错误提示信息可以看出,我的pycharm路径为D:\u-net segmentation\venv\Scripts。...一定要在错误中提示的路径下安装导入所需模块。如法炮制,把红色的matplotlib替换成你要安装的库就可以了。...总结 到此这篇关于pycharm中导入模块错误时提示错误的文章就介绍到这了,更多相关pycharm导入模块错误内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn

    3.1K20

    Angular性能优化实践——巧用第三方组件和懒加载技术

    划分业务模块 要懒加载Angular模块,需要在AppRoutingModule routes中使用loadchildren替代component进行配置。 ?...三个a标签分别代表主页以及两个需要懒加载的模块。 ? 3. 导入与路由配置 CLI会将每个特性模块自动添加到应用级的路由映射表中,最后通过添加默认路由来最终完成。 ? 4. 特性模块内部 ?...设置path为空,因为AppRoutingModule 中的路径已经设置了,LazyWebExcelRoutingModule中的此路由已经位于lazywebexcel这个上下文中。...CLI会把RouterModule.forRoot(routes)添加到AppRoutingModule的imports 数组中。...这会让Angular知道AppRoutingModule是一个路由模块,而 forRoot() 表示这是根路由模块。它会配置传入的所有路由、让你能访问路由器指令并注册 Router。

    4.1K20

    Angular 从入坑到挖坑 - 模块简介

    模块可以通过导入这个 js 文件来直接使用暴露的 getRoles 和 getUserInfo 方法 function getRoles() { // ... } function getUserInfo...'@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule }...imports imports 数组表明当前模块正常工作时需要引入哪些的模块,例如这里使用到的 BrowserModule、AppRoutingModule 或者是我们使用双向数据绑定时使用到的 FormsModule...,需要和 BrowserModule、AppRoutingModule 一样,在根模块中 imports 引入 默认情况下,NgModule 都是急性加载的,也就是说它会在应用加载时尽快加载,所有模块都是如此...AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

    1.8K20

    Angular 从入坑到挖坑 - 路由守卫连连看

    Angular CLI 创建一个危机中心模块(crisis 模块) -- 查看创建模块的相关参数 ng g module --help -- 创建危机中心模块(自动在 app.moudule.ts...这里的问题与配置通配路由需要放到最后的原因相似,因为脚手架在帮我们将创建的模块导入到 app.module.ts 中时,是添加到整个数组的最后,同时因为我们已经将 crisis 模块的路由配置移动到专门的...crisis-routing.module.ts 中了,框架在进行路由匹配时会预先匹配上 app-routing.module.ts 中设置的通配路由,从而导致无法找到实际应该对应的组件,因此这里我们需要将...AppRoutingModule 放到声明的最后 ?...AppRoutingModule 代码如下 import { HeroCanDeactivateGuard } from '.

    3.8K30

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

    如果当前URL无法匹配上我们配置过的任何一个路由中的路径,路由器就会匹配上这一个。当需要显示404页面或者重定向到其它路由时,该特性非常有用。...component: DashboardComponent, } ]; export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot...但是我们必须在app.module.ts中进行imports:[appRoutingModule]。 组件路由 我们需要将一些特征区域分割开来,做成自己单独的模块。必如hero模块。... CanActivate 使用CanActivate来处理导航路由,需要在路由配置中,添加导入AuthGuard类,修改管理路由并通过CanActivate属性来引用AuthGuard。...如果我们让用户立即移到下一个界面,而保存却失败了(可能因为数据不符合有效性规则),我们就会丢失该错误的上下文环境。 在等待服务器的答复时,我们没法阻塞它 —— 这在浏览器中是不可能的。

    3.3K10

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

    在使用之前,首先需要在应用的根模块中,引入 HttpClientModule 模块,并添加到 imports 数组中 import { BrowserModule } from '@angular/platform-browser...'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from '....'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule...4.2.2、请求重试 某些情况下存在因为特殊原因导致短时间的请求失败,这时可以在 pipe 管道中,当请求失败后,使用 retry 方法进行多次的请求重试,在进行了多次重试后还是无法进行数据通信后,则进行错误捕获...、转化,以及拦截请求的响应信息的双重效果,因此当我们注册了多个拦截器时,在发送请求时会按照我们添加的顺序进行执行,而在接受到请求响应时,则是按照反过来的顺序进行执行 获取到导出的拦截器信息,就可以在根模块中去导入需要注册的拦截器

    5.3K10

    Angular 路由配置(预加载配置,懒加载配置)

    forRoot()//在主模块中定义主要的路由信息 forChild()``//应用在特性模块(子模块)中 (2)懒加载:loadChildren 此处并没有将对应的模块加入到AppModule中,而是通过...这就是模块懒加载功能的具体应用,当用户访问 /xxx/** 路径的时候,才会加载对应的模块,这减少了应用启动时加载资源的大小。...loadChildren的属性值由三部分组成: 需要导入Module的相对路径 #分隔符 导出模块类的名称 (3)预加载 在使用懒加载的情况下,路由第一次加载某个模块时,有时反应有延迟。...RouterModule   ],   providers: [     CanDeactivateGuard,     SelectivePreloadingStrategy   ] }) export class AppRoutingModule...MainService { } 复制代码 main文件夹下的组件如要调用MainService,需要在组件的ts文件引入MainService (3)在main.module.ts中引入各组件(包括自身

    3.2K30

    Angular 从入坑到挖坑 - 表单控件概览

    } from '@angular/core'; // 引入 FormsModule import { FormsModule } from '@angular/forms'; import { AppRoutingModule...DynamicFormsComponent, TemplateDrivenFormsComponent ], imports: [ BrowserModule, AppRoutingModule...4.3、响应式表单 4.3.1、快速上手 响应式表单依赖于 ReactiveFormsModule 模块,因此在使用前需要在根模块中引入 import { BrowserModule } from '@...4.4、表单的自定义数据验证 4.4.1、自定义验证器 在很多的情况下,原生的验证规则无法满足我们的需要,此时需要创建自定义的验证器来实现 对于响应式表单,我们可以定义一个方法,对控件的数据进行校验,之后将方法作为参数添加到控件定义处即可...nameAgeCrossValidator] }); // 添加针对控件组的验证器 ngOnInit(): void { } } 在针对多个字段进行交叉验证时,在模板页面中,则需要通过获取整个表单的错误对象信息来获取到交叉验证的错误信息

    18.9K20

    Angular开发实践(六):服务端渲染

    /app.routes'; @NgModule({ imports: [ AppRoutingModule, BrowserModule.withServerTransition...服务端的模块懒加载 在前面的介绍中,我们在 app.server.module.ts 中导入了 ModuleMapLoaderModule,在 app.module.ts。...ModuleMapLoaderModule 模块可以使得懒加载的模块也可以在服务端进行渲染,而你要做也只是在 app.server.module.ts 中导入。...这三个模块都与服务端到客户端的状态传输有关: ServerTransferStateModule:在服务端导入,用于实现将状态从服务端传输到客户端 BrowserTransferStateModule:...在客户端导入,用于实现将状态从服务端传输到客户端 TransferHttpCacheModule:用于实现服务端到客户端的请求传输缓存,防止客户端重复请求服务端已完成的请求 使用这几个模块,可以解决 http

    4.8K100
    领券