Question

我在尝试导航到＆＃39; http://localhost:4200/dashboard＆＃39;时遇到此错误延迟加载路线在angualr，angualr-cli 6.0.0

错误错误：未捕获（在承诺中）：错误：找不到模块＆＃34;应用程序/仪表板/ dashboard.module＆＃34 ;.错误：找不到模块＆＃34;应用程序/仪表板/ dashboard.module＆＃34 ;. at $ _lazy_route_resource lazy namespace object：5

const routes: Routes = [
    {
        path: 'login',
        loadChildren: 'app/login/login.module#LoginModule',

    },
    {
        path: '',
        component: MasterComponent,
        children: [
            {
                path: 'dashboard',
                loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
            }
        ],
    },
    {
        path: '**',
        redirectTo: 'login
    }
];


@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule {
}

Answer 1

在以前的版本中，使用'app / path / to / module＃Module'的loadChildren路径支持，但它不再工作，而不是使用相对路径'./path/to/module#Module'

角/ AIO /内容/示例/延迟加载-ngmodules   示例也已在3天前使用Angular 6发布进行了更改

https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0

Angular社区一直在回答我提出的问题，请在下面找到回复。

https://github.com/angular/angular-cli/issues/10673#issuecomment-391786453

根据角度社区的回复，他们将更新文档。

使用需要从

更改

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

到

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

另一个提示：

模块导入订单很重要   https://angular.io/guide/router#module-import-order-matters

Answer 2

我遇到了同样的问题，但是在角度6中，似乎必须从根模块（imports）中的app.module.ts声明中删除每个加载了“延迟加载”的模块。至少对我有用。

Answer 3

对我来说修改

loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule',

收件人

loadChildren: () => AdminLayoutModule,

工作了，别忘了导入模块文件。

希望有帮助！

Answer 4

对我来说，当我用loadchildren代替component

时，它起作用了

Answer 5

有效地，有三个可行的解决方法：

使用相对路径loadChildren: './dashboard...
绝对路径，但从/ src开始：loadChildren: 'src/app/dashboard...
在tsconfig.json上，设置BaseUrl: "./src"

您可以关注此issue in Angular's repo

的进度

Answer 6

使用角度7

这对我有用

loadChildren = 'src/app/layout/waay/lazy.module.ts#LazyModule';

和

angular.json

...
"lazyModules": [
            "src/app/layout/waay/lazy.module.ts",
]

也许这可以帮助某人调试延迟加载路径->

（这可能会在以后的角度版本中更改）

镀铬

打开开发工具 F12
按 ctrl + O （字母O）
（打开搜索提示）
在键盘上，键入“ lazyroute”
（应列出 $_lazy_route_resource lazy namespace object）
按 Enter

现在它应该向您显示angular / webpack用于映射的内容查找惰性路线

$ _ lazy_route_resource惰性名称空间对象（文件开头）

var map = {
    "src/app/layout/waay/lazy.module.ts": [
        "./src/app/layout/waay/lazy.module.ts"
    ],
    "src/app/pages/even/more-lazy.module.ts": [
        "./src/app/pages/even/more-lazy.module.ts",
        "default~src-app-pages-even-more-lazy-module-ts~src-app-pages-some-page-module-ts~sr~2cb20cb3",
        "default~src-app-pages-even-more-lazy-module-ts~src-app-pages-counter-page-module~7852bff4",
        "common",
        "src-app-pages-even-more-lazy-module-ts"
    ],
    "src/app/pages/too/lazy-to-be-true.module.ts": [
        "./src/app/pages/too/lazy-to-be-true.module.ts",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-some-page-modu~c179459d",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-home-home-page-module-ts~src-app-~50ff7d88",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-home-home-page-module-ts",
        "common",
        "src-app-pages-too-lazy-to-be-true-module-ts"
    ],
    ...
};

该映射为您提供给定模块路径的module path和modules to be loaded之间的关系。

通过查看此地图，可能会帮助您找出无法解析某些路径的原因。

您还可以在下一行中放置一个断点，以通过调试器逐步了解它，并清楚地了解它在查找中可能失败的地方。

$ _ lazy_route_resource惰性名称空间对象（在文件的更下方）

function webpackAsyncContext(req) {
    var ids = map[req];           // <-- put a breakpoint there, lookup in the map happens here
    if(!ids) {
        return Promise.resolve().then(function() {
            var e = new Error("Cannot find module '" + req + "'");
            e.code = 'MODULE_NOT_FOUND';
            throw e;
        });
    }
    ...
}

希望这对某人有帮助，它为我成功了

Answer 7

开始使用Angular Cli 9时，我遇到相同的问题。要解决此问题，需要以另一种方式重写loadChildren

{path: 'admin', canLoad: [AuthGuard], loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)},

Answer 8

对我来说，它的工作方式就像：-

{path: 'Customer', loadChildren: () => import('../Customer/CustomerModule').then(mod => mod.CustoModule)},

这是用于路由的单独文件，我没有在app.routing中进行路由，所以如果您也像我一样做过，那么请删除其中的“ AppRoutingModule” 导入，在模块文件中。然后只有它工作正常。

Answer 9

很幸运，此功能已在带有箭头功能的延迟加载的最新版本中更改

延迟加载在Angular 6中不起作用

9 个答案: