问题标签 [angular-lazyloading]

我有一个使用 AngularFireMessagingModule 推送通知的 Angular 应用程序。

使用我当前的配置，我在我的 AppBrowser 模块的导入数组中添加了这个：

因此，firebase 模块被添加到主包中。

由于使用 Angular 9 IVY，我们可以延迟加载组件，我想延迟加载实际使用 AngularFireMessagingModule 的通知组件。

我正在关注这篇文章https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8来实现这一点。

我已经从我的 AppBrowserModule 中删除了上述模块导入，并使用以下代码创建了一个新文件：

在我的应用程序组件中，我有条件地延迟加载该组件。

这种方法适用于我的其他延迟加载组件，但在这种情况下，它会抛出以下错误：

谁能指导如何解决这个问题？

我正在开发 Angular 9 上的一个应用程序，并为某些模块实现了延迟加载。配置如下：

package.json:`"dependencies": { "@agm/core": "^1.1.0", "@angular/animations": "~9.1.0", "@angular/common": "~9.1.0 ", "@angular/compiler": "~9.1.0", "@angular/core": "~9.1.0", "@angular/forms": "~9.1.0", "@angular/platform- browser": "~9.1.0", "@angular/platform-b​​rowser-dynamic": "~9.1.0", "@angular/router": "~9.1.0",

“devDependencies”：{“@angular-devkit/build-angular”：“~0.901.0”，“@angular/cli”：“~9.1.0”，“@angular/compiler-cli”：“~9.1。 0",`

角 CLI：9.1.5 节点：12.16.3

路由代码在这里：

子路由在这里：

这在本地环境中运行良好，但是当我尝试使用 --prod 构建项目并在生产环境中发布构建时。然后路由不起作用。对于本地：http://localhost:4200/resident（工作）生产：http: //abxxxx.com/resident（不是 wokring）

我正在使用延迟加载实现 NgRx 的 Angular 9 应用程序

当应用程序加载时，我的状态看起来像这样

当我导航到“/account-config”路线时，状态会发生变化，因为我已经延迟加载了模块并实现了一个 StoreModule.forFeature int 他导入。然后，我的状态是这样的

我想知道当我导航到其他路线时是否有办法删除“accountconfig”节点，并在我返回“/account-config”时再次放置。

这些是我的路线：

我正在尝试使用 Angular 9 和我的

应用程序路由.module.ts

客人守卫.ts

用于屏蔽已经登录的用户

auth-guard.ts

允许访问已登录的用户（与访客相反）

上面的代码按预期工作正常。但是当我在来宾路径上使用 canLoad 时，我得到了

登录用户路径，不执行canLoad函数（使用console.log测试）

什么时候应该使用 canLoad？

我已经成功地为我的模块Products和Customers实现了延迟加载，并且当我导航到相应的路由时我能够看到这些块。

现在我想让上面的模块预加载，这可以简单地通过添加来完成

但这不起作用，上述模块仍在延迟加载（当我导航到各个模块而不是初始加载时正在加载块）。

这是如何实现的

app.module.ts

延迟加载.module.ts

但是，如果我直接在 中添加配置app.module.ts，那么它似乎可以工作（我可以在初始加载时看到各个块），但是我的路由路径不起作用。

更新

首先，我尝试使用这样的自定义预加载策略

preloading-strategy.service.ts

延迟加载.module.ts

但是从不调用 preload 方法（没有打印控制台日志），因此出于测试目的，我添加了PreloadAllModules。正如我上面已经解释的那样，这也不起作用。

我已经创建了在我的应用程序中实现延迟加载的代码。

我可以在我的DIST文件夹中看到延迟加载模块的 js 文件，如下所示

但是这些文件在用于签入的 Visual Studio 的解决方案资源管理器中不可见。由于该应用程序没有在生产服务器中加载延迟加载的模块。

我的 Angular 项目中有一个登录组件，它运行良好。但是现在我将软件的结构从单个模块更改为延迟加载模块。

我PublicModule用LoginComponent,ForgotPasswordComponent和RegistrationComponent.

app.module.ts

应用程序路由.module.ts

app.component.html

app.component.ts

我在构建时没有收到任何错误，渲染时也没有。一切看起来都很好，但LoginComponent没有显示。

如果我记录authService.user.value它为空，那么<app-login></app-login>shold 是可见的，但它不是。

知道我应该在哪里寻找“错误”的原因吗？

我创建了一个产品文件夹，其中包含products-home.component(parent)和products-list.component(child)并命名为 outlet。

Error: Cannot match any routes. URL Segment: 'products'当导航到products-list使用延迟加载时，我得到了。

这在急切加载时有效

app.module.ts

产品.module.ts

这在延迟加载时不起作用

app.module.ts

产品.module.ts

堆栈闪电战

[编辑] 我创建了一个带有此错误的演示存储库：https ://github.com/SamanthaAdrichem/hybrid-lazy-load-angularjs-injector-error

我们已经按照说明进行操作，并且在普通混合上运行良好，但是添加延迟加载失败并出现上述奇怪错误，并且始终按照文档所说的方式实现 ui 路由器（如您在下面的代码中所见）。

加载应用程序时一切正常，但是当单击延迟加载的路线时，我们会收到错误消息

转换拒绝（$id：0 类型：6，消息：转换错误，详细信息：错误：在设置之前尝试获取 AngularJS 注入器。）

我已经尝试过这里列出的解决方案

https://github.com/ui-router/angular-hybrid/issues/93

https://github.com/ui-router/angular-hybrid/issues/150

https://github.com/ui-router/angular-hybrid/issues/395

https://github.com/ui-router/sample-app-angular-hybrid/issues/10

但这些都不能解决它。我们不使用 ng serve 因为它会因随机内存问题而崩溃（也可能是由于混合），我们需要代理到登录页面，但是登录页面和我们的项目将在同一个端口上运行，这不是不可能。所以这需要在后端进行一些重构。

它有时会根据我要去的页面加载一个新的块文件。但主要是我得到这个错误。

有趣的是，在我正在测试的页面中，我们没有使用任何混合代码。基本上我们不再升级任何代码，我们只是降级一些观察者以打开旧页面的模式。

这些是我们正在运行的版本

在详细的错误和一些代码下面，不知道还有什么可以分享或我可以安全地分享什么。

关于如何调试它的任何建议都会很可爱！

详细错误

我们的 main.ts

我们的 app.module.ts

admin-routing.module.ts

然后是管理模块

例如 search.module

如您所见，使用搜索路由模块尚未延迟加载，当引入该模块时，我们将在管理模块中包含搜索路由模块，并在路由模块中引用搜索模块

我们的 angularjs 模块

我所有的路线都转到复数版本builder-jobs/，但我想知道我是否可以改变一个去，builder-job/:id但其余的保留为builder-jobs

这是我当前的模块文件 - builder-jobs.module.ts：

我想更改以下具体路线：

我试过path: 'builder-job/:id'了，但这似乎不起作用 - 转到 404

这是我的app-routing.module.ts