Angular 7 - 延迟加载不与 Service Worker 一起使用

Question

我在 AWS EC2 Ubuntu 实例上部署了我的 node.js / Angular 应用程序。在浏览器中打开项目时，所有延迟加载的模块都不起作用。模块从未完成加载，尽管它们开始加载。

---

奇怪的是，当将应用程序部署到 Heroku 或使用 localhost 进行测试时，一切正常。 （在生产版本中）。

这是网络选项卡在部署到 AWS EC2 实例时的样子（不加载惰性模块）：

这是部署到 Heroku 时网络选项卡的样子（工作正常）：

这是在 localhost 上运行时网络选项卡的样子（工作正常）：

---

延迟加载仅在删除我的 service worker 时有效。

app.routes.ts

export const routes: Routes = [
  {
    path: 'auth',
    loadChildren: './auth/auth.module#AuthModule',
  },
  {
    path: 'seller',
    canActivate: [guards.AuthGuard, guards.SellerGuard],
    loadChildren: './features/seller/seller.module#SellerModule',
  },
  {
    path: 'shopping',
    loadChildren: './features/shopping/shopping.module#ShoppingModule',
  },
  {
    path: 'products',
    loadChildren: './features/products/products.module#ProductsModule',
  },
  {
    path: 'me',
    canActivate: [guards.AuthGuard],
    loadChildren: './features/me/me.module#MeModule',
  },
  {
    path: 'search',
    loadChildren: './features/search/search.module#SearchModule',
  },
  {
    path: 'business',
    loadChildren: './features/business/business.module#BusinessModule',
  },
  {
    path: 'users',
    loadChildren: './features/users/users.module#UsersModule',
  },
  {
    path: '**',
    redirectTo: ''
  },
];

node-server.js

// many other configurations
app.use('/api', api)
app.get('*', (req, res) => {
    res.status(200).sendFile(path.join(__dirname, './client/index.html'))
})
app.listen(port, () => {
    console.log(`• Server launched ????  on port`, port)
    console.log(`• Server running in ${prod ? '????  production' : '????  development'} mode`)
    console.log(`• • •`)
})

---

我不能真正发布详细的代码，因为这是一个非常大的项目，我不知道是什么导致了错误。所以让我知道我是否应该添加一些特定的文件。

---

Service Worker 实现

app.module.ts

@NgModule({
    // ...
    imports: [
        ServiceWorkerModule.register('ngsw-worker.js', {
            enabled: environment.production
        })
    ],
)}
// ...

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "",
      "urls": [
        "https://www.some-domain.com/api/*",
      ],
      "cacheConfig": {
        "maxSize": "15",
        "maxAge": "6h",
        "timeout": "10s",
        "strategy": "performance"
      }
    }
  ]
}

Answer 1

从您的资产中删除您的 updateMode 预取。