angularangular-clitsconfigwebpack.config.js

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

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);
Solution

  • 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:

    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