angularprogressive-web-appsservice-worker-config

How to use negative glob pattern?


Our build generates e2015 and es5 bundles - e.g. in the dist dir we will have files like these:

/common-es2015.7765e11579e6bbced8e8.js
/common-es5.7765e11579e6bbced8e8.js
/custom.js

We want to configure ngsw-config.json to prefretch all js files except with es5 in the name.

The glob patterns we have tried so far do not work - but they work when we use this online-tester

Example: pattern: /!(*es5)*.js

Test strings:

/common-es2015.7765e11579e6bbced8e8.js
/common-es5.7765e11579e6bbced8e8.js
/custom.js
/favicon.ico 

correctly selects common-es2015* and custom.js

But when we use the same pattern in ngsw-config.json it does not work - e.g.

{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/*.css", "/!(*es5)*.js"]
      }
    },

According to the angular docs negative globs should be supported.

What's wrong with this pattern?


Solution

  • I found a good solution here

    the idea is to first include all js files and then exclude es5 files:

    {
      "assetGroups": [
        {
          "name": "app",
          "installMode": "prefetch",
          "resources": {
            "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js", "!/*-es5*.js"]
          }
        }
    }
    

    then we can have another lazy asset-group for the es5 files:

    {
      "name": "assets",
      "installMode": "lazy",
      "resources": {
        "files": ["..", "/*-es5*.js"]
      }
    }