Angular 12 将 json 导入 ts
Angular 12 import json into ts
我在 src/assets/version.json
中有一个 json 文件,内容如下:
{"VERSION":"1.0.0"}
然后我将文件导入*.ts
,例如:
import * as VersionInfo from 'src/assets/version.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
console.log(`version ${VersionInfo['VERSION']}`);
}
}
产出
version 1.0.0
这适用于 Angular 11 但在 Angular 12 CLI 显示错误
Should not import the named export 'VERSION' (imported as 'VersionInfo') from default-exporting module (only default export is available soon)
这是我的tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"strictPropertyInitialization": false,
"baseUrl": "./",
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"experimentalDecorators": true,
"noImplicitAny": false,
"target": "es2015",
"resolveJsonModule": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"jszip": [
"node_modules/jszip/dist/jszip.min.js"
]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictTemplates": true,
"strictInjectionParameters": true
},
}
如何解决这个错误?
您可以在 tsconfig.json
中尝试:
"compilerOptions": { "allowSyntheticDefaultImports":true }
并导入:
import VersionInfo from 'src/assets/version.json';
以下应放在tsconfig.json
{
...
"compilerOptions": {
...
"resolveJsonModule": true, //already there
"esModuleInterop": true,
"allowSyntheticDefaultImports": true // Add this line
...
},
...
}
然后只需在您的组件中导入以下内容
import VersionInfo from 'src/assets/version.json';
import { default as VersionInfo } from 'src/assets/version.json';
您还需要上面提到的两个 tsconfig 条目。
我在 src/assets/version.json
中有一个 json 文件,内容如下:
{"VERSION":"1.0.0"}
然后我将文件导入*.ts
,例如:
import * as VersionInfo from 'src/assets/version.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
console.log(`version ${VersionInfo['VERSION']}`);
}
}
产出
version 1.0.0
这适用于 Angular 11 但在 Angular 12 CLI 显示错误
Should not import the named export 'VERSION' (imported as 'VersionInfo') from default-exporting module (only default export is available soon)
这是我的tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"strictPropertyInitialization": false,
"baseUrl": "./",
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"experimentalDecorators": true,
"noImplicitAny": false,
"target": "es2015",
"resolveJsonModule": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
],
"paths": {
"jszip": [
"node_modules/jszip/dist/jszip.min.js"
]
}
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictTemplates": true,
"strictInjectionParameters": true
},
}
如何解决这个错误?
您可以在 tsconfig.json
中尝试:
"compilerOptions": { "allowSyntheticDefaultImports":true }
并导入:
import VersionInfo from 'src/assets/version.json';
以下应放在tsconfig.json
{
...
"compilerOptions": {
...
"resolveJsonModule": true, //already there
"esModuleInterop": true,
"allowSyntheticDefaultImports": true // Add this line
...
},
...
}
然后只需在您的组件中导入以下内容
import VersionInfo from 'src/assets/version.json';
import { default as VersionInfo } from 'src/assets/version.json';
您还需要上面提到的两个 tsconfig 条目。