280 Angular 14 Library, Webpack 5, Internationalization - chempkovsky/CS82ANGULAR GitHub Wiki

• Create Angular Mono Repository
• Create subprojects
• Create Home component for subprojects
• Create two modules for mfe1 subproject
  • Add two components to each module created in the mfe1 subproject
• Create one module for mfe2 subproject
  • Add two components to module created in the mfe2 subproject
• RouterModule forChild for mfe1 and mfe2 subprojects
• RouterModule forRoot for mfe1 and mfe2 subprojects
• App Component Html for mfe1 and mfe2 subprojects
• Master Html for mfe1 and mfe2 subprojects
• Detail Html for mfe1 and mfe2 subprojects
• Test mfe1 and mfe2 subprojects

• webpack config for mfe1 and mfe2 subprojects
• RouterModule forRoot for shell subproject
• Master Html for shell subproject
• Test soluton
  • Module federation Issue

• angular localize
• modify master component ts
• modify master component html
• Cannot find name localize
• Fixing a localization issue
• Prepare angular json
• Run the test
• extract i18n
• translate i18n
• Run the test for i18n

• Modify Shared service
• Try to build share lib
• Fixing share lib build error
• Modify AppComponent ts of the shell project
• Modify Master ts of the mfe1 project
• extract i18n and translate
• Run the test for share lib

• Try to build
• Fix build time error

• start with a review article on @angular-architects/module-federation
  • continue with article series about Module Federation.
• Creating a new Dynamic Host application
• our goal is to make sure that Internationalization will work correctly with the Angular 14 library, federation module on the dev bench.
  • we will create a couple of subprojects with type = remote
  • one subproject with type = shell
  • one library subproject
  • using generated service in the library we will send data from shell app to remote app
• take a look at "nx"-tool
  • generate static host
  • converting to dynamic host manually
  • generate dynamic host
  • They wrote:
    • "When serving module federation apps in dev mode locally, there'll be an error output to the console, import.meta cannot be used outside of a module, and the script that is coming from is styles.js. It's a known error output, but it doesn't actually cause any breakages from as far as our testing has shown. It's because Angular compiler attaches the styles.js file to the index.html in a script tag with defer. It needs to be attached with type=module, but Angular can't make that change because it breaks HMR. They also provide no way of hooking into that process for us to patch it ourselves. The good news is that the error doesn't propagate to production, because styles are compiled to a CSS file , so there's no erroneous JS to log an error. It's worth stressing that there's been no actual errors or breakages noted from our tests."

• run windows terminal, cd the drive and folder you like
  • our choice was E:\
• run the command

ng new ang-monorepo --no-create-application
cd ang-monorepo

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng generate library share-lib
ng generate application mfe1
ng generate application mfe2
ng generate application shell

• for mfe1, mfe2 and shell subprojects
  • Angular routing = Yes
  • stylesheet = css

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following command

ng generate component home0 --project shell
ng generate component home1 --project mfe1
ng generate component home2 --project mfe2

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng generate module components/md11 --routing --project mfe1
ng generate module components/md12 --routing --project mfe1

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng generate component components/md11/master11 --project mfe1
ng generate component components/md11/detail11 --project mfe1
ng generate component components/md12/master12 --project mfe1
ng generate component components/md12/detail12 --project mfe1

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng generate module components/md21 --routing --project mfe2

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng generate component components/md21/master21 --project mfe2
ng generate component components/md21/detail21 --project mfe2

• modify \ang-monorepo\projects\mfe1\src\app\components\md11\md11-routing.module.ts file as follows

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Detail11Component } from './detail11/detail11.component';
import { Master11Component } from './master11/master11.component';

const routes: Routes = [
  {
    path: 'detail11',
    component: Detail11Component
  },
  {
    path: '',
    component: Master11Component,
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Md21RoutingModule { }

• modify \ang-monorepo\projects\mfe1\src\app\components\md12\md12-routing.module.ts file as follows

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Detail12Component } from './detail12/detail12.component';
import { Master12Component } from './master12/master12.component';

const routes: Routes = [
  {
    path: 'detail12',
    component: Detail12Component
  },
  {
    path: '',
    component: Master12Component,
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Md12RoutingModule { }

• modify \ang-monorepo\projects\mfe2\src\app\components\md21\md21-routing.module.ts file as follows

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Detail21Component } from './detail21/detail21.component';
import { Master21Component } from './master21/master21.component';

const routes: Routes = [
  {
    path: 'detail21',
    component: Detail21Component
  },
  {
    path: '',
    component: Master21Component,
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Md21RoutingModule { }

• modify \ang-monorepo\projects\mfe1\src\app\app-routing.module.ts file as follows

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Home1Component } from './home1/home1.component';

const routes: Routes = [
  { 
    path: '', 
    component: Home1Component, 
    pathMatch: 'full'
 },
 { 
    path: 'master011', 
    loadChildren: () => import('./components/md11/md11.module')
        .then(m => m.Md11Module)
 },
 { 
   path: 'master012', 
   loadChildren: () => import('./components/md12/md12.module')
       .then(m => m.Md12Module)
 }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• modify \ang-monorepo\projects\mfe2\src\app\app-routing.module.ts file as follows

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Home2Component } from './home2/home2.component';

const routes: Routes = [
  { 
    path: '', 
    component: Home2Component, 
    pathMatch: 'full'
 },
 { 
    path: 'master021', 
    loadChildren: () => import('./components/md21/md21.module')
        .then(m => m.Md21Module)
 }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• modify \ang-monorepo\projects\mfe1\src\app\app.component.html file as follows

<style> a { margin: 5px;  } </style>

<p>Mfe1 AppComponent works!</p>

<a routerLink="/">Go to home 1 component</a>
<a routerLink="/master011">Go to master 011</a>
<a routerLink="/master012">Go to master 012</a>

<router-outlet></router-outlet>

• modify \ang-monorepo\projects\mfe2\src\app\app.component.html file as follows

<style> a { margin: 5px;  } </style>

<p>Mfe2 AppComponent works!</p>

<a routerLink="/">Go to home 2 component</a>
<a routerLink="/master021">Go to master 021</a>

<router-outlet></router-outlet>

• modify \ang-monorepo\projects\mfe1\src\app\components\md11\master11\master11.component.html file as follows

<p>master11 works!</p>
<a routerLink="./detail11" >Go to detail 11</a>

• modify \ang-monorepo\projects\mfe1\src\app\components\md12\master12\master12.component.html file as follows

<p>master12 works!</p>
<a routerLink="./detail12" >Go to detail 12</a>

• modify \ang-monorepo\projects\mfe2\src\app\components\md21\master21\master21.component.html file as follows

<p>master21 works!</p>
<a routerLink="./detail21" >Go to detail 21</a>

• modify \ang-monorepo\projects\mfe1\src\app\components\md11\detail11\detail11.component.html file as follows

<p>detail11 works!</p>
<a routerLink="../" >Go to master 11</a>

• modify \ang-monorepo\projects\mfe1\src\app\components\md12\detail12\detail12.component.html file as follows

<p>detail12 works!</p>
<a routerLink="../" >Go to master 12</a>

• modify \ang-monorepo\projects\mfe2\src\app\components\md21\detail21\detail21.component.html file as follows

<p>detail21 works!</p>
<a routerLink="../" >Go to master 21</a>

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following command

ng serve -o --project mfe1

• make sure the navigation works as expected

• run the following command

ng serve -o --project mfe2

• make sure the navigation works as expected

• Both apps can be developed and tested independently
  • mfe1
  • mfe2

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng add @angular-architects/module-federation --project mfe1 --port 4201 --type remote
ng add @angular-architects/module-federation --project mfe2 --port 4202 --type remote
ng add @angular-architects/module-federation --project shell --port 4200 --type dynamic-host

• modify \ang-monorepo\projects\mfe1\webpack.config.js file as follows

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'mfe1',

  exposes: {
    './Themodule11': './projects/mfe1/src/app/components/md11/md11.module',
    './Themodule12': './projects/mfe1/src/app/components/md12/md12.module',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

• modify \ang-monorepo\projects\mfe2\webpack.config.js file as follows

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'mfe2',

  exposes: {
    './Themodule21': './projects/mfe2/src/app/components/md21/md21.module',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

• modify \ang-monorepo\projects\shell\src\app\app-routing.module.ts file as follows

import { loadRemoteModule } from '@angular-architects/module-federation';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Home0Component } from './home0/home0.component';

const routes: Routes = [
  { 
    path: '', 
    component: Home0Component, 
    pathMatch: 'full'
 },
 {
  path: 'mfe011',
  loadChildren: () => loadRemoteModule({
      type: 'manifest',
      remoteName: 'mfe1',
      exposedModule: './Themodule11'
    })
    .then(m => m.Md11Module)
 },
 {
  path: 'mfe012',
  loadChildren: () => loadRemoteModule({
      type: 'manifest',
      remoteName: 'mfe1',
      exposedModule: './Themodule12'
    })
    .then(m => m.Md12Module)
 },
 {
  path: 'mfe021',
  loadChildren: () => loadRemoteModule({
      type: 'manifest',
      remoteName: 'mfe2',
      exposedModule: './Themodule21'
    })
    .then(m => m.Md21Module)
 },

  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• modify \ang-monorepo\projects\shell\src\app\app.component.html file as follows

<style> a { margin: 5px;  } </style>

<p>Shell AppComponent works!</p>

<a routerLink="/">Go to home 0 component</a>
<a routerLink="/mfe011">Go to master 011</a>
<a routerLink="/mfe012">Go to master 012</a>
<a routerLink="/mfe021">Go to master 021</a>

<router-outlet></router-outlet>

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng serve -o --project mfe1

• in the second terminal

ng serve -o --project mfe2

• in the third terminal

ng serve -o --project shell

• make sure navigation to remote apps is working properly
  • stop all apps

• Browser console shown the following error

Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at styles.js:7831:29)  styles.js:7831

• here is some details

• here is the function

/******/ /* webpack/runtime/publicPath */
/******/ (() => {
/******/ 	var scriptUrl;
/******/ 	if (typeof import.meta.url === "string") scriptUrl = import.meta.url
/******/ 	// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
/******/ 	// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
/******/ 	if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
/******/ 	scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
/******/ 	__webpack_require__.p = scriptUrl;
/******/ })();

• leave it alone for a while
  • they wrote Please ignore this error in the styles.js for the time being.

• we continue with the current folder
  • in our case it is e:\ang-monorepo
• run the following commands

ng add @angular/localize

• here is a response

E:\ang-monorepo>ng add @angular/localize
i Using package manager: npm
√ Found compatible package version: @angular/[email protected].
√ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
Option "name" is required.

E:\ang-monorepo>

• modify \ang-monorepo\projects\mfe1\src\app\components\md11\master11\master11.component.ts file as follows

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-master11',
  templateUrl: './master11.component.html',
  styleUrls: ['./master11.component.css']
})
export class Master11Component implements OnInit {
  additionaltitle: string = '';
  frases: {[key:string]: string}  = {
    'additionaltitle': $localize`:Here is a title to translate@@Master11Component.title-to-translate:Here is a title to translate`,
  };
  constructor() { 
    this.additionaltitle = this.frases['additionaltitle'];
  }
  ngOnInit(): void {
  }
}

• modify \ang-monorepo\projects\mfe1\src\app\components\md12\master12\master12.component.ts file as follows

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-master12',
  templateUrl: './master12.component.html',
  styleUrls: ['./master12.component.css']
})
export class Master12Component implements OnInit {
  additionaltitle: string = '';
  frases: {[key:string]: string}  = {
    'additionaltitle': $localize`:Here is a title to translate@@Master12Component.title-to-translate:Here is a title to translate`,
  };
  constructor() { 
    this.additionaltitle = this.frases['additionaltitle'];
  }
  ngOnInit(): void {
  }
}

• modify \ang-monorepo\projects\mfe2\src\app\components\md21\master21\master21.component.ts file as follows

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-master21',
  templateUrl: './master21.component.html',
  styleUrls: ['./master21.component.css']
})
export class Master21Component implements OnInit {
  additionaltitle: string = '';
  frases: {[key:string]: string}  = {
    'additionaltitle': $localize`:Here is a title to translate@@Master21Component.title-to-translate:Here is a title to translate`,
  };
  constructor() { 
    this.additionaltitle = this.frases['additionaltitle'];
  }
  ngOnInit(): void {
  }
}

• modify \ang-monorepo\projects\shell\src\app\app.component.ts file as follows

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'shell';

  additionaltitle: string = '';

  frases: {[key:string]: string}  = {
    'additionaltitle': $localize`:Here is a title to translate@@AppComponent.title-to-translate:Here is a title to translate`,
  };

  constructor() { 
    this.additionaltitle = this.frases['additionaltitle'];
  }

}

• in the following files
  • \ang-monorepo\projects\shell\src\app\app.component.html
  • \ang-monorepo\projects\mfe1\src\app\components\md11\master11\master11.component.html
  • \ang-monorepo\projects\mfe1\src\app\components\md12\master12\master12.component.html
  • \ang-monorepo\projects\mfe2\src\app\components\md21\master21\master21.component.html
• we add html as below

<p>{{additionaltitle}}</p>

• try to start the app with the command

ng serve -o --project mfe2

• The error will be shown

Error: projects/mfe2/src/app/components/md21/master21/master21.component.ts:13:24 - error TS2304: Cannot find name '$localize'.
13     'additionaltitle': $localize`:Here is a title to translate@@Master21Component.title-to-translate:Here is a title to translate`,
                          ~~~~~~~~~
** Angular Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **
× Failed to compile.

• read the article first $localize Global Import Migration
• in the polyfills.ts file of each project (shell, mfe1 and mfe2) add the line:

import '@angular/localize/init';

• Note: We can start each app but we took lots of exceptions
  • here are a couple of them

Uncaught Error: Shared module is not available for eager consumption: 7017
    at __webpack_require__.m.<computed> (consumes:148:1)
    at __webpack_require__ (bootstrap:19:1)
    at 9321 (init.mjs:18:1)
    at __webpack_require__ (bootstrap:19:1)
    at 6344 (zone.js:2778:1)
    at __webpack_require__ (bootstrap:19:1)
    at 425 (polyfills.js:12:80)
    at __webpack_require__ (bootstrap:19:1)
    at startup:5:1

core.mjs:6406 
        
       ERROR Error: Uncaught (in promise): Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
    at _global.$localize (core.mjs:29876:15)
    at new Master11Component (master11.component.ts:12:33)
    at NodeInjectorFactory.Master11Component_Factory [as factory] (master11.component.ts:18:4)
    at getNodeInjectable (core.mjs:3618:44)
    at instantiateRootComponent (core.mjs:12424:23)
    at createRootComponent (core.mjs:13982:23)
    at ComponentFactory.create (core.mjs:22303:25)
    at ViewContainerRef.createComponent (core.mjs:23574:47)
    at RouterOutlet.activateWith (router.mjs:2326:39)
    at ActivateRoutes.activateRoutes (router.mjs:2752:40)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26510:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)

• our next step is to modify \ang-monorepo\angular.json file for localize.
  • we need to repeat all the steps of the article Modify angular json for our three subprojects.

• open \ang-monorepo\angular.json file and make the following changes

• projects:mfe1
• projects:mfe2
• projects:shell
• and json fragment

			"i18n": {
				"sourceLocale": {
					"code": "en",
					"baseHref": ""
				},				
				"locales": {
				  "ru": {
					"translation": "projects/mfe1/src/locale/messages.ru.xlf",
					"baseHref": ""
				  }
				}
			}

			"i18n": {
				"sourceLocale": {
					"code": "en",
					"baseHref": ""
				},				
				"locales": {
				  "ru": {
					"translation": "projects/mfe2/src/locale/messages.ru.xlf",
					"baseHref": ""
				  }
				}
			}

			"i18n": {
				"sourceLocale": {
					"code": "en",
					"baseHref": ""
				},				
				"locales": {
				  "ru": {
					"translation": "projects/shell/src/locale/messages.ru.xlf",
					"baseHref": ""
				  }
				}
			}

• Note: messages.ru.xlf file we will create later

• projects:mfe1:architect:build:options
• projects:mfe2:architect:build:options
• projects:shell:architect:build:options
• and json fragment

"localize": true,
"aot": true,

• projects:mfe1:architect:build:configurations:development
• projects:mfe2:architect:build:configurations:development
• projects:shell:architect:build:configurations:development
• and json fragment

"localize": false,

• projects:mfe1:architect:build:configurations
• projects:mfe2:architect:build:configurations
• projects:shell:architect:build:configurations
• and json fragment

            "ru": {
              "localize": ["ru"]
            },
            "en": {
              "localize": ["en"]
            }            

• projects:mfe1:architect:serve:configurations
  • and json fragment

            "ru": {
              "browserTarget": "mfe1:build:development,ru"
            },
            "en": {
              "browserTarget": "mfe1:build:development,en"
            }

• projects:mfe2:architect:serve:configurations
  • and json fragment

            "ru": {
              "browserTarget": "mfe2:build:development,ru"
            },
            "en": {
              "browserTarget": "mfe2:build:development,en"
            }

• projects:shell:architect:serve:configurations
  • and json fragment

            "ru": {
              "browserTarget": "shell:build:development,ru"
            },
            "en": {
              "browserTarget": "shell:build:development,en"
            }

• run the commands (You need to use three terminals for this)

ng serve -o --project mfe1 --configuration=en
ng serve -o --project mfe2 --configuration=en
ng serve -o --project shell --configuration=en

• the only one error is shown in the terminal.
  • read the paragraph Module federation Issue

Uncaught SyntaxError: Cannot use 'import.meta' outside a module  styles.js:7831
index.js:551 [webpack-dev-server] Live Reloading enabled.
index.js:551 [webpack-dev-server] Live Reloading enabled.
core.mjs:25867 Angular is running in development mode. Call enableProdMode() to enable production mode.
index.js:551 [webpack-dev-server] Live Reloading enabled.
index.js:551 [webpack-dev-server] Live Reloading enabled.

• run the commands

ng extract-i18n --project mfe1 --output-path projects/mfe1/src/locale
ng extract-i18n --project mfe2 --output-path projects/mfe2/src/locale
ng extract-i18n --project shell --output-path projects/shell/src/locale

• install the tool

npm install -g xlf-auto-translate

• run the commands

xlf-auto-translate -i projects/mfe1/src/locale/messages.xlf -o projects/mfe1/src/locale/messages.ru.xlf -f en -t ru
xlf-auto-translate -i projects/mfe2/src/locale/messages.xlf -o projects/mfe2/src/locale/messages.ru.xlf -f en -t ru
xlf-auto-translate -i projects/shell/src/locale/messages.xlf -o projects/shell/src/locale/messages.ru.xlf -f en -t ru

• run the commands (You need to use three terminals for this)

ng serve -o --project mfe1 --configuration=ru
ng serve -o --project mfe2 --configuration=ru
ng serve -o --project shell --configuration=ru

• It works
  • here is a result:

• the error is present in the console: Module federation Issue

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

• modify the body of the \ang-monorepo\projects\share-lib\src\lib\share-lib.service.ts file as shown below

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ShareLibService {

  frases: {[key:string]: string}  = {
    'thisIsText': $localize`:This is the text from share servive@@ShareLibService.This-is-the-text:This is the text from share servive`,
  };


  constructor() { }
  public getText(): string {
    return this.frases['thisIsText'];
  }

  protected commonData: string = '';
  public GetCommonData(): string {
    return this.commonData;
  }
  public SetCommonData(s: string): void {
    this.commonData = s;
  }

}

• run the command

ng build --project share-lib

• we took an error

PS E:\ang-monorepo> ng build --project share-lib
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'share-lib'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/share-lib/src/lib/share-lib.service.ts:9:19 - error TS2304: Cannot find name '$localize'.

9     'thisIsText': $localize`:This is the text from share servive@@ShareLibService.This-is-the-text:This is the text from share servive`,
                    ~~~~~~~~~
PS E:\ang-monorepo>
- [ Modify Shared service

• we have no polyfills.ts file in the share-lib
  • instead we use public-api.ts.
• Open the \ang-monorepo\projects\share-lib\src\public-api.ts file and modify as follows

/*
 * Public API Surface of share-lib
 */

import '@angular/localize/init';

export * from './lib/share-lib.service';
export * from './lib/share-lib.component';
export * from './lib/share-lib.module';

• save and run the command

ng build --project share-lib

• modify \ang-monorepo\projects\shell\src\app\app.component.ts as follows

import { Component } from '@angular/core';
import { ShareLibService } from 'share-lib';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'shell';

  additionaltitle: string = '';

  frases: {[key:string]: string}  = {
    'additionaltitle': $localize`:Here is a title to translate@@AppComponent.title-to-translate:Here is a title to translate`,
  };

  constructor(protected srv: ShareLibService) { 
    srv.SetCommonData('the string is added in the AppComponent');
    this.additionaltitle = this.frases['additionaltitle'] + ' ::: ' + srv.getText();
  }

}

modify the \ang-monorepo\projects\mfe1\src\app\components\md11\master11\master11.component.ts file

import { Component, OnInit } from '@angular/core';
import { ShareLibService } from 'share-lib';

@Component({
  selector: 'app-master11',
  templateUrl: './master11.component.html',
  styleUrls: ['./master11.component.css']
})
export class Master11Component implements OnInit {

  additionaltitle: string = '';
  frases: {[key:string]: string}  = {
    'additionaltitle': $localize`:Here is a title to translate@@Master11Component.title-to-translate:Here is a title to translate`,
  };
  constructor(protected srv: ShareLibService) { 
    this.additionaltitle = this.frases['additionaltitle'] + ' ::: ' + srv.getText() + ' ::: ' + srv.GetCommonData();
  }
  ngOnInit(): void {
  }
}

• run the commands

ng extract-i18n --project mfe1 --output-path projects/mfe1/src/locale
ng extract-i18n --project mfe2 --output-path projects/mfe2/src/locale
ng extract-i18n --project shell --output-path projects/shell/src/locale

xlf-auto-translate -i projects/mfe1/src/locale/messages.xlf -o projects/mfe1/src/locale/messages.ru.xlf -f en -t ru
xlf-auto-translate -i projects/mfe2/src/locale/messages.xlf -o projects/mfe2/src/locale/messages.ru.xlf -f en -t ru
xlf-auto-translate -i projects/shell/src/locale/messages.xlf -o projects/shell/src/locale/messages.ru.xlf -f en -t ru

• run the commands

ng serve -o --project mfe1 --configuration=ru
ng serve -o --project mfe2 --configuration=ru
ng serve -o --project shell --configuration=ru

• navigate to master01
• it works
  • here is a result

• the error is present in the console: Module federation Issue

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

• run the command

ng build --project mfe1

• The following build error will be shown

PS E:\ang-monorepo> ng build --project mfe1   
✔ Browser application bundle generation complete.
✖ Localized bundle generation failed: Cannot assign to read only property 'message' of object 'SyntaxError: import.meta may appear only with 'sourceType: "module"' (1:3681)        
An error occurred inlining file "main.af7a6c95807649d3.js"
PS E:\ang-monorepo> 

• we are not first
  • read the last message

• read the article High Level libraries
• for each project (mfe1, mfe2, shell) we changed the tsconfig.app.json file
  • we replaced "target": "es2020" with "target": "ES2019"
• all final files are as follows:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": [],
    "target": "ES2019"
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

• after that we have no error at build time with the commands

ng build --project mfe1   
ng build --project mfe2
ng build --project shell

• Note: after replacing "target": "es2020" with "target": "ES2019" apps works in dev mode
  • we mean: apps started with a commands

ng serve -o --project mfe1 --configuration=ru
ng serve -o --project mfe2 --configuration=ru
ng serve -o --project shell --configuration=ru

• Note: after replacing "target": "es2020" with "target": "ES2019"
  • the error is present in the console: Module federation Issue

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

• Note: read the article ng build localize with module federation