96252: Transform .json5 to .json in Webpack

This allows us to get rid of the json5 dependency in the main bundle and reduces the size of the i18n files we serve a bit

src/modules/app/browser-app.module.ts

@@ -35,7 +35,7 @@ import { BrowserInitService } from './browser-init.service';
 export const REQ_KEY = makeStateKey<string>('req');
 
 export function createTranslateLoader(transferState: TransferState, http: HttpClient) {
-  return new TranslateBrowserLoader(transferState, http, 'assets/i18n/', '.json5');
+  return new TranslateBrowserLoader(transferState, http, 'assets/i18n/', '.json');
 }
 
 export function getRequest(transferState: TransferState): any {

src/modules/app/server-app.module.ts

@@ -31,7 +31,7 @@ import { ServerAuthRequestService } from '../../app/core/auth/server-auth-reques
 import { ServerInitService } from './server-init.service';
 
 export function createTranslateLoader(transferState: TransferState) {
-  return new TranslateServerLoader(transferState, 'dist/server/assets/i18n/', '.json5');
+  return new TranslateServerLoader(transferState, 'dist/server/assets/i18n/', '.json');
 }
 
 @NgModule({

src/ngx-translate-loaders/translate-browser.loader.ts

@@ -5,7 +5,6 @@ import { NGX_TRANSLATE_STATE, NgxTranslateState } from './ngx-translate-state';
 import { hasValue } from '../app/shared/empty.util';
 import { map } from 'rxjs/operators';
 import { of as observableOf, Observable } from 'rxjs';
-import * as JSON5 from 'json5';
 
 /**
  * A TranslateLoader for ngx-translate to retrieve i18n messages from the TransferState, or download
@@ -37,7 +36,7 @@ export class TranslateBrowserLoader implements TranslateLoader {
       // If they're not available on the transfer state (e.g. when running in dev mode), retrieve
       // them using HttpClient
       return this.http.get('' + this.prefix + lang + this.suffix, { responseType: 'text' }).pipe(
-        map((json: any) => JSON5.parse(json))
+        map((json: any) => JSON.parse(json))
       );
     }
   }

src/ngx-translate-loaders/translate-server.loader.ts

@@ -4,8 +4,6 @@ import * as fs from 'fs';
 import { TransferState } from '@angular/platform-browser';
 import { NGX_TRANSLATE_STATE, NgxTranslateState } from './ngx-translate-state';
 
-const JSON5 = require('json5').default;
-
 /**
  * A TranslateLoader for ngx-translate to parse json5 files server-side, and store them in the
  * TransferState
@@ -26,7 +24,7 @@ export class TranslateServerLoader implements TranslateLoader {
    */
   public getTranslation(lang: string): Observable<any> {
     // Retrieve the file for the given language, and parse it
-    const messages = JSON5.parse(fs.readFileSync(`${this.prefix}${lang}${this.suffix}`, 'utf8'));
+    const messages = JSON.parse(fs.readFileSync(`${this.prefix}${lang}${this.suffix}`, 'utf8'));
     // Store the parsed messages in the transfer state so they'll be available immediately when the
     // app loads on the client
     this.storeInTransferState(lang, messages);

webpack/webpack.browser.ts

@@ -13,14 +13,14 @@ module.exports = Object.assign({}, commonExports, {
     new CompressionPlugin({
       filename: '[path][base].gz',
       algorithm: 'gzip',
-      test: /\.(js|css|html|svg|json5)$/,
+      test: /\.(js|css|html|svg|json)$/,
       threshold: 10240,
       minRatio: 0.8,
     }),
     new CompressionPlugin({
       filename: '[path][base].br',
       algorithm: 'brotliCompress',
-      test: /\.(js|css|html|svg|json5)$/,
+      test: /\.(js|css|html|svg|json)$/,
       compressionOptions: {
         params: {
           [zlib.constants.BROTLI_PARAM_QUALITY]: 11,

webpack/webpack.common.ts

@@ -3,6 +3,7 @@ import { globalCSSImports, projectRoot } from './helpers';
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const sass = require('sass');
+const JSON5 = require('json5');
 
 export const copyWebpackOptions = {
   patterns: [
@@ -11,6 +12,20 @@ export const copyWebpackOptions = {
       to: path.join('assets', 'fonts'),
       force: undefined
     },
+    {
+      from: path.join(__dirname, '..', 'src', 'assets', '**', '*.json5').replace(/\\/g, '/'),
+      to({ absoluteFilename }) {
+        // use [\/|\\] to match both POSIX and Windows separators
+        const matches = absoluteFilename.match(/.*[\/|\\]assets[\/|\\](.+)\.json5$/);
+        if (matches) {
+          // matches[1] is the relative path from src/assets to the JSON5 file, without the extension
+          return path.join('assets', matches[1] + '.json');
+        }
+      },
+      transform(content) {
+        return JSON.stringify(JSON5.parse(content.toString()))
+      }
+    },
     {
       from: path.join(__dirname, '..', 'src', 'assets'),
       to: 'assets',