Angular-builders: Expectations on supporting NG11 with HMR?

[renatoaraujoc]

Hello folks,

Title says it all, any idea when a version supporting Angular 11 with HMR will be available? Right now I'm using this builder to include Tailwind CSS into the build, for this reason I can't switch to the normal angular builder itself (which works with HMR out of the box).

Thank you!

[briananderson1222]

@renatoaraujoc No idea when the official release will be out but you can use npm i @angular-builders/custom-webpack@next to get the latest Angular 11 supported version (currently in beta). I was able to get this working on my angular application. For me the process wasn't as easy as just typing that command. After running that update I had to:

• rm package-lock.json
• rm -rf node_modules
• npm i

Node was yelling at me for missing the webpack module after running the install on the @next version. I assume maybe that has to do with why it's still in beta but could be wrong.

[renatoaraujoc]

Hey @briananderson1222,

Thanks for your response, I done everything you said but when I run the ng serve, I get this:

Any idea how to overcome it? How is your angular.json on this matter?

Thanks!

[briananderson1222]

@renatoaraujoc Wanna post the "customWebpackConfig" portion of your angular.json?

For example, mine looks something like this in the architect:build section of my project:

"customWebpackConfig": {
    "path": "./webpack.partial.ts"
},

There was nothing I needed to change going from one version to the next

[renatoaraujoc]

Hey @briananderson1222,

This is my dependency: "@angular-builders/custom-webpack": "^11.0.0-beta.1"

This is my angular.json:

   "serve":{
      "builder":"@angular-builders/custom-webpack:dev-server",
      "options":{
         "browserTarget":"rcambiental-ng-frontend:build",
         "customWebpackConfig":{
            "path":"./webpack.config.js"
         }
      },
      "configurations":{
         "production":{
            "browserTarget":"rcambiental-ng-frontend:build:production"
         },
         "production_v1":{
            "browserTarget":"rcambiental-ng-frontend:build:production_v1"
         },
         "dev_v1":{
            "browserTarget":"rcambiental-ng-frontend:build:dev_v1"
         }
      }
   }

Error is the same :(

Any clue? I will try re-installing it all again.

[renatoaraujoc]

Hey @briananderson1222, I made it work!

I had to remove:

"customWebpackConfig":{
    "path":"./webpack.config.js"
}

as it uses the customWebpackConfig from the "build" section!

I can close this now.

[just-jeb]

I wish all the issues would resolve like this one 😁
@briananderson1222 Thanks for jumping in.