angular-cli-extended

An extended @angular/cli with superpowers for Angular >= 6

Features:

• 🚀 boost up your @angular/cli application with an customized webpack configuration
  • 🎉 no ng eject needed: just change your angular.json configuration to use our extended angular builder
  • ➕ partial webpack configuration: no need to write a full "jack of all trades" configuration, only enrich the default @angular/cli generated configuration with your flavors

Using your own (partial) webpack configuration

Preparation:

• Install this package npm install --save-dev christianscharr/angular-cli-extended
• Open your @angular/cli project configuration at: angular.json

Replace the default @angular/cli builder

• replace all appearances of @angular-devkit/build-angular:browser with the extended version angular-cli-extended:browser

Configure the extended Builder to use your own (partial) custom webpack configuration:

• in the shell: --additionalWebpackConfiguration webpack.config.js
• or add additionalWebpackConfiguration to your angular.json project configuration:

[...]
"architect": {
    "build": {
        "builder": "angular-cli-extended:browser",
            "options": {
                "additionalWebpackConfiguration": "webpack.config.js"
[...]

Example webpack.config.js

module.exports = {
    output: {
        jsonpFunction: "MyApp"
    }
};

Using your own (partial) webpack devServer configuration

⚠️ ATTENTION ⚠️ Don't nest the webpack devServer configuration inside devServer!

• Install this package npm install --save-dev christianscharr/angular-cli-extended
• Open your @angular/cli project configuration at: angular.json

Replace the default @angular/cli builder

• replace all appearances of @angular-devkit/build-angular:dev-server with the extended version angular-cli-extended:dev-server

Configure the extended Builder to use your own (partial) custom webpack configuration:

• in the shell: --additionalWebpackConfiguration webpack.dev.config.js
• or add additionalWebpackConfiguration to your angular.json project configuration:

[...]
"serve": {
    "builder": "angular-cli-extended:dev-server",
    "options": {
        "browserTarget": "myproject:build",
        "additionalWebpackConfiguration": "webpack.config.js"
    }
[...]

Example webpack.dev.config.js

module.exports = {
    headers: {
        "Access-Control-Allow-Origin": "http://localhost.dev:8080",
        "Access-Control-Allow-Credentials": "true"
    }
};