Question

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

关于这一点的怪异之处是，将应用程序部署到Heroku或使用localhost测试时，一切正常。（正在生产中）。

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

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

这是在localhost上运行时网络标签的外观（正常工作）：

延迟加载仅在删除服务工作者时起作用。

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(`• • •`)
})

我无法真正发布详细的代码，因为这是一个非常大的项目，并且我不知道是什么导致了错误。因此，请告诉我是否应添加一些特定文件。

服务工作者实施

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预取。

Angular 7-延迟加载不适用于Service Worker

1 个答案: