默认扩展程序不起作用 - SystemJS

时间:2016-04-08 15:55:12

标签: typescript angular systemjs

所以我正在开发一个NG2 + Typescript + SystemJS项目 - 我已经按照官方的角度快速启动,我的项目工作正常......直到我使用Gulp编译TS并移动源代码到dist目录。这是目录结构:

enter image description here

默认情况下,TS编译器将JS文件与app中的src文件一起输出,并且该站点工作正常。但是,我将其配置为输出到dist,如上所示,现在它不起作用。似乎它可以在dist中找到main.js,但它找不到其他文件,例如dist / services / *,看起来原因是SystemJS没有添加" js"的默认扩展名。

enter image description here

的index.html   

<base href="/">

<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">   

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> 
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

<link rel="stylesheet" href="styles/structure.css">

<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/skins/minimal.css">
<link rel="stylesheet" href="styles/skins/usb.css">

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {        
      dist: {
        format: 'register',
        defaultExtension: 'js',
        defaultJSExtension: true
      }
    }
  });

  System.import('dist/main')
        .then(null, console.error.bind(console));
</script>

          载入中...   

请注意,当我把:

  System.import('app/main')
        .then(null, console.error.bind(console));

并将编译器设置为与源文件一起输出,这一切都很有效。但是当我将导入切换到dist / main时,它会失败,如上所述。

如何在这种情况下让SystemJS添加默认的JS扩展?

1 个答案:

答案 0 :(得分:3)

似乎你的项目结构与我的项目相同,我已经配置了我的项目设置 -

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
    System.config({
                defaultJSExtensions: true,
                 map: {
                    rxjs: 'node_modules/rxjs'
                },
                packages: {
                    rxjs: {
                    defaultExtension: 'js'
                }
                }
            });
</script>

<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script>
    System.import('dist/app');
</script>

请参阅此回购希望,这可能会对您有所帮助 -

  

https://github.com/MrPardeep/Angular2-DatePicker