I am working on the requirement on Angular 8.
I need a feature that translates the UI on the local languages based on the locality So I am going through the Internationalization (i18n) feature in Angular 8.
I have understood the functionality and I am having one doubt.
to translate the page do I need to add i18 tags in all components?
can anyone give me some guidance on this?
Thanks in Advance.
Recently created an article on that topic ...
Internationalization
Introduction
The Introduction of ngx-i18nsupport sums up the problem pretty well
Angular has a specific way of dealing with internationalization (i18n). It is described in the official documentation Angular Cookbook Internationalization (i18n).
Said in one sentence,
markup your strings to translate in your templates with an attribute i18n
run the Angular extraction tool (ng-xi18n) to extract the strings in an XML Format called [XLIFF-1.2]
copy and then translate the extracted file for every language you plan to support
run the ng compiler to generate a special version of your app for the different languages
But there are some maior gaps in the workflow. That´s where this tool comes into play.
First, you have to create a complete translation, otherwise, the ng compiler will not generate a version. It is not possible to run with partial translation.
Second, whenever you change something in your app, you have to regenerate the xliff, but there is no documented way how to merge this with the already existing translated files. There are new translation unit, that you have to merge in, and there are translation units, that do not exist any more.
We're going to use the ngx-i18nsupport-package to solve this issue.
Prepare Angular-App for i18n
Install Package #angular/localize using the angular-cli
ng add #angular/localize
Add the i18n-section to your angular.json in your project-section. Add the languages you need and change the source of your translations (the language you use as default in code/html) if required NOT RECOMMENDED STICK WITH EN IF EVER POSSIBLE.
Also make sure to set localize to true for your production-configuration.
{
...
"projects": {
"yourprojectname": {
"i18n": {
"sourceLocale": "en",
"locales": {
"de": "src/locale/messages.de.xlf",
"fr": "src/locale/messages.fr.xlf",
"it": "src/locale/messages.it.xlf"
}
},
...
"architect": {
"build": {
...
"configurations": {
"production": {
"localize": true,
...
Install ngx-i18nsupport
Run the following command to install ngx-i18nsupport
npm install -g ngx-i18nsupport
Configure xlf-merge
Add the following block the root-section of package.json and change it for your needs.
"xliffmergeOptions": {
"srcDir": "src/locale",
"languages": [
"de",
"fr",
"it"
],
"preserveOrder": true,
"beautifyOutput": true
}
languages
languages your app needs to support. Make sure it matches the i18n-definition your angular.json!
srcDir
output-dir for translation-files. Make sure it matches the i18n-definition your angular.json!
preserveOrder
Ensures the order of you translation isn't changed (not ordered to abc or whatever). This makes it easier to compare different version of the translation files.
beatifyOutput
formats xml nicely
Add some translations to your code
Make sure you have actual translations in your app like
<p i18n>Some random pagagraph that needs translation</p>
or
alert($localize `User ${username} doesn't exist!`);
Generate Translation Files
Run the following command to generate translation files. If you changed the --output-path make sure to change it accordingly.
ng extract-i18n --output-path src/locale
Call xliffmerge now to fix the issues mentioned in the introduction
xliffmerge
Recommendation Add this Command to the scrips section in your
package.json
"scripts": {
"translate": "ng extract-i18n --output-path src/locale && xliffmerge",
"xliffmerge": "xliffmerge",
...
You can run npm run translate any time you want to upate translations.
Test your app in a different language
You may want to test how your app looks translated for a specific language.
Add a build-configurations and serve-options to set the localize-language for each language used in your app.
HINT Don't forget to replace yourprojectname
angular.json
{
...
"projects": {
"yourprojectname": {
...
"architect": {
"build": {
...
"configurations": {
"de": {
"localize": ["de"]
},
"fr": {
"localize": ["fr"]
},
"it": {
"localize": ["it"]
}
...
}
},
"serve": {
...
"configurations": {
...
"development-de": {
"browserTarget": "yourprojectname:build:development,de"
},
"development-fr": {
"browserTarget": "yourprojectname:build:development,fr"
},
"development-it": {
"browserTarget": "yourprojectname:build:development,it"
}
Run your app in the desired language
ng serve -o --configuration=development-de
Recommendation Add a script starting your app in your apps supported langauges simultanialy each language on a different port
package.json
"scripts": {
"start": "ng serve -o",
"start-de": "ng serve -o --configuration=development-de --port=4201",
"start-fr": "ng serve -o --configuration=development-fr --port=4202",
"start-it": "ng serve -o --configuration=development-it --port=4203",
...
Now you can run your app simultaneously in any language you like
npm run start-de.
Have Fun!
😄
Related
Running Cypress and came across using xpath in Cypress and I am trying the following code in .js file.
/// <reference types = "cypress" />
describe ("Test Contact us form",()=>{
it("Should be able to submit the form", ()=>{
cy.visit('some url');
cy.xpath('//a[contains (#href, "contact")]').click();
});
})
This is how my xpath node_modules directory path looks like
\Projects\node_modules\xpath
Here is my index.js
// Alternatively you can use CommonJS syntax:
// require('./commands')
require('xpath')
Here is my package.json
{
"name": "projects",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "Thisistest"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^5.2.0",
"xpath": "0.0.29"
}
}
Here is a snippet of the package-lock.json
"xpath": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.29.tgz",
"integrity": "some key",
"dev": true
},
After running the test, I am getting the following compilation error.
Its a TypeError.
cy.xpath is not a function
Seems to be a small config thing. However, followed the exact steps as given on https://github.com/cypress-io/cypress-xpath#readme
I removed and re-setup cypress and xpath again using npm through git bash and it worked.
Previously, I had setup using node.js command prompt. After installing xpath using same npm command, xpath was successfully downloaded, however, the directory name inside node_modules was just xpath instead of cypress-xpath. Now, even though I had require('xpath') under the index.json file, it was still unable to detect xpath.
[Updated for Cypress Ver- 10.9.0 in year 2022]
Use link below to install: cypress-xpath plugin
https://www.npmjs.com/package/cypress-xpath
Step 1: Install XPath Plugin using below command
npm install cypress-xpath
Step 2 Add this line to e2e.js in support folder
require('cypress-xpath');
Step 3 Add your xpath in cy.xpath method like below:
cy.xpath("//input[#name='userName']").should("be.visible");
Please make sure to check that you're getting code intellisense like this (refer image attached), once successful installation of the cypress-xpath plugin.
I had faced the same issue.
then I changed the reference types from cypress to cypress-xpath as follows
///reference types = 'cypress-xpath'
and the problem is resolved.
This might be helpful to you.
I downloaded cypress-xpath and updated the config file with requires('cypress-xpath) and then tried and it worked
When a build a conda environment like this
conda create --prefix env python=3.6.5
Some absolute paths appear in some json files in the conda-meta folder. How can I avoid it? I just want to use relative paths here or I just want to hide them completely. Is there a way to achieve this? Are they mandatory? See extracted_package_dir, source or package_tarball_full_path attributes:
{
"arch": "x86_64",
"build": "py36_0",
"build_number": 0,
"channel": "https://repo.anaconda.com/pkgs/main/win-64",
"constrains": [],
"depends": [
"python >=3.6,<3.7.0a0"
],
"extracted_package_dir": "C:\\Users\\UserName\\AppData\\Local\\conda\\conda\\pkgs\\certifi-2019.3.9-py36_0",
"features": "",
"files": [
"Lib/site-packages/certifi-2019.03.09-py3.6.egg-info",
"Lib/site-packages/certifi/__init__.py",
"Lib/site-packages/certifi/__main__.py",
"Lib/site-packages/certifi/__pycache__/__init__.cpython-36.pyc",
"Lib/site-packages/certifi/__pycache__/__main__.cpython-36.pyc",
"Lib/site-packages/certifi/__pycache__/core.cpython-36.pyc",
"Lib/site-packages/certifi/cacert.pem",
"Lib/site-packages/certifi/core.py"
],
"fn": "certifi-2019.3.9-py36_0.tar.bz2",
"license": "ISC",
"link": {
"source": "C:\\Users\\UserName\\AppData\\Local\\conda\\conda\\pkgs\\certifi-2019.3.9-py36_0",
"type": 1
},
"md5": "e1faa30cf88c0cd141dfe71e70a9597a",
"name": "certifi",
"package_tarball_full_path": "C:\\Users\\UserName\\AppData\\Local\\conda\\conda\\pkgs\\certifi-2019.3.9-py36_0.tar.bz2",
"paths_data": {
"paths": [
[...]
If I remove the whole folder the environment become useless and I cannot activate it anymore in order to install, update or remove new packages.
I want to do this to encapsulate the environment in one application and I do not want to have my original absolute paths in the computer of the final user.
My Use Case
I am developing an electron app that uses a tornado server (that uses python)
Currently I am using electron-builder to add the environment to the installer and works pretty well, but one drawback is the conda-meta folder I commented above. What I do now is to remove it manually when I want to make an installer.
That will probably break conda. It's not written to treat those as relative paths. If you told us more about your use case, maybe we could help. Are you trying to redistribute an installed environment? Have you see the "constructor" or "conda-pack" projects?
Finally the best solution I found was to ignore the folder when creating the final installer with electron-builder.
So I have applied the directive extraResources to add the conda environment except the folder conda-meta. And I have added the filter "!conda-meta${/*}", the meaning is explained here
Remember that !doNotCopyMe/**/* would match the files in the doNotCopyMe directory, but not the directory itself, so the empty directory would be created. Solution — use macro ${/*}, e.g. !doNotCopyMe${/*}.
The result in the package.json file:
"extraResources": [
{
"from": "../env",
"to": "env",
"filter": [
"**/*",
"!*.pyc",
"!conda-meta${/*}"
]
}
],
I'm using yeoman's angular-fullstack generator with default parameters.
I would like to use ckeditor with https://github.com/lemonde/angular-ckeditor , so I extended my bower.json with the following lines:
"ckeditor": "#full/4.4.7",
"angular-ckeditor": "~0.4.2"
It works well in development mode ( grunt serve ), but it fails in production ( grunt serve:dist ). It tries to load /config.js and /skins/moono/editor_gecko.css and the language file dynamically, but it fails.
Have anybody idea how to solve it?
Had similar issue with ACE editor. What I did is I added override in bower.json
for ace looks like this
"overrides": {
"ace-builds": {
"main": [
"src-noconflict/ace.js",
"src-noconflict/theme-monokai.js",
"src-noconflict/worker-javascript.js",
"src-noconflict/mode-javascript.js"
]
},
for you ckeditor config you can specify it in a similar way in the overrides
i.e.
"overrides": {
"ckeditor": {
"main": [
"path/to/your/ckeditor.js",
"path/to/your/ckeditor/config.js"
]
}
}
for the CSS, not sure but if you check your gruntfile you might come up with a simple solution (i.e. add one more folder to the CSS sources).
If you find a nice CSS solution please post it as it could be helpful to more people ;)
I'm trying to find a good, clean, way to test React components. I'm liking the idea of mochify as it looks like it abstracts a lot of the hassle of test runners, works with webdriver/saucelabs, etc.
The trouble is that I'm using Browserify with various transforms for jsx, coffee, less, etc from the command line. And can't find how get mochify to run those transforms.
How do I do this?
Or is there a better option out there... Karma maybe?
Thanks
Browserify transforms can also be specified in package.json, for example:
...
"devDependencies": {
"browserify": "*",
"coffeeify": "^0.6.0",
"mocha": "*",
"mochify": "*",
"reactify": "^0.13.1"
},
"browserify": {
"transform": [
"coffeeify",
"reactify"
]
},
...
In your test files, just requires the actual component file using relative path, and write tests as you normally do with mocha:
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var MyComponent = require('../src/app/MyComponent');
...
Edit: Mochify now supports additional transforms and plugins with --transform and --plugin.
This problem will be addressed in a future release of Mochify.
Make sure to watch the issue on GitHub.
Cucumber.js is supplying a command-line "binary" which is a simple .js file containing a shebang instruction:
#!/usr/bin/env node
var Cucumber = require('../lib/cucumber');
// ...
The binary is specified in package.json with the "bin" configuration key:
{ "name" : "cucumber"
, "description" : "The official JavaScript implementation of Cucumber."
// ...
, "bin": { "cucumber.js": "./bin/cucumber.js" }
// ...
This all works well on POSIX systems. Someone reported an issue when running Cucumber.js on Windows.
Basically, the .js file seems to be executed through the JScript interpreter of Windows (not Node.js) and it throws a syntax error because of the shebang instruction.
My question is: what is the recommended way of setting up a "binary" script that works on both UNIX and Windows systems?
Thanks.
Windows ignores the shebang line #!/usr/bin/env node and will execute it according to the .js file association. Be explicit about calling your script with node
node hello.js
ps. Pedantry: shebangs aren't in the POSIX standard but they are supported by most *nix system.
If you package your project for Npm, use the 'bin' field in package.json. Then on Windows, Npm will install a .cmd wrapper along side your script so users can execute it from the command-line
hello
For npm to create the shim right, the script must have the shebang line #!/usr/bin/env node
your "bin" should be "cucumber" npm will create a "cucumber" or "cucumber.cmd" file pointing to "node %SCRIPTNAME%". the former being for posix environments, the latter being for windows use... If you want the "js" to be part of the executable name... you should use a hyphon instead... "cucumber-js" ... Having a .js file will come before the .js.cmd in your case causing the WScript interpreter to run it as a JScript file, not a node script.
I would suggest looking at coffee-script's package.json for a good example.
{
"name": "coffee-script",
"description": "Unfancy JavaScript",
"keywords": ["javascript", "language", "coffeescript", "compiler"],
"author": "Jeremy Ashkenas",
"version": "1.4.0",
"licenses": [{
"type": "MIT",
"url": "https://raw.github.com/jashkenas/coffee-script/master/LICENSE"
}],
"engines": {
"node": ">=0.4.0"
},
"directories" : {
"lib" : "./lib/coffee-script"
},
"main" : "./lib/coffee-script/coffee-script",
"bin": {
"coffee": "./bin/coffee",
"cake": "./bin/cake"
},
"scripts": {
"test": "node ./bin/cake test"
},
"homepage": "http://coffeescript.org",
"bugs": "https://github.com/jashkenas/coffee-script/issues",
"repository": {
"type": "git",
"url": "git://github.com/jashkenas/coffee-script.git"
},
"devDependencies": {
"uglify-js": ">=1.0.0",
"jison": ">=0.2.0"
}
}
I managed to figure out a solution to a similar issue.
My original plan was to have only one large .js file, for both the API and CLI (the reason is because I didn't know how to share variables between two files at the time). And when everything was built, I tried to add the #!/usr/bin/env node shebang to my file. However that didn't stop Windows Script Host from giving an error.
What I ended up doing was coming up with an idea of a "variable bridge" that allowed variables to be read and set using getVar and setVar. This made me have to extract the CLI code from the API code and add some imports to the variable bridge.
In the CLI file, I added the shebang, and modified the package.json of my project to have:
{
...
"main": "./bin/api.js",
"bin": {
"validator": "./bin/cli.js"
}
...
}
Here are a few small notes that I think might help if Windows Script Host is still giving an error (I applied all of them so I'm not sure which one helped):
Using only LF line endings seemed to help.
It seems that ./bin is the preferred directory for compiled files. I did try ./dist but it didn't work for me.
An empty line after the shebang may be needed:
// cli.js
#!/usr/bin/env node
// code...
Using the same name for main and bin in package.json seemed to be an issue for me.