Merge pull request #124 from lephyrus/ngx-translate-v17

Support ngx-translate v17

Author: lephyrus

.github/workflows/build.yaml

@@ -23,6 +23,8 @@ jobs:
         run: npm ci
       - name: Lint
         run: npm run lint
+      - name: Check formatting
+        run: npm run format
       - name: Test
         run: npm run test
       - name: Build for production

CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [7.2.0] - 2025-08-03
+
+### Added
+
+- Support ngx-translate v17 (#122)
+
+### Changed
+
+- Migrate docs and example app to standalone bootstrapping and provider
+  functions
+
 ## [7.1.0] - 2024-12-29
 
 ### Added

README.md

@@ -4,7 +4,7 @@
 
 [![npm version](https://badge.fury.io/js/ngx-translate-messageformat-compiler.svg)](https://www.npmjs.com/package/ngx-translate-messageformat-compiler) ![build](https://github.com/lephyrus/ngx-translate-messageformat-compiler/workflows/build/badge.svg) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
-**[Example App](https://stackblitz.com/edit/ngx-translate-messageformat-compiler-example)** (StackBlitz)
+**[Example App](https://stackblitz.com/edit/stackblitz-starters-bunksjia?file=src%2Fapp%2Fapp.component.ts)** (StackBlitz)
 
 ## Table of Contents
 
@@ -31,34 +31,41 @@ In the current version, this library supports Angular versions 13+, ngx-translat
 
 ### Integration with ngx-translate
 
-You need to configure `TranslateModule` so it uses `TranslateMessageFormatCompiler` as the compiler:
+You need to provide `TranslateMessageFormatCompiler` as the compiler:
 
 ```ts
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { TranslateCompiler, TranslateModule } from "@ngx-translate/core";
-import { TranslateMessageFormatCompiler } from "ngx-translate-messageformat-compiler";
-
-import { AppComponent } from "./app";
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    TranslateModule.forRoot({
-      compiler: {
-        provide: TranslateCompiler,
-        useClass: TranslateMessageFormatCompiler,
-      },
+import { bootstrapApplication } from "@angular/platform-browser";
+
+import {
+  provideTranslateCompiler,
+  provideTranslateService,
+} from "@ngx-translate/core";
+import {
+  TranslateMessageFormatCompiler,
+  MESSAGE_FORMAT_CONFIG,
+} from "ngx-translate-messageformat-compiler";
+
+import { MyAppComponent } from "./my-app.component";
+
+bootstrapApplication(MyAppComponent, {
+  providers: [
+    provideTranslateService({
+      compiler: provideTranslateCompiler(TranslateMessageFormatCompiler),
     }),
+    // injecting a config is optional, and any values provided here will
+    // override the defaults (see below)
+    {
+      provide: MESSAGE_FORMAT_CONFIG,
+      useValue: {
+        throwOnError: true,
+        formatters: { upcase: (v) => v.toUpperCase() },
+      },
+    },
   ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+});
 ```
 
-Check the [ngx-translate documentation](https://ngx-translate.org/reference/configuration/#standalone-components) for an example when using a "standalone" setup.
-
-You can override the values used when configuring MessageFormat by providing a configuration object for the `MESSAGE_FORMAT_CONFIG` injection token. Here's the default:
+You can override the values used by the plugin to configure MessageFormat by providing a configuration object for the `MESSAGE_FORMAT_CONFIG` injection token. Here's the default:
 
 ```ts
 {
@@ -76,22 +83,6 @@ You can override the values used when configuring MessageFormat by providing a c
 
 MessageFormat instances provide some options to influence its behaviour, among them `customFormatters`, `biDiSupport` and `strict`. Learn about their meaning here: <https://messageformat.github.io/messageformat/api/core.messageformatoptions/> (The names used in the MESSAGE_FORMAT_CONFIG object are slightly different for backward-compatibility reasons.)
 
-This is how you would enable bi-directional support and add a custom formatter, for example:
-
-```ts
-import { MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler';
-
-@NgModule({
-  // ...
-  providers: [{
-    provide: MESSAGE_FORMAT_CONFIG,
-    useValue: {
-      biDiSupport: true,
-      formatters: { upcase: v => v.toUpperCase() }
-    }
-  }]
-```
-
 ## Usage
 
 This library implements neither the syntax used for pluralization (et al) nor the "mechanics" for making translations work in your Angular app. The former is _MessageFormat_, the latter _ngx-translate_. Before you assume your problem is with _ngx-translate-messageformat-compiler_, please consult these ressources:
@@ -106,20 +97,7 @@ Here's two important differences to _ngx-translate_'s default syntax when using
 
 ### Transitioning from _ngx-translate_ default syntax to _MessageFormat_ syntax
 
-If you have to transition on a message-by-message basis, you can do so by configuring a prefix that, if found on the message, will cause the compiler to "ignore" the message. This has the effect of falling back on _ngx-translate_'s default message interpolation.
-
-```ts
-import { MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler';
-
-@NgModule({
-  // ...
-  providers: [{
-    provide: MESSAGE_FORMAT_CONFIG,
-    useValue: {
-      fallbackPrefix: 'your_choice::'
-    }
-  }]
-```
+If you have to transition on a message-by-message basis, you can do so by configuring a prefix that, if found on the message, will cause the compiler to "ignore" the message. This has the effect of falling back on _ngx-translate_'s default message interpolation. Set the prefix using `fallbackPrefix` in the configuration object, e.g. `fallbackPrefix: 'your_choice::'`.
 
 ```json
 {

angular.json

@@ -10,7 +10,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "tsConfig": "tsconfig.lib.json",
             "project": "ng-package.json"
@@ -22,7 +22,7 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
             "tsConfig": "tsconfig.spec.json",
@@ -32,19 +32,40 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "./**/*.ts",
-              "./**/*.html"
-            ]
+            "lintFilePatterns": ["./**/*.ts", "./**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
+    "schematicCollections": ["@angular-eslint/schematics"],
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

eslint.config.mjs

@@ -0,0 +1,43 @@
+import { globalIgnores } from "eslint/config";
+import js from "@eslint/js";
+import angularPlugin from "angular-eslint";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  globalIgnores(["**/dist"]),
+  js.configs.recommended,
+  tseslint.configs.recommendedTypeChecked,
+  tseslint.configs.strictTypeChecked,
+  angularPlugin.configs.tsRecommended,
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    files: ["**/*.{js,mjs,cjs}"],
+    extends: [tseslint.configs.disableTypeChecked],
+  },
+  {
+    rules: {
+      "@angular-eslint/prefer-inject": "warn",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "no-console": "error",
+    },
+  },
+  {
+    files: ["**/*.spec.ts"],
+    rules: {
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+    },
+  },
+);

karma.conf.js

@@ -10,15 +10,14 @@ module.exports = function (config) {
       require("karma-chrome-launcher"),
       require("karma-jasmine-html-reporter"),
       require("karma-coverage-istanbul-reporter"),
-      require("@angular-devkit/build-angular/plugins/karma"),
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require("path").join(
         __dirname,
-        "../../coverage/ngx-translate-messageformat-compiler"
+        "../../coverage/ngx-translate-messageformat-compiler",
       ),
       reports: ["html", "lcovonly", "text-summary"],
       fixWebpackSourcePaths: true,