SystemJS :로드 빌드 파일

내 SystemJS 파일은 다음과 같다 :이에서SystemJS :로드 빌드 파일

(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'angular2-boot':    'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
// 'app':      { main: 'js/main.js', defaultExtension: 'js' }, 
    'app':      { main: 'dist/build.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
    ... 
    ]; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(function(pkgName) { 
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; 
    }); 
    var config = { 
    map: map, 
    packages: packages 
    }; 
    System.config(config); 
})(this);

나는 tsconfig.js에서 OUTDIR 옵션을 다른 디렉토리에 내 타이프 라이터를 transpiled 및 패키지에 주요 사용하는 것을 언급 '의 JS/main.js '잘 작동합니다.

그러나 내가 outFile 옵션을 사용하여 단일 파일로 변환하려고 시도했을 때 main : 'dist/build.js'를 사용하여 해당 파일을 참조했습니다. 페이지를 렌더링하지 않으며 콘솔에 오류가 표시되지 않습니다.

내 index.html을은 다음과 같습니다

<html> 
<head> 
    <title>Angular 2 QuickStart</title> 
    <base href="/"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="app/css/styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('angular2-boot').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<!-- 3. Display the application --> 
<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

내 tsconfig.js 파일은 다음과 같다 :

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "amd", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "app/js", 
    "outFile": "app/dist/build.js" 
    } 
}

그것은로드 말한다 ... 내가 페이지를로드 할 때. SystemJS를 사용하여 단일 출력 파일을로드하려면 어떻게해야합니까?

출처

2016-09-27 would_like_to_be_anon

파일이로드되지 않은 것 같아서 브라우저의 네트워크 탭을 확인하십시오. – WiredPrairie

build.js가로드되는 것을 볼 수 있습니다. 200 개의 반환 코드가 있으며 build.js 소스도 볼 수 있습니다. –

단일 파일로 이동하면 '번들'이라는 특수 형식의 파일이 생성됩니다. 가져올 때, 그 안에있는 모든 모듈이로드되고 SystemJS에 등록되지만 아무 것도 실행되지 않습니다. 번들이로드 된 후 그래서, 당신은 다음과 같이 실제로 응용 프로그램을 시작할 것 index.html에서 두 번째 가져 오기를 추가해야합니다

는

System.import('app/dist/build.js').then(function() { 
     System.import('main'); 
    }) 
    .catch(function(err){ console.error(err); });

이 코드는 번들로드 명시 적 경로를 사용 app/dist/build.js를 한 다음로드 모듈의 이름은 main이며 define에 주어진 모듈 이름과 정확하게 일치해야하기 때문입니다. 따라서이 코드의 내용 중 angular-boot 또는 app 패키지는 systemjs.config.js에 정의되어 있으므로이 파일에서 변경할 필요가 없습니다.

일반 <script> 태그가있는 번들을로드 할 수도 있습니다. 그 다음에는 System.import('main') 한 개만 필요합니다.

출처

2016-09-28 06:45:27 artem

답변

관련 문제