Webpack을 사용하여 JSON 파일을 통해 각도 구성

Question

내 각진 응용 프로그램은 JSON 파일로 구성됩니다. 나는하세요 HTTP를 통해로드하지만, 최근 정의 파일을 타이프 라이터로 JSON 지원을 추가하여 직접 포함하기로 결정했다 :

import * as config from '../config.json'; 

이 작품을 : 필요한 곳을 가져 오기 다음

declare module "*.json" { 
    const value: any; 
    export default value; 
} 

그리고 큰; config은 JSON 객체 자체입니다.

문제는 Webpack에 번들로 묶어서 JSON 파일을 패키지에 넣고 싶지만 번들로 묶지 말고 다른 파일과 번들로 묶지 말아야한다는 것입니다. 즉, config.json은 묶음이 아닌 패키지에있는 자체 파일이어야합니다. 다른 파일들.

module: {                  
    rules: [ 
    // ... 
    {                   
     test: /\.json$/,              
     loader: 'file-loader?name=[name].json'         
    }              
    // OR                  
    {                 
     test: /\.json$/,              
     loader: "move-file-loader?name=[name].json!json-loader"    
    } 
    // ... 
    ] 
} 

이가 번들로 제공되는 JSON 파일을 방지하고 내가 패키지에 원하는 장소를뿐만 아니라 config는 상대 경로가 될 수 있습니다 :

나는 file-loader과 move-file-loader와 함께이 일을 시도 JSON 파일 (예 : "./config.json")을 JSON 객체 자체가 아닌.

이유에 대한 의견이 있으십니까?

Answer 1

분명히 파일 로더는 파일 내용 자체가 아니라 파일이로드 된 위치로 경로를 방출합니다. 따라서

import * as config from '../config.json'; 

config을 파일 경로가 포함 된 문자열로 올바르게 만드는 것은 올바른 동작입니다.

move-file-loader에 관한 한, json-loader와 함께 사용하기 때문에 "이동 된"파일의 내용은 실제로 TypeScript 모듈 정의이고 아직 묶음이로드 된 것 같습니다 "복사 된"버전이 아닌 파일의 버전입니다.

이러한 통찰력은 다음과 같은 솔루션에 나를 인도 :

module: {                  
    rules: [ 
    // ... 
    {                   
     test: /\.json$/,              
     loader: 'file-loader?name=[name].json'         
    } 
    // ... 
    ] 
} 

그런 다음 우리가 파일에 의해 방출되는 파일 경로를 가져올 수 있습니다 : 우선, 우리는 웹팩 설정에서 파일 로더를 사용하여 JSON 파일을 복사합니다 -Loader TypeScript의 필수 구문을 사용합니다.

const configFile = require('../config.json'); 

이 가져 오기 방법에는 필자의 질문에서 언급 한 JSON 정의 파일이 필요하지 않습니다.

마지막으로, 우리는 HTTP GET을 통해 그 파일 로더 경로에서 파일을로드 할 수

config는 JSON 파일의 분석 내용입니다

http.get(configFile).map(res => res.json()).catch((error: any): any => { 
    // ... 
}).subscribe(config => { 
    // ... 
}); 

.

누군가가 HTTP없이이 작업을 수행하는 방법을 알고있는 경우를 대비해이 답변을 즉시 표시하지 않겠습니다.