{"id":1050,"date":"2017-08-26T22:47:08","date_gmt":"2017-08-26T12:47:08","guid":{"rendered":"http:\/\/www.moneystock.net\/wp_e\/?p=1050"},"modified":"2017-12-26T09:10:27","modified_gmt":"2017-12-25T23:10:27","slug":"bundling-angular-for-production-in-visual-studio-2015","status":"publish","type":"post","link":"https:\/\/moneystock.net\/wp_e\/2017\/08\/26\/bundling-angular-for-production-in-visual-studio-2015\/","title":{"rendered":"Bundling Angular for production in Visual Studio 2015"},"content":{"rendered":"

There are many ways of bundling Angular SPA.\u00a0One of the ways I followed is Code Project<\/a>\u00a0by\u00a0Mark J. Caplin<\/a><\/span>\u00a0This article recommends gulp task script and SystemJs-builder.<\/p>\n

One thing I couldn’t make it work even I followed this article was bundling angular app for a production environment. This is because I started my Angular app following the Angular official tutorial<\/a>\u00a0so that app is slightly different from what’s in the Code Project and probably I used different versions of dependency.<\/p>\n

I had a few issues when I couldn’t make a production ready bundle.<\/p>\n

    \n
  1. As I kept using SysntemJs for production, the Angular app had to read many javascript\u00a0files while loading the page, which caused slow page loading.<\/li>\n
  2. Browser cache prevented users from loading updated new javascript of the\u00a0Angular app.<\/li>\n<\/ol>\n

    The solution<\/p>\n

    Use SystemJs-Builder<\/a>. The great thing about using systemjs builder for a production environment is that it helps to bundle all Angular dependency files and my Angular into a single minified\u00a0javascript file. This can help my 2 issues. It’s like magic.<\/p>\n

    Actually, I was already using systemjs\u00a0builder as suggested in the Code Project article to\u00a0bundle Angular dependency files into a single angular4-dev-min.js. However, it wasn’t working for the buildForProduction\u00a0stage, which uses a buildStatic\u00a0function.<\/p>\n

    Main error I experienced was “Error on fetch for app.module” and “not found app.XXX.html”, which is templates of my\u00a0Angular app. Clearly, it was related to path configuration. As my app was working well when loaded by systemjs, it looks to me a bug<\/a> of systemjs.<\/p>\n

    The first error resolved by the workaround in the the bug comment<\/a>. as below.<\/p>\n

    Use a\u00a0.js<\/strong> extension for all my Angular app files to import. As fetch error keep occurred other js files, I had to add .js<\/strong> for all import in all Angular .ts files.<\/p>\n

    import { AppModule } from '.\/app.module.js<\/strong>';\r\nimport { AppRoutingModule, routableComponents } from '.\/app-routing.module.js<\/strong>';\r\n\r\n<\/pre>\n
    The second error seems only happened to me. \u00a0The solution was adding a\u00a0path(\/App<\/strong>) in @component section. The original Code Project used ‘.\/App<\/strong>‘, which didn’t work for me, because it added extra ‘\/App’ path like ‘\/App\/App’ when running the app in debug mode.<\/p>\n
    @Component({\r\n moduleId: module.id,\r\n selector: 'my-app',\r\n templateUrl: '\/App<\/strong>\/app.component.html,\r\n styleUrls: ['\/App<\/strong>\/app.component.css']\r\n})<\/pre>\n
    Just to share what dependency I used, I show the part of package.json below<\/p>\n
    \"@angular\/common\": \"^4.0.0\",\r\n\"systemjs\": \"0.20.18\",\r\n\"systemjs-builder\": \"^0.16.6\",<\/pre>\n
    Just one issue with the solution above is that absolute path for\u00a0styleUrls\u00a0doesn’t work with Angular2 or 4. This is an Angular bug and workaround is putting CSS in HTML file keeping the URL as is for now.<\/p>\n","protected":false},"excerpt":{"rendered":"
    There are many ways of bundling Angular SPA.\u00a0One of the ways I followed is Code Project\u00a0by\u00a0Mark J. Caplin\u00a0This article recommends gulp task script and SystemJs-builder. One thing I couldn’t make it work even I followed this article was bundling angular app for a production environment. This is because I started my Angular app following the… Continue reading Bundling Angular for production in Visual Studio 2015<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[243,79],"tags":[244,247,224,245,246],"class_list":["post-1050","post","type-post","status-publish","format-standard","hentry","category-angular","category-web-development","tag-angular","tag-bundling","tag-gulp","tag-systemjs","tag-systemjs-builder","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/comments?post=1050"}],"version-history":[{"count":3,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1050\/revisions"}],"predecessor-version":[{"id":1054,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/posts\/1050\/revisions\/1054"}],"wp:attachment":[{"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/media?parent=1050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/categories?post=1050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/moneystock.net\/wp_e\/wp-json\/wp\/v2\/tags?post=1050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}