SystemJS import 시 Component 필요한 Argument 전달

SystemJS + Angular 환경에서 System.import를 사용하여 모듈을 로더하는 개발 중에 서버에서 가져온 데이터를 Client에 전달해야하는 일이 생겼습니다.

이런저런 검색을 통해 확인해본바 import의 Promise의 then function을 사용하면 된다고 하여 진행했습니다.

typescript 모듈 컴포넌트

interface IArguments {
	name: string;
}
export const arguments: IArguments = { name: '' };

...

export class ModuleComponent {
	name: string = arguments.name;
    
    ...
}

...

angular html template 

...
<span>{{name}}</span>
...

import 호출

System.import('ModuleComponent').then(module => {
	// 전달된 module argument는 
    // 'ModuleComponent' 컴포넌트에서 export 처리한 
    // classes, interfaces, variables 등등 리턴됨
    
    // component에서 export한 변수
    module.arguments.name = '관리자' // e.f) 서버에서 가져온 변수 X;
});

결과

'관리자' 화면 캡쳐