Angular training in Mumbai : – Webpack issues.

In recent Mumbai angular training webpack did not work and was surprised with more changes in webpack 4. So this is a simple blog which describes what mistakes I committed.

• Webpack has two things one Webpack and other Webpack-cli you need to install both of them and install them as dev tools.
• Loaders has changed to rules.
• Webpack and webpack-cli should be part of dev tools in package.json

npm i webpack webpack-cli –save-dev

Typings.json with es5 enabled.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true, //for angular to be able to use metadata we specify in our components.
    "experimentalDecorators": true, //angular needs decorators like @Component, @Injectable, etc.
    "removeComments": false,
    "noImplicitAny": false,
    "noStrictGenericChecks": true,
    "lib": [ "es2016", "dom" ]
  }
}

Loaders has changes to rules.

var path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const DEBUG = false;

module.exports = {
    entry: {
        CustomerModule: "./Modules/CustomerModule.ts",
        SupplierModule: "./Modules/SupplierModule.ts",
        Startup: ["./node_modules/core-js/client/shim.min.js",
            "./node_modules/zone.js/dist/zone.js",
            "./node_modules/reflect-metadata/Reflect.js",
            "./Startup.ts"
        ]
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: ["awesome-typescript-loader", "angular-router-loader"]
                }
            ]
    }
    , plugins: DEBUG ? []:
        [new UglifyJSPlugin({ uglifyOptions: { output: {} } })]
};

Package.json file , check the devtools section.

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "@angular/upgrade": "4.0.0",
    "@types/jquery": "^3.3.1",
    "@types/node": "^9.6.0",
    "angular-in-memory-web-api": "0.3.2",
    "angular-router-loader": "^0.8.2",
    "awesome-typescript-loader": "^4.0.1",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "http-server": "^0.10.0",
    "jquery": "^3.3.1",
    "npm": "^5.8.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.4.1",
    "systemjs": "0.19.27",
    "ts-loader": "^4.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.42",
    "typescript": "2.7.2",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "^4.0.0-beta.3",
    "webpack-cli": "^2.0.13",
    "html-webpack-plugin": "2.14.0"
  }
}

For complete Angular syllabus you can visit http://stepbystepschools.net/?page_id=622

Comments

comments