Angular2延迟加载模块错误'cannot find module'

11 回答

• 10

  重启 ng serve 为我工作

  回复于 2024-05-02T16:44:01+08:00
• 0

  我遇到过同样的问题 . 我通过做两件事来解决它：

  在根模块的路由配置中，使用 loadChildren 以及延迟加载的角度模块的相对路径 . 该字符串用＃分隔，其中split的右侧是延迟加载模块的类名 .

  我在 loadChildren 字符串中添加了./作为前缀 .

  { path:'user', loadChildren:'./app/user/user.module#UserModule'}
  

  我正在使用webpack 2，它需要一个Angular 2的加载器，它可以使用Angular Router加载基于字符串的模块 . 将其添加到项目中

  yarn add angular-router-loader -D
  

  然后将 angular-router-loader 添加到打字稿加载器

  loaders: [
    {
      test: /\.ts$/,
      loaders: [
      'awesome-typescript-loader',
      'angular-router-loader'
      ]
    }
  ]
  

  它为我工作 .

  回复于 2024-05-02T16:44:01+08:00
• 16

  我在使用Angular 4.4.5和webpack时遇到了类似的问题，并设法在不使用字符串的情况下修复它，但是模块类型引用（更容易编写且不易出错）：

  const routes: Routes = [
    { path: '', loadChildren: () => TestModule }
  ];
  

  我找不到Angular（loader）的最低版本支持这种语法 .

  ---

  可能与AOT一起使用的方法是用常规方法替换lambda语法：

  export function getTestModule() { return TestModule; }
  
  const routes: Routes = [
    { path: '', loadChildren: getTestModule }
  ];
  

  回复于 2024-05-02T16:44:01+08:00
• 0

  最后我发现我需要以这种方式在路由配置中导入延迟加载的模块：

  const routes: Routes = [
     { path: '', loadChildren: 'app/test.module' }
  ];
  

  在模块路径前没有任何 / 或 ./ .

  回复于 2024-05-02T16:44:01+08:00
• 2

  通过使用它对我有用 . ../app/我通过使用VS代码中的建议弹出窗口解决了这个问题 . 你也可以这样做 . 无需去任何地方 . （我想，每个项目的路径可能会有所不同 . ）

  回复于 2024-05-02T16:44:01+08:00
• 47

  确保在'@ angular / router'中包含import {Routes，RouterModule};在模块中懒散地加载

  回复于 2024-05-02T16:44:01+08:00
• 30

  在一个用例场景中，通过一个延迟加载的模块将一个不同的特性（例如test.module.ts）从它的根应用程序（即app.module.ts）中分离出来，我们可以创建一个测试模块，它的组件在一个子模块中-folder（例如src / app / test /） . test-routing.module可以这样配置：

  //test-routing.module.ts
  //routes to test.component.ts as an example
  
  import { Routes, RouterModule } from '@angular/router';
  import { TestComponent } from './test.component';
  
  const feature_test_routes: Routes = [
  
      { 
          path: '',
          component: TestComponent
      }
  
  ];
  
  export const TestRoutingModule = RouterModule.forChild(feature_test_routes);
  

  “父”模块（app-routing.module.ts）将具有如下所示的路由：

  //app-routing.module.ts
  //routes to http://localhost:4200/test
  
  import { Routes, RouterModule } from '@angular/router';
  import { AppComponent } from './app.component';
  const root_routes: Routes = [
  
      { 
          path: '',
          component: AppComponent, 
          children: [
              {
                  path: 'test',
                  loadChildren: './test/test.module#TestModule'
              }
          ]
      }
  
  ];
  
  export const AppRoutingModule = RouterModule.forChild(root_routes);
  

  这允许根据需要在必要时将test.module.ts中的根应用程序和入口组件作为子项进行延迟加载 .

  回复于 2024-05-02T16:44:01+08:00
• 0

  我改变了

  {
              path: 'test',
              loadChildren: 'app/tests/test.module#TestModule'
  
  }
  

  为了这

  {
          path: 'test', loadChildren: () => new Promise(resolve => {
              (require as any).ensure([], require => {
                  resolve(require('app/tests/test.module').TestModule);
              })
          })
      },
  

  并解决了我的问题 .

  回复于 2024-05-02T16:44:01+08:00
• 1

  你需要改变

  export default class TestModule { }
  

  至

  export class TestModule { }
  

  这应该可以解决你的问题

  回复于 2024-05-02T16:44:01+08:00
• 0

  我已经对我刚接手的项目进行了几个小时的故障排除 . 以上解决方案都没有工作，但后来我意识到所有延迟加载的模块都有.ts扩展名 .

  如果其他人遇到问题，请检查是否需要将 loadChildren: 'app/example.module.ts' 更改为 loadChildren: 'app/example.module' .

  回复于 2024-05-02T16:44:01+08:00
• 0

  我有类似的问题 . 我刚刚重新启动服务器，它工作正常 . :)

  回复于 2024-05-02T16:44:01+08:00