Using json modules in Angular 12

I hit an issue today after updating my v11 angular application to v12 caused by the (necessary and automated) upgrade of typescript to v4.2.4. The error concerned an import of a json file as a module:

Error: Should not import the named export 'credentials'.'clientId' (imported as 'auth') from default-exporting module (only default export is available soon)

I recently updated an Angular 6 application to version 11 and whilst this was not pretty or enjoyable, felt pretty good about being up-to-date. As part of this migration, I upgraded to using MSAL 2.0 for my authentication interception and in order to allow for a different set of Azure AD app registration settings in production, opted for a json file approach for holding the settings that could then be overwritten during the build process.

Here’s an example of such a json file:

{
  "credentials": {
    "clientId": "<client id>",
    "tenantId": "<aad tenantid>"
  },
  "configuration": {
    "redirectUri": "/",
    "postLogoutRedirectUri": "/home"
  },
  "resources": {
    "benbowApi": {
      "resourceUri": "api/*",
      "resourceScopes": [
        "api://<api-id>/api.access"
      ]
    }
  }
}

To enable this to be used within my typescript, I found out that I had to enable the import of json modules in my compilerOptions of tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "resolveJsonModule": true,
.... etc

This then allows you to import the json settings as a module:

import * as auth from './auth-config.json'
.....

let clientId = auth.credentials.clientId;

This works absolutely fine in v11.

However, when I updated the app to v12 this week, my build failed with the following errors:

I tried a number of approaches to resolve this but nothing worked until I changed the import slightly and received an error tool tip on my import as a result.

import  auth from './auth-config.json';

The error suggested I enable the ‘allowSyntheticDefaultImports’ which is another tsconfig compiler option.

Adding this in a setting it to true did indeed resolve my issue and allow me to build my app targeting v12 and typescript 4.2.4.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
.... etc