{"id":1647,"date":"2017-07-10T14:34:13","date_gmt":"2017-07-10T09:04:13","guid":{"rendered":"http:\/\/stepbystepschools.net\/?p=1647"},"modified":"2017-10-06T16:39:56","modified_gmt":"2017-10-06T11:09:56","slug":"webpack-multiple-entry-multiple-output-issue-angular-training-in-mumbai-batch-93","status":"publish","type":"post","link":"https:\/\/www.stepbystepschools.net\/?p=1647","title":{"rendered":"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93."},"content":{"rendered":"

In batch 93 of Angular training in Mumbai andheri we had created an angular application which had multiple entry points ( lazy loaded ) and we were trying to achieve multiple output bundled JS for those multiple entry and we had errors.<\/p>\n

Recently webpack has added the prefix \u201cloader\u201d and the whole issue was due to the same. This was a breaking change in webpack , you can read about it same here\u00a0https:\/\/github.com\/webpack\/webpack\/releases\/tag\/v2.1.0-beta.26<\/a><\/p>\n

So below are detailed steps you need to follow to ensure webpack works properly with Angular lazy loaded modules. Basically you need to remember five steps as shown below.<\/p>\n

Step 1: – Get \u201ces6-promise-loader\u201d<\/h3>\n

We did a mistake by getting old es6-promise . So first do a npm and get es6-promise-loader framework. As webpack says it needs now a prefix loader https:\/\/github.com\/webpack\/webpack\/releases\/tag\/v2.1.0-beta.26<\/a> so rather than using just “es6-promise” we need to use “es6-promise-loader”.<\/p>\n

Step 2: – Doing installation using npm.<\/h3>\n

Next we will do installation using following command on Node.js command prompt<\/p>\n

npm install -save @types\/node<\/pre>\n
Step 3: – Parent routing changes.<\/h3>\n
The parent route which is loaded in \u201cforRoots\u201d needs to be changed as follows.<\/p>\n
export const MainRoutes = [\r\n    { path: 'Customer', loadChildren: () => require('es6-promise-\r\nloader!..\/Modules\/CustomerModule')('CustomerModule')},\r\n    { path: 'Supplier', loadChildren: () => require('es6-promise-\r\nloader!..\/Modules\/SupplierModule')('SupplierModule') },\r\n    { path: '', component: HomeComponent },\r\n    { path: 'Shell.html', component: HomeComponent },\r\n    { path: 'Help', component: HelpComponent, outlet: \"helpoutlet\" }\r\n\r\n\r\n];\r\n<\/pre>\n
Watch how LoadChildren is pointing to anonymous function of \u201crequire\u201d.<\/p>\n
Step 4: – Your webpack.config.js will look something as shown below.<\/h3>\n
var path = require('path');\r\n\r\nmodule.exports = {\r\n    entry: {\r\n        CustomerModule: \".\/Modules\/CustomerModule.js\",\r\n        SupplierModule: \".\/Modules\/SupplierModule.js\",\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.js\"\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};\r\n<\/pre>\n
Also you can see I have included reflect.js in the bundling. The catch here is to put these JS before startup.<\/p>\n
Step 5: – Run Webpack.<\/h3>\n
Now go to the command prompt and run webpack from the folder where you webpack.config.js.<\/p>\n
\"1\"<\/a><\/p>\n
Step 6: – In your Shell page remove all JS references<\/p>\n
Go to your shell page remove all references to all JS file and just add reference of the main startup bundle and there you are live on production.<\/p>\n
If you really think the training was worth do not forget to put a feedback about us in google maps https:\/\/goo.gl\/maps\/EgQrEW7XnFG2<\/a><\/p>\n
Do not miss our 95th batch of Angular training in Mumbai coming next week. For syllabus details you can visit http:\/\/stepbystepschools.net\/?page_id=622<\/a><\/p>\n
I would like to personally thank everyone to come from so far to make this batch happen. Especially friends from Gujrat and Pune. Wish you the best in your career.<\/p>\n
\"2\"<\/a><\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
In batch 93 of Angular training in Mumbai andheri we had created an angular application which had multiple entry points ( lazy loaded ) and we were trying to achieve multiple output bundled JS for those multiple entry and we … Continue reading →<\/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":[49,1],"tags":[50,52],"yoast_head":"\nWebpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93. - 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=1647\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai\" \/>\n<meta property=\"og:description\" content=\"In batch 93 of Angular training in Mumbai andheri we had created an angular application which had multiple entry points ( lazy loaded ) and we were trying to achieve multiple output bundled JS for those multiple entry and we … Continue reading →\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.stepbystepschools.net\/?p=1647\" \/>\n<meta property=\"og:site_name\" content=\"Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-10T09:04:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-06T11:09:56+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/stepbystepschools.net\/wp-content\/uploads\/2017\/07\/1.jpg\" \/>\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=\"2 minutes\" \/>\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\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=1647#primaryimage\",\"url\":\"http:\/\/stepbystepschools.net\/wp-content\/uploads\/2017\/07\/1.jpg\",\"contentUrl\":\"http:\/\/stepbystepschools.net\/wp-content\/uploads\/2017\/07\/1.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=1647#webpage\",\"url\":\"https:\/\/www.stepbystepschools.net\/?p=1647\",\"name\":\"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai\",\"isPartOf\":{\"@id\":\"https:\/\/www.stepbystepschools.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=1647#primaryimage\"},\"datePublished\":\"2017-07-10T09:04:13+00:00\",\"dateModified\":\"2017-10-06T11:09:56+00:00\",\"author\":{\"@id\":\"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/7131e4ee1c5673879e6029d14ec2f655\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=1647#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.stepbystepschools.net\/?p=1647\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.stepbystepschools.net\/?p=1647#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.stepbystepschools.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93.\"}]},{\"@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":"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93. - 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=1647","og_locale":"en_US","og_type":"article","og_title":"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","og_description":"In batch 93 of Angular training in Mumbai andheri we had created an angular application which had multiple entry points ( lazy loaded ) and we were trying to achieve multiple output bundled JS for those multiple entry and we … Continue reading →","og_url":"https:\/\/www.stepbystepschools.net\/?p=1647","og_site_name":"Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","article_published_time":"2017-07-10T09:04:13+00:00","article_modified_time":"2017-10-06T11:09:56+00:00","og_image":[{"url":"http:\/\/stepbystepschools.net\/wp-content\/uploads\/2017\/07\/1.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"StepByStepSchoolsSupport","Est. reading time":"2 minutes"},"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":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.stepbystepschools.net\/?p=1647#primaryimage","url":"http:\/\/stepbystepschools.net\/wp-content\/uploads\/2017\/07\/1.jpg","contentUrl":"http:\/\/stepbystepschools.net\/wp-content\/uploads\/2017\/07\/1.jpg"},{"@type":"WebPage","@id":"https:\/\/www.stepbystepschools.net\/?p=1647#webpage","url":"https:\/\/www.stepbystepschools.net\/?p=1647","name":"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93. - Learn MVC, Angular, Architecture, MSBI, Data Science in Mumbai","isPartOf":{"@id":"https:\/\/www.stepbystepschools.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.stepbystepschools.net\/?p=1647#primaryimage"},"datePublished":"2017-07-10T09:04:13+00:00","dateModified":"2017-10-06T11:09:56+00:00","author":{"@id":"https:\/\/www.stepbystepschools.net\/#\/schema\/person\/7131e4ee1c5673879e6029d14ec2f655"},"breadcrumb":{"@id":"https:\/\/www.stepbystepschools.net\/?p=1647#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.stepbystepschools.net\/?p=1647"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.stepbystepschools.net\/?p=1647#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.stepbystepschools.net\/"},{"@type":"ListItem","position":2,"name":"Webpack Multiple entry \/ Multiple output issue:- Angular Training in Mumbai batch 93."}]},{"@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\/1647"}],"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=1647"}],"version-history":[{"count":6,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/posts\/1647\/revisions"}],"predecessor-version":[{"id":1753,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=\/wp\/v2\/posts\/1647\/revisions\/1753"}],"wp:attachment":[{"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stepbystepschools.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}