'Could not resolve module... relative to...' 编译应用程序时出错
'Could not resolve module... relative to...' Error when compiling the app
当我编译 ionic 4 应用程序时出现此错误:ERROR in Could not resolve module ./services/services.module relative to app/app-routing.module.ts
并且模拟没有启动。但是,如果我更改代码中的某些内容并再次编译,代码将成功编译。我查了一下,它可能与路径有关(absolute/relative)。但在这些问题中,解决方案是使用相对路径 https://github.com/angular/angular-cli/issues/8641 or in this question 。
由于我已经在使用相对路径,所以我不知道该怎么做。我在这个应用程序中的文件夹结构是 => src/app/pages 或服务。编辑:当我删除包含所有连接的整个服务文件夹时,问题仍然存在。
router.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'one',
children: [
{
path: '',
loadChildren: '../one/one.module#OnePageModule'
}
]
},
{
path: 'two',
children: [
{
path: '',
loadChildren: '../two/two.module#TwoPageModule'
}
]
},
{
path: 'three',
children: [
{
path: '',
loadChildren: '../three/three.module#ThreePageModule'
}
]
},
{
path: 'four',
children: [
{
path: '',
loadChildren: '../four/four.module#FourPageModule'
}
]
},
{
path: 'five',
children: [
{
path: '',
loadChildren: '../five/five.module#FivePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/one',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/one',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
应用-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'one', loadChildren: './one/one.module#OnePageModule' },
{ path: 'filter', loadChildren: './filter/filter.module#FilterPageModule' },
{ path: 'four', loadChildren: './four/four.module#FourPageModule' },
{ path: 'key', loadChildren: './key/key.module#KeyPageModule' },
{ path: 'test', loadChildren: './test/test.module#TestPageModule' },
{ path: 'notifications', loadChildren: './notifications/notifications.module#NotificationsPageModule' },
{ path: 'three', loadChildren: './three/three.module#ThreePageModule' },
{ path: 'five', loadChildren: './five/five.module#FivePageModule' },
{ path: 'two', loadChildren: './two/two.module#TwoPageModule' },
{ path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
{ path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
{ path: 'friprofile', loadChildren: './friprofile/friprofile.module#FriprofilePageModule' },
{ path: 'four/:id', loadChildren: './four-details/four-details.module#FourDetailsPageModule' },
{ path: 'two-details', loadChildren: './two-details/two-details.module#TwoDetailsPageModule' },
{ path: 'choose', loadChildren: './choose/choose.module#ChoosePageModule' },
{ path: 'camfilter', loadChildren: './camfilter/camfilter.module#CamfilterPageModule' }
//Changed from four-details -> four/:id
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
根据您提供的信息,我可以看出错误消息所指的模块 (ServiceModule) 看起来没有错误:
{ path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
这意味着它是两件事之一:
- 该文件不存在 - 查看您的目录并确认
/services/services.module.ts
存在
- 你在某个时候重命名了文件但没有重命名里面的代码 - 检查
/services/services.module.ts
文件里面是否有 export class ServicesPageModule {}
(更新)什么是服务?
根据您的评论,您似乎不知道项目中的服务页面是什么。
Angular 服务是一种 class,您可以将其注入到组件中,以便您可以 re-use 并在应用程序的各个部分之间共享 logic/data 并强制完全分离的关注。
这不是我们在这里讨论的内容。
根据你的路由文件,在某些时候,你已经生成了一个名为服务的页面。或者你自己把那条线放在那里?
如果您没有服务页面,那么这一行不应该在那里,所以只需将其删除。
如果你有一个服务页面,那么它需要匹配路径和模块名称,就像我上面解释的那样。
当我编译 ionic 4 应用程序时出现此错误:ERROR in Could not resolve module ./services/services.module relative to app/app-routing.module.ts
并且模拟没有启动。但是,如果我更改代码中的某些内容并再次编译,代码将成功编译。我查了一下,它可能与路径有关(absolute/relative)。但在这些问题中,解决方案是使用相对路径 https://github.com/angular/angular-cli/issues/8641 or in this question
router.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'one',
children: [
{
path: '',
loadChildren: '../one/one.module#OnePageModule'
}
]
},
{
path: 'two',
children: [
{
path: '',
loadChildren: '../two/two.module#TwoPageModule'
}
]
},
{
path: 'three',
children: [
{
path: '',
loadChildren: '../three/three.module#ThreePageModule'
}
]
},
{
path: 'four',
children: [
{
path: '',
loadChildren: '../four/four.module#FourPageModule'
}
]
},
{
path: 'five',
children: [
{
path: '',
loadChildren: '../five/five.module#FivePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/one',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/one',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
应用-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'one', loadChildren: './one/one.module#OnePageModule' },
{ path: 'filter', loadChildren: './filter/filter.module#FilterPageModule' },
{ path: 'four', loadChildren: './four/four.module#FourPageModule' },
{ path: 'key', loadChildren: './key/key.module#KeyPageModule' },
{ path: 'test', loadChildren: './test/test.module#TestPageModule' },
{ path: 'notifications', loadChildren: './notifications/notifications.module#NotificationsPageModule' },
{ path: 'three', loadChildren: './three/three.module#ThreePageModule' },
{ path: 'five', loadChildren: './five/five.module#FivePageModule' },
{ path: 'two', loadChildren: './two/two.module#TwoPageModule' },
{ path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
{ path: 'settings', loadChildren: './settings/settings.module#SettingsPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
{ path: 'friprofile', loadChildren: './friprofile/friprofile.module#FriprofilePageModule' },
{ path: 'four/:id', loadChildren: './four-details/four-details.module#FourDetailsPageModule' },
{ path: 'two-details', loadChildren: './two-details/two-details.module#TwoDetailsPageModule' },
{ path: 'choose', loadChildren: './choose/choose.module#ChoosePageModule' },
{ path: 'camfilter', loadChildren: './camfilter/camfilter.module#CamfilterPageModule' }
//Changed from four-details -> four/:id
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
根据您提供的信息,我可以看出错误消息所指的模块 (ServiceModule) 看起来没有错误:
{ path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
这意味着它是两件事之一:
- 该文件不存在 - 查看您的目录并确认
/services/services.module.ts
存在 - 你在某个时候重命名了文件但没有重命名里面的代码 - 检查
/services/services.module.ts
文件里面是否有export class ServicesPageModule {}
(更新)什么是服务?
根据您的评论,您似乎不知道项目中的服务页面是什么。
Angular 服务是一种 class,您可以将其注入到组件中,以便您可以 re-use 并在应用程序的各个部分之间共享 logic/data 并强制完全分离的关注。
这不是我们在这里讨论的内容。
根据你的路由文件,在某些时候,你已经生成了一个名为服务的页面。或者你自己把那条线放在那里?
如果您没有服务页面,那么这一行不应该在那里,所以只需将其删除。
如果你有一个服务页面,那么它需要匹配路径和模块名称,就像我上面解释的那样。