问题标签 [angular-lazyloading]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
39 浏览

angular - 在一个具有不同组件的模块内实现角度延迟加载

我正在尝试在我的测试应用程序中实现延迟加载。我有一个带有示例名称的 home/main/app 模块 - 电影。我创建了一个名为 Auth 的新模块,其中包含两个组件 - 注册和登录。我希望两个组件都被延迟加载。这是我在 app-routing.module.ts 中的示例代码

还有我的 Auth 模块,实现了延迟加载:

问题是当我导航到 http://localhost:4200/register 时,一切正常,我看到了注册表。但是,当我转到 http://localhost:4200/login 时,我再次看到相同的注册表单,并且带有它的表单的登录组件没有正确显示。知道如何解决这个问题吗?

0 投票
1 回答
58 浏览

angular - 如何从另一个 Angular 项目加载模块?

我只是在玩 Angular 和 Spring Clound 微服务。

我有一个带有菜单的主 Angular 项目,我向网关发出请求,并收到当前在线所有可用微服务的列表。基于此列表,我的菜单是动态构建的。

例子:

菜单:微服务 1 | 微服务 2

单击“微服务 1”时,我想加载与微服务 1 一起交付的另一个 Angular 项目内部的模块内容。

这可能吗?

0 投票
1 回答
188 浏览

angular - Angular 跨域动态组件加载器

我正在研究 Angular 的微前端可能性。我正在研究让 UI 的不同部分独立地由他们自己的 HTTP 服务器进程提供服务但在主 UI 上动态组合的可行性;这只是一个带有占位符的 UI 模板,这些占位符将被这些动态加载的微前端替换。

目前我们正在为此使用 iframe,除了客户端浏览器所需的额外资源以及不那么动态和有限的方法之外,它的效果很好。

我的问题是,是否可以在 Angular 应用程序中实现一个共享且众所周知的组件接口的组件,从另一个 URL 动态加载;在我们的例子中子域?

例如,我们有以下域:

  1. 域名.com
  2. sub1.domain.com
  3. sub2.domain.com

我们从 sub1.domain.com 获得以下组件:

是否可以从 sub1.domain.com 在 domain.com [主 UI] 上动态加载它?

sub2.domain.com 提供的另一个组件(例如 ProductsFrontEndComponent)也是如此。

非常感谢您!

0 投票
1 回答
67 浏览

angular - 如果一个模块被多个模块引用,那么最终捆绑包中有多少个模块实例?

我想知道之间最好的策略是什么

  • 包含所有可重用代码的共享模块
  • 需要时引用的单个可重用代码

我认为反对将所有可重用代码放在共享模块中的情况是它会很大并且会减慢应用程序的加载速度,因为并非每个模块都需要共享模块中的所有代码。

GalleryModule和导入。ProfileModule_ CardModule它们也是延迟加载的。

假设用户访问图库页面。galleryModule将与其依赖一起加载,即CardModule。比方说,在那之后,用户决定去个人资料页面,这将导致ProfileModule被加载。

CardModule会被第二次加载,还是 Angular 会重用与GallelryModule一起加载的CardModule

编辑

好像有人在这里问了同样的问题。但是,似乎没有人明确回答这个问题。

感谢您的帮助。

0 投票
0 回答
41 浏览

angular - 具有相同起始路径的角度延迟加载页面

我有一个相当大的项目,为了减少包大小,我决定将它分成多个具有延迟加载的模块。这是我的应用程序路由

我希望仅当页面路径在其模块中时才加载landing.module,但会发生以下情况:如果页面路径在 logging.module 上,则 public.module 和landing.module 块也正在下载。我怎样才能解决这个问题 ?我在想是否有一种方法可以检查 URL 并仅在 URL 与模块中的路径之一匹配时才下载模块

注意:我无法更改 url 并添加前缀以避免这种情况,因为页面是通过搜索引擎索引的。

0 投票
1 回答
447 浏览

angular - 带有延迟加载模块的角材质

我已经找到了看起来相似但对我没有帮助的东西。使用最新的 Angular 材料设计延迟加载 Angular 模块会出错

我的问题是,我有延迟加载模块。应用程序路由.module.ts

家庭路由模块如下所示:

导航组件只是为 sidenav 生成的材料模式。 https://material.angular.io/guide/schematics#navigation-schematic

但结果我得到:

错误:src/app/home/navigation/navigation.component.html:1:1 - 错误 NG8001:'mat-sidenav-container' 不是已知元素:

  1. 如果 'mat-sidenav-container' 是一个 Angular 组件,那么验证它是这个模块的一部分。
  2. 如果“mat-sidenav-container”是一个 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

将 sidenav 代码移动到 app.component.html 一切正常。

我的家庭模块就像

没有胶水我做错了什么?

谢谢

0 投票
1 回答
211 浏览

angular - Angular 11 - 延迟加载路由问题

尝试使用 MEAN 堆栈创建 CRUD 操作。目前使用 Angular 11 cli,我创建了惰性模块。惰性模块具有添加/编辑/列表组件。为了列出数据,我使用了 Angular 材料。我面临的问题是由于前端出现以下错误而无法导航。

注意:这可能是重复的,但我已经看到了一些 SO 解决方案,但不幸的是我无法解决这个问题超过 3 小时。

可能有些人有很好的眼光来指出我在这里所做的问题

应用程序路由.module.ts

demo-crud-app-routing.module.ts

当我尝试单击 mat-table 数据导航以查看学生详细信息时,出现控制台错误

ERROR 错误:未捕获(在承诺中):错误:无法匹配任何路由。URL 段:'view/607e79ee6d81777c6ee80919'

查看学生详细信息-component.html

我的本地网址 - http://localhost:4200/students

提前致谢

0 投票
1 回答
106 浏览

angular - Angular 11:延迟加载模块中未识别组件和指令

我想拆分我的角度项目以在主模块中加载网站部分,在延迟加载模块中加载应用程序部分。虽然以前一切正常,但现在我收到很多关于未知组件和指令的错误:

  1. 来自同一应用程序的组件<app-downloads-sidebar></app-downloads-sidebar>

    错误:projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:42:13 - 错误 NG8001:'app-downloads-sidebar' 不是已知元素:

  2. 指令无法识别:错误:projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:58:53 - 错误

    NG8002:无法绑定到“dropup”,因为它不是“div”的已知属性。

    58 <div dropdown autoClose="true" [dropup]="true" placement="top" triggers="hover">

  3. 库元素(来自 NineGoldLibModule)

    错误:projects/nine-gold-tools/src/app/application/ramlConverter/raml-converter-page/raml-converter-page.component.html:41:21 - 错误 NG8001:'lib-file-input' 不是已知元素:

  4. 最后是子页面的路由器出口

    错误:projects/nine-gold-tools/src/app/layouts/app-layout/app-layout.component.html:93:9 - 错误 NG8001:'router-outlet' 不是已知元素:

在应用程序路由中,我从:

至:

{路径:'app',loadChildren:'./application/tools-app.module.ts'},

在 tools-app.module.ts 中,我声明了所有组件(从 app 模块中删除了声明)并且只做这些导入:

NineGoldLibModule 是在 app-module.ts 中导入的工作区库

最后是我的工具-app-routing.module.ts:

我在网上找不到此问题的任何有效解决方案。

0 投票
1 回答
352 浏览

angular - 在我的库中使用浏览器动画模块

由于我的日期选择器,我必须在我的角度库中使用浏览器动画模块,并且我正在使用延迟加载,所以当我想在我的模块中导入我的库时,我的项目中有几个模块我收到这个常见错误“延迟加载 BrowserModule 已经已加载”。有什么办法可以解决吗?多谢

0 投票
0 回答
239 浏览

angular - 从应用程序其他地方的延迟加载模块导入组件是否会规避 Angular 12 中该模块的延迟加载?

我们有一些带有自己导航栏的模块。这些导航栏是实际的组件,一旦激活HeaderComponent相应的路线,它们就会在应用程序的全局中激活。

要传递导航组件,我们使用data以下路由的属性app-routing.module.ts

虽然这很好用,但我想知道:

这是否规避了模块的延迟加载?模块是否仍然加载,因为导航组件已经导入到 gobalapp-routing.module.ts中?

如果是,我如何将导航组件与模块捆绑在一起并将其传递给应用程序的标题?

目前,导航在标题组件中呈现如下: