0

I'm currently migrating an application from Angular 1.x to Angular 2.0 and I have two issues related to the module system and the way js file are loaded:

  • In the Angular 1.x version, I had a grunt job that was watching at my files and that combined all js files in a huge one. At the end, I just referenced it in my index page and everything worked. With Angular 2.0, I'm using TypeScript and the module approach, so loading the js files is handled by the module system. Therefore, I don't have one big file, instead, I can see a lot of calls in the Network tab of my Google Chrome Developper Dashboard to all JS files. I tried to combine the files and include the resulting one but I had some errors related to anonymous module registration. So I'm wondering if there is a way to combine all the JS files in one.

  • In the Angular 1.x version, I had a specific folder called "language" that contained a "fr" and a "en" folder. My grunt job was creating two different files: "product.fr.min.js" and "product.en.min.js". They were composed by all the JS files + "language/fr/.js" for the ".fr.min.js" file and by all the JS files + "language/en/.js" file for the ".en.min.js". As, with Angular 2.0 & TypeScript, I don't really have the control on what file is loaded when, I don't really know how to migrate that part and I'd like to avoid having both "fr" and "en" files referenced (because I could add other language and I don't want that the user have to load 36 languages just to use one).

Thanks

ssougnez
  • 5,315
  • 11
  • 46
  • 79
  • 2
    Possible duplicate of [How can I concat TypeScript files with Angular2 like Rails assets:precompile?](http://stackoverflow.com/questions/34416066/how-can-i-concat-typescript-files-with-angular2-like-rails-assetsprecompile) – Eggy Dec 22 '15 at 21:49

1 Answers1

2

Hm I can't offer much beyond anecdotes, but for what it is worth:

  1. I'd highly recommend Webpack, particularly as it specialises in what you are trying to achieve: bundling. I started a ng1/ng2/Typescript project recently. First I used Gulp, then JSPM and then, dissatisfied with my results I turned to Webpack, and had something I was happy with in literally 5 minutes. I'd suggest looking at this starter project, as its probably the best I have seen.

  2. Without knowing the specifics, I guess the most obvious suggestion to get you started is to put all the language strings into a JSON, and then "lazy load" the JSON once you have decided on the language.

Ashley Coolman
  • 11,095
  • 5
  • 59
  • 81
  • 1
    Hi, I will take a look at WebPack then. For the language solution, I'll think about the second solution to see if it's a solution. In my ng1 project, the idea was to a global language object accessible from everywhere. This way "language.materials.gold.name" would return me "or" (in French) or "Gold" (in english). And as I had two files (".fr.min.js" and ".en.min.js"), I just included the one of the desired language. Worked well. – ssougnez Dec 23 '15 at 07:06