Блог

Главная - Вопросы по программированию - Проблема Angular environment.ts в формате JSON. Однако environment.prod.ts

Проблема Angular environment.ts в формате JSON. Однако environment.prod.ts

#json #angular #typescript #environment

#json #angular #машинопись #Окружающая среда

Вопрос:

У меня проблема с импортом файлов json в typescript. Я настроил файл tsconfig.json в соответствии с соглашением, но он по-прежнему не работает в файле environment.ts, однако в файле environment.prod.ts импорт работает отлично

 environment.ts

import { domain, clientId, audience, serverUrl } from '../../auth_config.json';

export const environment = {
  production: false,
  auth: {
    domain,
    clientId,
    redirectUri: window.location.origin,
    audience,
  },
  dev: {
    serverUrl,
  },
};

ОШИБКА —>
Не удается найти модуль ‘../../auth_config.json’. Рассмотрите возможность использования ‘—resolveJsonModule’ для импорта модуля с расширением ‘.json’ (2732)

environment.prod.ts

 import { domain, clientId, audience, serverUrl } from '../../auth_config.json';

export const environment = {
  production: true,
  auth: {
    domain,
    clientId,
    redirectUri: window.location.origin,
    audience,
  },
  dev: {
    serverUrl,
  },
};

Все работает нормально.

Мой файл tsconfig.json

 "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
    
  ],
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
     "strict": true,
     "resolveJsonModule": true,
     "esModuleInterop": true
     

    
  },

  
}

Я несколько дней, не найдя причины. Спасибо.

Ответ №1:

Здесь вы можете увидеть ошибку. Теперь отметьте это в консоли, но не в файле.

введите описание изображения здесь

Комментарии:

1. Перезагрузил EVC и продолжил с той же проблемой. У меня такое ощущение, что это проблема EVC. Я продолжаю учиться.

Ответ №2:

Только что столкнулся с подобной проблемой и нашел решение на typescriptlang.org . Вам необходимо включить следующую опцию:

resolveJsonModule — позволяет импортировать модули с расширением ‘.json’, что является обычной практикой в проектах узлов. Это включает в себя создание типа для импорта на основе статической формы JSON. TypeScript по умолчанию не поддерживает разрешение файлов JSON.

Поэтому включение этой опции в вашем tsconfig.json в разделе compilerOptions должно выполнить эту работу:

 "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
    
  ],
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
     "strict": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "resolveJsonModule": true
  },      
}

Возможно, вам также необходимо включить allowSyntheticDefaultImports, чтобы избежать ошибок eslint.