{"id":1580,"date":"2018-11-20T09:23:41","date_gmt":"2018-11-20T08:23:41","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=1580"},"modified":"2023-12-20T19:55:27","modified_gmt":"2023-12-20T18:55:27","slug":"building-an-angular-app-in-parallel-for-multiple-languages","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/building-an-angular-app-in-parallel-for-multiple-languages\/","title":{"rendered":"Building an Angular App in parallel for multiple languages"},"content":{"rendered":"\r\n

Problem<\/h2>\r\n\r\n\r\n\r\n

When using the built-in Angular Internationalization (i18n)<\/a>\u00a0the Angular guide tells you in detail what you have to do to set up your application to support multiple languages. The guide lacks the details on how to properly integrate the build into a common web application deployment workflow. In this brief blog post I’m going to show an elegant solution, that does not require external bash\/shell script, but uses the power npm provides itself. This works cross-platform<\/strong> unlike some other techniques that won’t work for Windows users.<\/p>\r\n\r\n\r\n\r\n

tl;dr;<\/h2>\r\n\r\n\r\n\r\n

Install and use the npm-run-all<\/a> package to be able to use wildcards within your npm run scripts. Add a npm run command for each language with the following naming pattern<\/p>\r\n\r\n\r\n\r\n

build:[language]<\/pre>\r\n\r\n\r\n\r\n
Add a npm run all script, that executes every command matching the pattern in parallel<\/p>\r\n\r\n\r\n\r\n
run-p \\\"build:* -- --configuration=production\\\"<\/pre>\r\n\r\n\r\n\r\n
Implementation in detail<\/h2>\r\n\r\n\r\n\r\n
We’re going to use a npm package called\u00a0npm-run-all<\/a>\u00a0to build our application\u00a0in parallel for every language we want to support. This is what you want to do on your buildserver because it typically has more RAM or processors than your developer machine.<\/p>\r\n\r\n\r\n\r\n
Install dependencies<\/h3>\r\n\r\n\r\n\r\n
We’re going to use a npm package called npm-run-all<\/a>. Install this package as a devDependency using the following command<\/p>\r\n\r\n\r\n\r\n
npm i -D npm-run-all<\/pre>\r\n\r\n\r\n\r\n
Add run scripts to package.json<\/h3>\r\n\r\n\r\n\r\n
The newly installed package now lets you use two commands which support wildcards. run-p<\/strong> lets you run scripts in parallel whereas run-s<\/strong> executes the commands sequentially.<\/p>\r\n\r\n\r\n\r\n
We’re going to add a command for each language we want to build the application for. Note that for this example I stripped the supplied parameters for each command. Typically you want to supply a base-href parameter depending on how your production server is configured.<\/p>\r\n\r\n\r\n\r\n
package.json\r\n{\r\n  \"name\": \"myApp\",\r\n  \"version\": \"1.0.0\",\r\n  \"scripts\": {\r\n    \"build\": \"run-p \\\"build:* -- --configuration=production\\\"\",\r\n    \"build:en\": \"ng build\",\r\n    \"build:de\": \"ng build --i18n-locale=de\",\r\n    \"build:fr\": \"ng build --i18n-locale=fr\",\r\n    \"build:es\": \"ng build --i18n-locale=es\"\r\n  }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n
The sugar is within the build<\/strong> entry. We’re using the run-p command to run all commands matching the pattern build:<\/strong><\/p>\r\n\r\n\r\n\r\n
We are still able to pass common parameters to all of the child commands. You have to use escaped brackets and additional double dashes to make this work properly.<\/p>\r\n\r\n\r\n\r\n
Use the script<\/h3>\r\n\r\n\r\n\r\n
You are now able to build your application for multiple locales with the use of just one npm command. In the terminal of your choice execute the following command. Note that the output might look a bit scrambled.<\/p>\r\n\r\n\r\n\r\n
npm run build<\/pre>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
Further Reading<\/h2>\r\n\r\n\r\n\r\n