Ng: различия между версиями
Перейти к навигации
Перейти к поиску
Vovan (обсуждение | вклад) (→Add i18n) |
Vovan (обсуждение | вклад) (→Extract i18n and merge i18n files) |
||
(не показано 15 промежуточных версий этого же участника) | |||
Строка 13: | Строка 13: | ||
ng new my-super-app | ng new my-super-app | ||
− | |||
? Would you like to add Angular routing? Yes | ? Would you like to add Angular routing? Yes | ||
? Which stylesheet format would you like to use? SCSS | ? 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: | ||
+ | |||
+ | <pre> | ||
+ | cat << EOF > backend-proxy.conf.json | ||
+ | { | ||
+ | "/api/*": { | ||
+ | "target": "http://localhost:3000", | ||
+ | "secure": false, | ||
+ | "changeOrigin": true, | ||
+ | "logLevel": "debug", | ||
+ | "pathRewrite": { | ||
+ | "^/api": "http://localhost:3000/api" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | EOF | ||
+ | </pre> | ||
+ | |||
+ | ===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== | ==Add i18n== | ||
Строка 22: | Строка 71: | ||
CMD: | CMD: | ||
− | |||
npm install --save-dev ngx-i18nsupport | npm install --save-dev ngx-i18nsupport | ||
− | + | npm install --save-dev @angular/localize | |
− | |||
===[1] In file=== | ===[1] In file=== | ||
Строка 41: | Строка 88: | ||
and add two new scripts as: | and add two new scripts as: | ||
− | "extract-i18n": "ng | + | "extract-i18n": "ng xi18n --format=xlf2 --out-file src/locale/messages.en.xlf", |
"merge-i18n-ru": "xliffmerge -p xliffmerge-conf.json ru", | "merge-i18n-ru": "xliffmerge -p xliffmerge-conf.json ru", | ||
then create a file: | then create a file: | ||
+ | |||
+ | CMD: | ||
<pre> | <pre> | ||
Строка 71: | Строка 120: | ||
add this section: | add this section: | ||
− | < | + | <pre> |
"i18n": { | "i18n": { | ||
"sourceLocale": "en-US", | "sourceLocale": "en-US", | ||
Строка 98: | Строка 147: | ||
===Create dir=== | ===Create dir=== | ||
+ | |||
+ | CMD: | ||
mkdir src/locale | mkdir src/locale | ||
===Extract i18n and merge i18n files=== | ===Extract i18n and merge i18n files=== | ||
+ | |||
+ | CMD: | ||
npm run extract-i18n | npm run extract-i18n | ||
npm run merge-i18n-ru | npm run merge-i18n-ru |
Текущая версия на 20:25, 10 октября 2021
Содержание
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
CMD:
npm run extract-i18n npm run merge-i18n-ru