以角度预加载特定组件答案

【问题标题】：Preload specific component in angular以角度预加载特定组件
【发布时间】：2021-05-12 13:55:56
【问题描述】：

我对 Angular 很陌生，可能缺少一些明显的解决方案。当应用程序脱机时，由于明显的脱机错误（ChunkLoadError：加载块 22 失败），我无法显示组件 AlertComponent。如果该组件在离线之前已经显示，那么一切都会按预期工作 - 为该组件加载脚本，即使在离线之后也会显示警报。那么问题是如何预加载这个组件，以便在离线后可以访问？还是其他更好的解决方案？

据我了解，预加载策略 PreloadAllModules 不适用于这种情况，因为它会预加载为路由定义的组件。

我使用离子 5.5.2，角度 10

【问题讨论】：

请分享导致错误的代码
我认为我说得不太对，但你的意思是你的警报组件仅在（无论出于何种原因）在此离线事件之前加载时才加载，然后可以显示在正确的时间？好吧，很可能您将它设置在代码中一些结构良好的组件树中......因此，简单（说然后完成）部分将其从任何东西中“关闭”，并使用某种通知或主题行为更改来让它随时可用
是的，AlertComponent 只能在离线事件前加载完成后才能离线加载。我不确定您的意思 - 我是否应该在联机时尝试使用此 AlertComponent 以便从服务器加载此组件的脚本？

标签： angular ionic-framework

【解决方案1】：

为您的网站或 Web 应用程序添加离线功能的最佳方法是将其变成“渐进式 Web 应用程序”。具体来说，您需要添加一个服务工作者来预取和缓存所需的（静态）资源。

Angular 已经支持服务工作者。您可以使用以下命令将 Service Worker 添加到您的应用中：

$ ng add @angular/pwa --project *project-name*

详情请参阅Angular documentation。

【讨论】：

我知道这个解决方案，但这似乎就像拿大锤敲碎坚果一样。
这个大锤是用来破解这个坚果的:)。

【解决方案2】：

我会选择@rveerd 分享的大锤 :)。下面说的是一种也应该有效的方法

在模块中声明组件。

@NgModule({
  imports: [CommonModule, RouterModule, RouterModule.forChild([])],
  declarations: [LoadedComponent]
})

将模块加载为延迟加载模块。

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        loadChildren: () =>
          import('./loaded-component/loaded-component.module').then(
            m => m.LoadedComponentModule
          )
      }
    ]
  }
];

@NgModule({
  imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

现在组件已加载。

注意：我还没有测试过这种方法，但是我相信由于组件是在模块中声明的，所以每当您将模块加载到另一个模块时，这应该是可用的

Demo

【讨论】：