blocks|key|99818|text|在以前版本中，loadChildren路径支持'app/+path+/to/module#Module‘，但它不再工作，而是使用相对路径'./+path+/to/module#Module’|type|unstyled|depth|inlineStyleRanges|entityRanges|data|99819|3天前，随着Angular+6的发布，|99820|+angular/aio/content/examples/lazy-loading-ngmodules示例也发生了变化|blockquote|99821|99822|https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0|offset|length|99823|Angular社区已经对我提出的问题做出了回应，请查看下面的回复。|style|BOLD|99824|https://github.com/angular/angular-cli/issues/10673#issuecomment-391786453|99825|根据angular社区的响应，他们会更新文档。|99826|99827|用法需要从|99828|const+routes:+Routes+=+[
++{
++++path:+'customers',
++++loadChildren:+'app/customers/customers.module#CustomersModule'
++},
++{
++++path:+'orders',
++++loadChildren:+'app/orders/orders.module#OrdersModule'
++},
++{
++++path:+'',
++++redirectTo:+'',
++++pathMatch:+'full'
++}
];|code-block|syntax|javascript|99829|至|99830|const+routes:+Routes+=+[
++{
++++path:+'customers',
++++loadChildren:+'./customers/customers.module#CustomersModule'
++},
++{
++++path:+'orders',
++++loadChildren:+'./orders/orders.module#OrdersModule'
++},
++{
++++path:+'',
++++redirectTo:+'',
++++pathMatch:+'full'
++}
];|99831|99832|另一个技巧：|99833|99834|模块导入顺序问题https://angular.io/guide/router#module-import-order-matters|99835|entityMap|0|LINK|mutability|MUTABLE|url|1|2|https://angular.io/guide/router#module-import-order-matters^0|0|0|0|0|0|2A|0|0|0|X|0|0|22|1|0|0|0|0|0|0|0|0|0|0|8|1N|2|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1N|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1P|8|@]|9|@$J|1Q|K|1R|1|1S]]|A|$]]|$1|L|3|M|5|6|7|1T|8|@$J|1U|K|1V|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1W|8|@]|9|@$J|1X|K|1Y|1|1Z]]|A|$]]|$1|R|3|S|5|6|7|20|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|22|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|23|8|@]|9|@]|A|$Z|10]]|$1|11|3|12|5|6|7|24|8|@]|9|@]|A|$]]|$1|13|3|14|5|Y|7|25|8|@]|9|@]|A|$Z|10]]|$1|15|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|16|3|17|5|F|7|27|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|29|8|@]|9|@$J|2A|K|2B|1|2C]]|A|$]]|$1|1B|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|I]]|1I|$5|1E|1F|1G|A|$1H|Q]]|1J|$5|1E|1F|1G|A|$1H|1K]]]]

In previous versions loadChildren path support with 'app/path/to/module#Module' but it's not working anymore, instead of that use relative path './path/to/module#Module' 

<blockquote>
 angular/aio/content/examples/lazy-loading-ngmodules
 example also has been changed 3 days ago with Angular 6 release
 
 <a href="https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0" rel="noreferrer" title="Angular repo example">https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0</a>
 
 Angular community has been responding to the issue which I raised, Please find the responses below. 
 
 <a href="https://github.com/angular/angular-cli/issues/10673#issuecomment-391786453" rel="noreferrer">https://github.com/angular/angular-cli/issues/10673#issuecomment-391786453</a>
 
 According to responses of angular community they will update document. 
</blockquote>

usage need to change from

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

to

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

<blockquote>
 One other tip:
 
 Module import order matters
 <a href="https://angular.io/guide/router#module-import-order-matters" rel="noreferrer">https://angular.io/guide/router#module-import-order-matters</a>
</blockquote>

blocks|key|2630158|text|实际上，有三种可行的解决方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2630159|loadChildren:+'./dashboard...|CODE|2630160|Absolute+|unordered-list-item|2630161|
|2630162|使用相对路径，但从/src：|2630163|开始，设置BaseUrl:+"./src"|2630164|2630165|2630166|您可以关注此issue+in+Angular's+repo的进度|2630167|(*)已编辑，幸好在最新版本中使用箭头函数延迟加载进行了更改|2630168|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular-cli/issues/10673^0|4|A|0|0|T|0|0|0|0|5|G|0|0|0|6|N|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1C|8|@]|D|@]|E|$]]|$1|N|3|O|5|K|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1E|8|@$9|1F|A|1G|B|H]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|V|3|W|5|6|7|1N|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

Efectively, there are three posible workarounds:
<ul>
<li>Make use of relative path <code>loadChildren: './dashboard...</code></li>
<li>Absolute path but starting from /src: <code>loadChildren: 'src/app/dashboard...</code></li>
<li>On <code>tsconfig.json</code>, set <code>BaseUrl: &quot;./src&quot;</code></li>
</ul>
You can follow the progress of this <a href="https://github.com/angular/angular-cli/issues/10673" rel="nofollow noreferrer">issue in Angular's repo</a>
(*) Edited, thankfully this changed on latest versions with arrow functions lazy loading

blocks|key|99885|text|我也遇到了同样的问题，但是在angular+6中，似乎每个用“延迟加载”加载的模块都必须从根模块(app.module.ts)的imports声明中删除。至少对我来说这是可行的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|99886|entityMap^0|1D|D|1S|7|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I've got the same problem, but in angular 6 it seems that every module loaded with "lazy loaded" has to be removed from the <code>imports</code> declaration in the root module (<code>app.module.ts</code>). At least for me that works.

blocks|key|97322|text|对于我来说，修改这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|97323|loadChildren:+'./layouts/admin-layout/admin-layout.module#AdminLayoutModule',|code-block|syntax|javascript|97324|至|97325|loadChildren:+()+=>+AdminLayoutModule,|97326|工作了，别忘了导入模块文件。|97327|希望它能帮上忙！|97328|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

For me modifying this 

<pre><code>loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule',
</code></pre>

To

<pre><code>loadChildren: () =&gt; AdminLayoutModule,
</code></pre>

Worked and don't forget to import the module file.

Hope it help!

blocks|key|100066|text|当我开始使用Angular+CLI9时，我也遇到了同样的问题。为了解决这个问题，下一步需要重写loadChildren|type|unstyled|depth|inlineStyleRanges|entityRanges|data|100067|{path:+'admin',+canLoad:+[AuthGuard],+loadChildren:+()+=>+import('./admin/admin.module').then(m+=>+m.AdminModule)},|code-block|syntax|javascript|100068|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have the same issue when started use Angular Cli 9. For resolve, need to rewrite loadChildren next way 

<pre><code>{path: 'admin', canLoad: [AuthGuard], loadChildren: () =&gt; import('./admin/admin.module').then(m =&gt; m.AdminModule)},
</code></pre>

blocks|key|2841588|text|对我来说，它是这样工作的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2841589|{path:+'Customer',+loadChildren:+()+=>+import('../Customer/CustomerModule').then(mod+=>+mod.CustoModule)},|code-block|syntax|javascript|2841590|这是一个单独的路由文件，我没有在app.routing中进行路由，所以如果你也像我一样做了，那么请在模块文件中删除导入中的"AppRoutingModule"。然后它才能正常工作。|offset|length|style|BOLD|2841591|entityMap^0|0|0|1P|I|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For me, it worked like :- 

<pre><code>{path: 'Customer', loadChildren: () =&gt; import('../Customer/CustomerModule').then(mod =&gt; mod.CustoModule)},
</code></pre>

This is separate file for routing, I didnt made my routing in app.routing, so if you too have done like me, then please remove "AppRoutingModule" in imports, in module file. Then only it works fine.

blocks|key|2841593|text|对我来说，当我用component替换loadchildren时，它起作用了|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2841594|entityMap^0|8|9|J|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

For me it worked when I replaced <code>loadchildren</code> with <code>component</code>

blocks|key|2841596|text|值得庆幸的是，在最新版本中，通过延迟加载箭头函数，这种情况发生了变化|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2841597|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

thankfully this changed on latest versions with arrow functions lazy loading

I'm getting this error when try to navigate to '<a href="http://localhost:4200/dashboard" rel="noreferrer">http://localhost:4200/dashboard</a>' lazy loading route in angualr, angualr-cli 6.0.0

<blockquote>
 ERROR Error: Uncaught (in promise): Error: Cannot find module
 "app/dashboard/dashboard.module". Error: Cannot find module
 "app/dashboard/dashboard.module".
 at $_lazy_route_resource lazy namespace object:5
</blockquote>

<pre><code>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 {
}
</code></pre>

Lazy loading not working in Angular 6

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当我尝试用angualr，angualr-cli 6.0.0导航到'‘延迟加载路由时，我得到了这个错误错误:未捕获(在promise中)：错误:找不到模块"app/dashboard/dashboard.module“。错误:找不到模块"app/dashboard/dashboard.module“。在$_lazy_r...

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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