{"id":2396,"date":"2018-03-29T13:41:17","date_gmt":"2018-03-29T08:11:17","guid":{"rendered":"http:\/\/stepbystepschools.net\/?p=2396"},"modified":"2018-05-14T10:41:28","modified_gmt":"2018-05-14T05:11:28","slug":"angular-training-in-mumbai-webpack-issues","status":"publish","type":"post","link":"https:\/\/www.stepbystepschools.net\/?p=2396","title":{"rendered":"Angular training in Mumbai : &#8211; Webpack issues."},"content":{"rendered":"<p>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.<\/p>\n<ul>\n<li>Webpack has two things one Webpack and other Webpack-cli you need to install both of them and install them as dev tools.<\/li>\n<li>Loaders has changed to rules.<\/li>\n<li>Webpack and webpack-cli should be part of dev tools in package.json<\/li>\n<\/ul>\n<p><span style=\"font-family: 'Courier New'; font-size: x-large;\">npm i webpack webpack-cli &#8211;save-dev<\/span><\/p>\n<p>Typings.json with es5 enabled.<\/p>\n<pre>{\r\n  \"compilerOptions\": {\r\n    \"target\": \"es5\",\r\n    \"module\": \"commonjs\",\r\n    \"moduleResolution\": \"node\",\r\n    \"sourceMap\": true,\r\n    \"emitDecoratorMetadata\": true, \/\/for angular to be able to use metadata we specify in our components.\r\n    \"experimentalDecorators\": true, \/\/angular needs decorators like @Component, @Injectable, etc.\r\n    \"removeComments\": false,\r\n    \"noImplicitAny\": false,\r\n    \"noStrictGenericChecks\": true,\r\n    \"lib\": [ \"es2016\", \"dom\" ]\r\n  }\r\n}\r\n<\/pre>\n<p>Loaders has changes to rules.<\/p>\n<pre>var path = require('path');\r\nconst UglifyJSPlugin = require('uglifyjs-webpack-plugin');\r\nconst DEBUG = false;\r\n\r\nmodule.exports = {\r\n    entry: {\r\n        CustomerModule: \".\/Modules\/CustomerModule.ts\",\r\n        SupplierModule: \".\/Modules\/SupplierModule.ts\",\r\n        Startup: [\".\/node_modules\/core-js\/client\/shim.min.js\",\r\n            \".\/node_modules\/zone.js\/dist\/zone.js\",\r\n            \".\/node_modules\/reflect-metadata\/Reflect.js\",\r\n            \".\/Startup.ts\"\r\n        ]\r\n    },\r\n    output: {\r\n        path: path.join(__dirname, \"dist\"),\r\n        publicPath: \"\/dist\/\",\r\n        filename: \"[name].bundle.js\"\r\n    },\r\n    resolve: {\r\n        extensions: ['.ts', '.js']\r\n    },\r\n    module: {\r\n            rules: [\r\n                {\r\n                    test: \/\\.ts$\/,\r\n                    use: [\"awesome-typescript-loader\", \"angular-router-loader\"]\r\n                }\r\n            ]\r\n    }\r\n    , plugins: DEBUG ? []:\r\n        [new UglifyJSPlugin({ uglifyOptions: { output: {} } })]\r\n};\r\n<\/pre>\n<p>Package.json file , check the devtools section.<\/p>\n<pre>{\r\n  \"name\": \"angular-quickstart\",\r\n  \"version\": \"1.0.0\",\r\n  \"license\": \"ISC\",\r\n  \"dependencies\": {\r\n    \"@angular\/common\": \"4.0.0\",\r\n    \"@angular\/compiler\": \"4.0.0\",\r\n    \"@angular\/core\": \"4.0.0\",\r\n    \"@angular\/forms\": \"4.0.0\",\r\n    \"@angular\/http\": \"4.0.0\",\r\n    \"@angular\/platform-browser\": \"4.0.0\",\r\n    \"@angular\/platform-browser-dynamic\": \"4.0.0\",\r\n    \"@angular\/router\": \"4.0.0\",\r\n    \"@angular\/upgrade\": \"4.0.0\",\r\n    \"@types\/jquery\": \"^3.3.1\",\r\n    \"@types\/node\": \"^9.6.0\",\r\n    \"angular-in-memory-web-api\": \"0.3.2\",\r\n    \"angular-router-loader\": \"^0.8.2\",\r\n    \"awesome-typescript-loader\": \"^4.0.1\",\r\n    \"bootstrap\": \"^3.3.6\",\r\n    \"core-js\": \"^2.4.1\",\r\n    \"http-server\": \"^0.10.0\",\r\n    \"jquery\": \"^3.3.1\",\r\n    \"npm\": \"^5.8.0\",\r\n    \"reflect-metadata\": \"^0.1.3\",\r\n    \"rxjs\": \"^5.4.1\",\r\n    \"systemjs\": \"0.19.27\",\r\n    \"ts-loader\": \"^4.1.0\",\r\n    \"zone.js\": \"^0.8.4\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@types\/core-js\": \"^0.9.42\",\r\n    \"typescript\": \"2.7.2\",\r\n    \"uglifyjs-webpack-plugin\": \"^1.2.4\",\r\n    \"webpack\": \"^4.0.0-beta.3\",\r\n    \"webpack-cli\": \"^2.0.13\",\r\n    \"html-webpack-plugin\": \"2.14.0\"\r\n  }\r\n}\r\n<\/pre>\n<p>For complete Angular syllabus you can visit <a href=\"http:\/\/stepbystepschools.net\/?page_id=622\" target=\"_blank\" rel=\"noopener\">http:\/\/stepbystepschools.net\/?page_id=622<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/www.stepbystepschools.net\/?p=2396\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[91,49],"tags":[55,230,234],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular training in Mumbai : - Webpack issues. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.stepbystepschools.net\/?p=2396\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular training in Mumbai : - Webpack issues. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai\" \/>\n<meta property=\"og:description\" content=\"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 &hellip; Continue reading &rarr;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.stepbystepschools.net\/?p=2396\" \/>\n<meta property=\"og:site_name\" content=\"Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-29T08:11:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-14T05:11:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"StepByStepSchoolsSupport\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.stepbystepschools.net\/#website\",\"url\":\"https:\/\/www.stepbystepschools.net\/\",\"name\":\"Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai\",\"description\":\"MVC 5\/Core, AngularJS 1.x, 2.0, 4.0, Design Pattern, Architecture, SSIS, SSAS, SSRS, Data Science, Big data, Hadoop classroom training\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.stepbystepschools.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=2396#webpage\",\"url\":\"https:\/\/www.stepbystepschools.net\/?p=2396\",\"name\":\"Angular training in Mumbai : - Webpack issues. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai\",\"isPartOf\":{\"@id\":\"https:\/\/www.stepbystepschools.net\/#website\"},\"datePublished\":\"2018-03-29T08:11:17+00:00\",\"dateModified\":\"2018-05-14T05:11:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/7131e4ee1c5673879e6029d14ec2f655\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=2396#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.stepbystepschools.net\/?p=2396\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=2396#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.stepbystepschools.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular training in Mumbai : &#8211; Webpack issues.\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/7131e4ee1c5673879e6029d14ec2f655\",\"name\":\"StepByStepSchoolsSupport\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cecaf2a0ee369391127b0159c266979d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cecaf2a0ee369391127b0159c266979d?s=96&d=mm&r=g\",\"caption\":\"StepByStepSchoolsSupport\"},\"url\":\"https:\/\/www.stepbystepschools.net\/?author=40\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular training in Mumbai : - Webpack issues. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.stepbystepschools.net\/?p=2396","og_locale":"en_US","og_type":"article","og_title":"Angular training in Mumbai : - Webpack issues. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","og_description":"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 &hellip; Continue reading &rarr;","og_url":"https:\/\/www.stepbystepschools.net\/?p=2396","og_site_name":"Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","article_published_time":"2018-03-29T08:11:17+00:00","article_modified_time":"2018-05-14T05:11:28+00:00","twitter_card":"summary_large_image","twitter_misc":{"Written by":"StepByStepSchoolsSupport","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.stepbystepschools.net\/#website","url":"https:\/\/www.stepbystepschools.net\/","name":"Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","description":"MVC 5\/Core, AngularJS 1.x, 2.0, 4.0, Design Pattern, Architecture, SSIS, SSAS, SSRS, Data Science, Big data, Hadoop classroom training","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.stepbystepschools.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.stepbystepschools.net\/?p=2396#webpage","url":"https:\/\/www.stepbystepschools.net\/?p=2396","name":"Angular training in Mumbai : - Webpack issues. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","isPartOf":{"@id":"https:\/\/www.stepbystepschools.net\/#website"},"datePublished":"2018-03-29T08:11:17+00:00","dateModified":"2018-05-14T05:11:28+00:00","author":{"@id":"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/7131e4ee1c5673879e6029d14ec2f655"},"breadcrumb":{"@id":"https:\/\/www.stepbystepschools.net\/?p=2396#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.stepbystepschools.net\/?p=2396"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.stepbystepschools.net\/?p=2396#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.stepbystepschools.net\/"},{"@type":"ListItem","position":2,"name":"Angular training in Mumbai : &#8211; Webpack issues."}]},{"@type":"Person","@id":"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/7131e4ee1c5673879e6029d14ec2f655","name":"StepByStepSchoolsSupport","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cecaf2a0ee369391127b0159c266979d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cecaf2a0ee369391127b0159c266979d?s=96&d=mm&r=g","caption":"StepByStepSchoolsSupport"},"url":"https:\/\/www.stepbystepschools.net\/?author=40"}]}},"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/posts\/2396"}],"collection":[{"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2396"}],"version-history":[{"count":8,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/posts\/2396\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/posts\/2396\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}