Ng

NG

fixme...

Prep...

npm install -g @angular/cli

Create new SPA angular app

CMD:

ng new my-super-app

? 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

CMD:

cat << EOF > backend-proxy.conf.json
{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": {
      "^/api": "http://localhost:3000/api"
    }
  }
}
EOF

Change start script

In file:

package.json

in section

scripts

change start script as:

"start": "ng serve --host 0.0.0.0 --port 4266 --proxy-config backend-proxy.conf.json --disable-host-check",

Add i18n

CMD:

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

[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:

CMD:

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

CMD:

mkdir src/locale

Extract i18n and merge i18n files

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