CODEWITHSUNDEEP
angularchunkingangular12
Fernando Rocha
Fernando Rocha

Reputation: 1

Problem with Chunk Files durring ng serve after update to Angular 12

Is anybody else facing this problem? After an update to Angular 12, all the files of my application are being chunked in development, at run ng serve.

Now I can't debug on the browser once all the files are compressed and the names of the files are numbers, not the real file name.

Does anyone know how to solve this problem?

enter image description here enter image description here

Upvotes: 0

Views: 1651

Answers (2)

diegortorres10
diegortorres10

Reputation: 33

Angular 12 needs additional configuration so that not all files are compressed in development build. Add, in the angular.json file, inside architect -> build -> configurations:

"configurations": {
  "development": {
    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true
  },
  "production": {
    ...
  }
}

And under serve -> configurations:

"serve": {
  ...
  "configurations": {
    "production": {
      "browserTarget": "myapp:build:production"
    },
    "development": {
      "browserTarget": "myapp:build:development"
    }
  }
}

Run the app with ng serve myapp --configuration development. Or change your default configuration for "ng serve" eg:

"serve": {
  ...
  "configurations": {
    ...
  },
  "defaultConfiguration": "development"
}

Upvotes: 2

JSON Derulo
JSON Derulo

Reputation: 17768

In Angular v12, production builds are enabled by default. For your development server, you need to disable the production settings. Make sure your angular.json is set up like the following:

{
  "projects": {
    "your-project-name": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              ...
            },
            ...
          }
        },
        ...
      }
    }
  }
}

Upvotes: 0

Related Questions