Ng

NG

fixme...

Prep...

npm install -g @angular/cli

Create new SPA angular app

CMD:

ng new my-super-app

NOT CMD:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

If need proxy api to backend

For example we need call backend api by url:

http://localhost:4266/api

and our angular spa loads by:

http://localhost:4266/

and our backend works on another port with url prefix (/api):

http://localhost:3000/api

For this we need:

Add proxy config file

cat << EOF > backend-proxy.conf.json {

 "/api/*": {
   "target": "http://localhost:3000",
   "secure": false,
   "changeOrigin": true,
   "logLevel": "debug",
   "pathRewrite": {
     "^/api": "http://localhost:3000/api"
   }
 }

} EOF

Add i18n

CMD:

npm install --save-dev ngx-i18nsupport
npm install --save-dev @angular/localize

NOT CMD:

[1] In file

package.json

in section

scripts

change build script as:

"build": "ng build --configuration=production,ru --localize",

and add two new scripts as:

"extract-i18n": "ng xi18n --format=xlf2 --out-file src/locale/messages.en.xlf",
"merge-i18n-ru": "xliffmerge -p xliffmerge-conf.json ru",

then create a file:

cat << EOF > xliffmerge-conf.json
{
  "xliffmergeOptions": {
    "srcDir": "src/locale",
    "genDir": "src/locale",
    "i18nFile": "messages.en.xlf",
    "i18nFormat": "xlf2"
  }
}
EOF

[2] In file

angular.json

between sections

"prefix": "app",
<somwhere in here> <--- ,
"architect": {...}

add this section:

 "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "en": "src/locale/messages.en.xlf",
          "ru": "src/locale/messages.ru.xlf"
        }
      },

[3] In file

angular.json

in setion

projects.my-super-app.architect.build.options

add before section

outputPath

this section:

"localize": ["en"],

Create dir

mkdir src/locale

Extract i18n and merge i18n files

npm run extract-i18n
npm run merge-i18n-ru