title: Difference between Angular-cli.json , webpack.conf & tsconfig.json
body: <p>I am building an angular4/typescript desktop app &amp; confused in-between </p>
  
  <p><strong><code>angular-cli.json</code><br>
  <code>tsconfig.json</code><br>
  <code>webpack.conf.js</code></strong></p>
  
  <ol>
  <li>Can someone please explain main conceptual differences in above 3 configurtation files &amp; what are they for?  </li>
  <li><p>Do I have to define all 3 of them in my project, or only one
  would be sufficient. </p>
  
  <p>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. </p></li>
  <li><p>So in general, they all can provide project configuration so which
  one is best performant &amp; recommneded as best practice.</p></li>
  </ol>
  
  <blockquote>
    <p>angular-cli.json</p>
  </blockquote>
  
  <pre><code>{
      "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
          }
      }
  }
  </code></pre>
  
  <blockquote>
    <p>tsconfig.json</p>
  </blockquote>
  
  <pre><code>{
      "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"
      ]
  }
  </code></pre>
  
  <blockquote>
    <p>webpack.config.js</p>
  </blockquote>
  
  <pre><code>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);
  </code></pre>