Multi-Language configuration in Frontend

[Robert Jäger]

Hi,

I followed the instructions given in Confluence ( https://wiki.lyrasis.org/display/DSDOC7x/Multilingual+Support ) in order to enable support for German language. I confirm that de.json5 is present in i18n folder, but still it seems the file is not found.

When building and running in dev mode (yarn start:dev), the language selection itself works, but the German translation is not displayed, instead the actual field names are shown, e.g.  "menu.section.browse_global_communities_and_collections" is shown instead of the German equivalent for "Communities & Collections".

my src/environments/environment.dev.ts file:

export const environment = {
   ui: {
     ssl: false,
     host: 'localhost',
     port: 4000,
     nameSpace: '/'
   },
   
   rest: {
     ssl: false,
     host: 'localhost',
     port: 8080,
     nameSpace: '/server'
   },

   defaultLanguage: 'de',
   languages: [{
     code: 'en',
     label: 'English',
     active: true,
   },
   {
     code: 'de',
     label: 'Deutsch',
     active: true,
   }]
};

I also tried production mode with a src/environments/environment.dev.ts filewith contents equal to the dev file above.

While I had issues with the build getting stuck at ES5 bundles and requiring a retrigger before, I am now unable to rebuild production ( yarn run build:prod ) at all.

I keep getting the same issue:

Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
See "/tmp/ng-pGiQLu/angular-errors.log" for further details.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Contents of the mentioned log file:

[error] Error: Call retries were exceeded
    at ChildProcessWorker.initialize (/dspace-angular/dspace-angular-dspace-7.1/node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)
    at ChildProcessWorker._onExit (/dspace-angular/dspace-angular-dspace-7.1/node_modules/jest-worker/build/workers/ChildProcessWorker.js:274:12)
    at ChildProcess.emit (events.js:400:28)
    at ChildProcess.emit (domain.js:475:12)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:282:12)

Both development and production builds I am executing strictly following the installation guide: https://wiki.lyrasis.org/display/DSDOC7x/Installing+DSpace

I am a bit lost here on what I am doing wrong at this stage. Likely the solution for both issues is trivial.

Versions used for building and hosting the frontend:

Ubuntu 20.04

node.js 14.18.2
yarn 1.22.17
pm2 5.1.2

dspace-angular: latest (Oct28) https://github.com/DSpace/dspace-angular/commit/2fe9fbd5845d8e3b53b98d403935e71feca96311

yarn install claims I am up to date.

Thank you for any hints

[Robert Jäger]

I was able to resolve the build issue by adding a workaround in packages.json:

"build:client-and-server-bundles": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod && ng run dspace-angular:server:production --bundleDependencies true",

(more convenient solutions gladly taken).

Still, the language problem persists also in production mode.

[Mohammad S. AlMutairi]

Hi,

I think that's not a fix to the root cause of both issues you faced ( I've seen this temporarily tweak here https://bit.ly/3eGhZYZ ). You shouldn't got all the issues you faced at all if all you have done was the changes you have made into the German language file and  the environment.*.ts file ( have you done any branding or other customization?). Building the frontend should go smooth without any issue if all the frontend prerequisites were installed correctly. Try to double check how java and the frontend prerequisites were installed and it's a good idea if you just rename the old frontend folder and start a fresh frontend installation and copy your translation file to the i18n folder during that.

##### Java 11 installation #####
1) apt update -y
2) apt upgrade -y
3) apt install default-jdk -y
4) java -version
5) echo "export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64/" >> /etc/environment
6) export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64/
##### End of Java 11 installation ######

##### Apache Maven and Ant Installation #####
1) apt-get install maven ant ant-optional -y
2) mvn -v
3) ant -version
##### End of Apache Maven and Ant installation #####


################## DSpace Frontend build & install ############################
##### Nodejs Installation #####
1) curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
2) apt install nodejs
3) node --version
4) npm --version

##### Yarn & pm2 installation #####
1) npm install --global yarn
2) npm install --global pm2

####### DSpace frontend part installation #######
a) cd /opt
b) wget https://github.com/DSpace/dspace-angular/archive/refs/tags/dspace-7.1.tar.gz
c) tar zxvf dspace-7.1.tar.gz
d) mv dspace-angular-dspace-7.1/ dspace-angular
e) cd dspace-angular
f) yarn install
g) cp src/environments/environment.common.ts src/environments/environment.prod.ts
h) vi src/environments/environment.prod.ts
  production: true,
  // Angular Universal server settings.
  // NOTE: these must be "synced" with the 'dspace.ui.url' setting in your backend's local.cfg.

  ui: {
    ssl: false,
    host: 'localhost',
    port: 4000,

    // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
    nameSpace: '/',
    // The rateLimiter settings limit each IP to a "max" of 500 requests per "windowMs" (1 minute).
    rateLimiter: {
      windowMs: 1 * 60 * 1000,   // 1 minute
      max: 500 // limit each IP to 500 requests per windowMs
    }
  },
  // The REST API server settings.
  // NOTE: these must be "synced" with the 'dspace.server.url' setting in your backend's local.cfg.
  rest: {
    ssl: true,
    host: 'example.org',
    port: 443,
    // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
    nameSpace: '/server',
  },

i) yarn config:check:rest
j) yarn run build:prod
################## End of DSpace Frontend build & install ############################

Hope it help

[Robert Jäger]

Hi,

thanks for providing the detailed instructions.

Actually my frontend is unmodified from the 7.1 release (Oct) except for the environment.*.ts files and the above mentioned package.json patch. Mentioned patch I picked from various potential solutions - it appears to be some resource constraint happening with the server I am building on.

When going with the minimum environment (only REST and UI) the mentioned patch is not required and UI builds perfectly fine, but it is giving some suspicious warnings:

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/themes/custom/app/register-page/register-email/register-email.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/themes/custom/theme.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/themes/dspace/theme.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/app/core/shared/external-source.model.ts depends on 'rxjs/internal/Observable'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/app/core/shared/search/search-configuration.service.ts depends on 'rxjs/internal/observable/of'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in budgets: bundle initial-es2015 exceeded maximum budget. Budget 3 MB was not met by 757 kB with a total of 3.74 MB.

WARNING in budgets: bundle initial-es5 exceeded maximum budget. Budget 3 MB was not met by 1.16 MB with a total of 4.16 MB.

(...)

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/themes/custom/app/register-page/register-email/register-email.component.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/themes/custom/theme.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /dspace-angular/dspace-angular-dspace-7.1/src/themes/dspace/theme.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

(...)

WARNING in ./node_modules/pem/lib/pem.js 607:26-39
Critical dependency: the request of a dependency is an expression
 @ ./server.ts

(none of the mentioned files I have tampered with)

Also I have not manipulated any language or theme file, German translation json5 file is already present in the release.

The Backend is running on the same server without any issues.

For comparison what I did:

apt update

apt install openjdk-11-jdk
apt install maven

apt install ant

wget -qO- https://deb.nodesource.com/setup_14.x | bash -
apt update
apt install nodejs
npm install --global yarn
npm install --global pm2

Versions I got:

openjdk-11-jdk 11.0.13
maven 3.6.3
ant 1.10.7

node.js 14.18.2
yarn 1.22.17
pm2 5.1.2

[Robert Jäger]

Nevermind.

It appears to be an issue with provided de.json5.

I tried substituting the en.json5 contents in browser/assets/i18n with contents of de.json5 - still no German shown. I repeated the procedure with the french translation fr.json5, and as expected when switching to English I am now seeing French

(of course this copy/rename is for testing purposes only).

[Mohammad S. AlMutairi]

Hi,

Glad you nailed it. I did some testing here to see the minimum memory dspace backend and frontend can be built with. I started with 1 vCPU and 512MB RAM. A freshly installed Ubuntu 20.04 VM on a Hyper-V Backend failed to compile till the RAM for this VM increased to 1.5GB RAM ( Tomcat was stopped during the compilation phase). Frontend failed to compile and to complete successfully till this VM RAM increased to 3.5GB but the server ended unresponsive. DSpace Minimal DSpace Production system requirements https://wiki.lyrasis.org/display/DSPACE/User+FAQ

--
All messages to this mailing list should adhere to the Code of Conduct: https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx
---
You received this message because you are subscribed to a topic in the Google Groups "DSpace Technical Support" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/dspace-tech/3oBI31biux8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to dspace-tech...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dspace-tech/8c0f0d10-d78a-483e-bece-701ff7e9e632n%40googlegroups.com.

[Robert Jäger]

Sorry, I forgot to submit the conclusion in order to close this topic for anyone else facing this issue:

the de.json5 was fixed, but the fix happened only after the official release. There was a simple mistake breaking the file:

https://github.com/DSpace/dspace-angular/commit/32ae686e36030f4ca9a6ced4a487ab39b24abadb#diff-3891cd7b60c7fab0815748b15165b7303005aa2c246d3de061bef9a6ffcfc13d

Taking the latest version from Github fixed everything.

As for system specs I fulfill the high end requirements, not sure why I manually need to add that parameter to the build.

Cheers.