“无法解析模块...相对......”编译应用时出错

时间:2019-07-13 21:06:36

标签: angular typescript ionic-framework ionic4

当我编译ionic 4应用程序时,出现以下错误:ERROR in Could not resolve module ./services/services.module relative to app/app-routing.module.ts,并且模拟无法开始。但是,如果我更改了代码,然后再次编译,则代码将成功编译。我查寻到它可能与路径有关(绝对/相对)。但是在这些问题中,解决方案是使用相对路径https://github.com/angular/angular-cli/issues/8641或在此问题Angular 4 - Could not resolve submodule for routing中。 由于我已经在使用相对路径,所以我不知道该怎么做。我在此应用程序中的文件夹结构是=> 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 {}

app-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 {}

1 个答案:

答案 0 :(得分:1)

根据您提供的信息,我可以看到错误消息所引用的模块(ServiceModule)看起来不正确:

{ path: 'services', loadChildren: './services/services.module#ServicesPageModule' },

这意味着它是两件事之一:

  1. 该文件不存在-在您的目录中查找并确认/services/services.module.ts存在
  2. 您已在某个时候重命名了文件,但未在其中重命名了代码-检查export class ServicesPageModule {}文件中是否有/services/services.module.ts

(更新)什么是服务?

根据您的评论,您似乎不知道项目中的服务页面。

Angular Service是一个类,您可以将其注入组件中,以便您可以在应用程序的各个部分之间重用和共享逻辑/数据,并实现关注点的清晰分离。

这不是我们在这里所说的。

根据路由文件,有时会生成一个称为服务的页面。还是您自己将那条线放在那里?

如果您没有服务页面,则此行不应位于该页面,因此只需将其删除。

如果您确实有一个服务页面,则它需要匹配路径和模块名称,就像我上面已经解释过的那样。