I try to use the angular-l10n library in an angular library. How can I implement it in an library and use that library with translation in my project

[hschindler]

Hi, have you sample code, how to implement this library in an angualr library? My angular project and my custom angular library should both use the angular-l10n. The translation in the main project works. But how can I implement it in the library project? Is it possible that the library has it own translation fles in an assets folder?

I use angular version 9.

It would be great if you coukd help me.

[robisim74]

Hi,

• angular-l10n should only be initialized in the main app
• in the angular library, only the modules you need (like L10nTranslationModule) should be imported
• the translation files should be reachable and declared in the main app

If other scenarios work (like having assets and initializing angular-l10n services also in the angular library), they would only work out of the box.

[hschindler]

Thank you for your answer. I tried this already an got the error when accessing a view with library components: _"Uncaught (in promise): NullInjectorError: R3InjectorError(InputTerminalModule)[InjectionToken L10N_LOCALE -> InjectionToken L10N_LOCALE -> InjectionToken L10N_LOCALE -> InjectionToken L10N_LOCALE]: NullInjectorError: No provider for InjectionToken L10NLOCALE!"

Do you have some idea, what the reason is for this error? I have no Idea where I have to declare the provider for L10N_LOCALE and how.

[robisim74]

Please provide the steps to reproduce the problem.

And then: are you getting the error by running the app, or the library by itself (for example for testing)?

[hschindler]

I created an repository to show the problem: git@github.com:hschindler/LibraryDemo.git

I found out that including angula-l10n works if I add the library to the main project with "ng add library". If the library is an extra angular workspace, it will not work. I have provided both cases in the repository.

The directory Client App is the main app. In it under projects is the library. Additionally I have the library as a separate angular workspace in the directory "library".

You can change the configuration in "tsconfig.json" of the client app to test both variants. When you run the ClientApp with "ng serve" the translation works when using tsconfig entry: "my-lib": [ "dist/my-lib/" ],

The injection error occurs when using: "my-lib": [ "../library/dist/s-anywhere-web-ui-selection-dialogs-lib/" ],

I hope you can handle this.

[robisim74]

@hschindler The usual scenario is your ClientApp: the libraries and the app in the same workspace. And it works.

About the second scenario (the library in a separate workspace): I don't know if it can depend on this library, or on Angular itself.

There have already been such problems with Angular in the past when referencing an external project: see also #146

Need to investigate.

[robisim74]

As a workaround you could change the ng-package.json in library project:

"dest": "../../../ClientApp/dist/s-anywhere-web-ui-selection-dialogs-lib",

and then reference it in tsconfigas:

      "my-lib": [
        "dist/s-anywhere-web-ui-selection-dialogs-lib/"
      ],
      "my-lib/*": [
        "dist/s-anywhere-web-ui-selection-dialogs-lib/*"
      ]

Note: if the external library is packed, and installed in the ClientApp, it works.

[robisim74]

Closed due to inactivity

[dmdum]

Hi,

• angular-l10n should only be initialized in the main app
• in the angular library, only the modules you need (like L10nTranslationModule) should be imported
• the translation files should be reachable and declared in the main app

If other scenarios work (like having assets and initializing angular-l10n services also in the angular library), they would only work out of the box.

Is there an existing docs on how we can implement this? Particularly when used in standalone components in the library. I'm fairly new to Angular and I can't imagine how to implement this well quite just yet