Difference between Angular-cli.json , webpack.conf & tsconfig.json

Question

I am building an angular4/typescript desktop app & confused in-between

angular-cli.json
tsconfig.json
webpack.conf.js

1. Can someone please explain main conceptual differences in above 3 configurtation files & what are they for?

2. Do I have to define all 3 of them in my project, or only one would be sufficient.

   For example: path ALIAS can be defined inside all 3 of them webpack/tsconfig/angular-cli. But which one has benefit over others? or They all same , does not matter which you use.

3. So in general, they all can provide project configuration so which one is best performant & recommneded as best practice.

angular-cli.json

{
    "project": {
        "version": "1.0.0-beta",
        "name": "project"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": [
                "images",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.json",
            "prefix": "app",
            "mobile": false,
            "styles": [
                "styles.css"
            ],
            "scripts": [
                "../node_modules/core-js/client/shim.min.js",
                "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
                "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
                "../node_modules/web-animations-js/web-animations.min.js"
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "addons": [],
    "packages": [],
    "e2e": {
        "protractor": {
            "config": "./protractor.config.js"
        }
    },
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "prefixInterfaces": false,
        "inline": {
            "style": false,
            "template": false
        },
        "spec": {
            "class": false,
            "component": true,
            "directive": true,
            "module": false,
            "pipe": true,
            "service": true
        }
    }
}

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "rootDir": "../",
        "baseUrl": "",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es6",
            "dom"
        ],
        "mapRoot": "src",
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "dist/out-tsc",
        "sourceMap": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "types": [
          "jasmine",
          "core-js",
          "node"
        ]
    },
    "exclude": [
        "node_modules",
        "dist",
        "test.ts"
    ]
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var webpackMerge = require('webpack-merge');
var HtmlWebpackPlugin = require('html-webpack-plugin');

// Webpack Config
var webpackConfig = {
  entry: {
    'main': './src/main.browser.ts',
  },

  output: {
    publicPath: '',
    path: path.resolve(__dirname, './dist'),
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      path.resolve(__dirname, '../src'),
      {
        // your Angular Async Route paths relative to this root directory
      }
    ),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),

  ],

  module: {
    loaders: [
      // .ts files for TypeScript
      {
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader',
          'angular2-router-loader'
        ]
      },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'raw-loader' }
    ]
  }

};

    var defaultConfig = {
      devtool: 'source-map',

      output: {
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'
      },

      resolve: {
        extensions: [ '.ts', '.js' ],
        modules: [ path.resolve(__dirname, 'node_modules') ]
      },

      devServer: {
        historyApiFallback: true,
        watchOptions: { aggregateTimeout: 300, poll: 1000 },
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
          "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        }
      },

      node: {
        global: true,
        crypto: 'empty',
        __dirname: true,
        __filename: true,
        process: true,
        Buffer: false,
        clearImmediate: false,
        setImmediate: false
      }
    };


    module.exports = webpackMerge(defaultConfig, webpackConfig);

Answer 1

1) As Angular4 can be preferably use with typescript but you can also use dart and ES5 javascript well for developing an application. Now

angular-cli.json

tsconfig.json

webpack.conf.js

angular-cli.json

Angular CLI is a Command Line Interface (CLI) to automate your development workflow. It allows you to:

• Create a new Angular application
• run a development server with LiveReload support to preview your application during development
• add features to your existing Angular application
• build your application for deployment to production

So automating the angular application from cli requires angular-cli.json to loads its configuration.

TypeScript is a primary language for Angular application development. It is a superset of JavaScript with design-time support for type safety and tooling.

Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, tsconfig.json— file is required for TypeScript compiler configuration.

webpack.conf.js its also a bundler and it provide the same configuration functionality as angular cli, but in webpack you have to do it manually as in case of angular cli you can take advantage of Angular CLI command line help without knowing detail information

2) You are required angular-cli.json and tsconfig.json if u developing an angular app through CLI

if using own bundler like webpack or systemjs you can have tsconfig.json and bundler configuration file in this case webpack.config.js

3) For best practises it would prefer to use ANGULAR CLI you can check out the official documentation

Answer 2

Wasiq answer is great & I want to share some more aggregated information which may helped me to understand angularcli.json & webpack.config.json better.

A project need to have a bundler, regardless of the technology stack.

Webpack.conf.js - Bundler

Webpack is one of bundler quite popular due to features it brings to table. It scans import statement & maintains a dependency tree, that allows it to only bundle resources and js files your code actually uses. But it requires loaders and plugins configuration which sometimes may be little difficult to follow through.

angular-cli - Bundler but provides other useful features, ex: generating a pre scaffolded angular app or generating components/services

Angular team has created anguar-cli – a very powerful bundler tool, beauty is this that it uses Webpack under the hood, already pre-configured, so you enjoy the benefits without the hassle of configuration. So you dont miss features from webpack but angular-cli saves a lot of effort.

You still have access to project configuration files like karma.conf.js, protractor.conf.js, tslint.json, tsconfig.json and package.json.