默认扩展不起作用 - SystemJS答案

【问题标题】：Default Extension Not Working - SystemJS默认扩展不起作用 - SystemJS
【发布时间】：2016-04-08 15:55:12
【问题描述】：

所以我正在开发一个 NG2 + Typescript + SystemJS 项目 - 我遵循了官方的 angular quick start 并且我的项目运行良好......直到我使用 Gulp 编译 TS 并将源代码移动到 dist 目录.目录结构如下：

默认情况下，TS 编译器在 app 中的 src 文件旁边输出 JS 文件，并且该站点运行良好。但是，我将它配置为输出到 dist 中，如上所示，现在它不起作用。看起来它可以在 dist 中找到 main.js，但找不到其他文件，例如 dist/services/*，看起来原因是 SystemJS 没有添加“js”的默认扩展名。

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 时，如上所述，它会失败。

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

【问题讨论】：

你能从你使用服务的地方（app目录下的.ts文件）发布一个示例导入语句吗？此外，当使用 defaultExtension 属性时，您不需要 defaultJSExtension 之一。

标签： typescript angular systemjs

【解决方案1】：

看来你的项目结构和我的项目一样，我已经像这样配置了我的项目设置 -

<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

【讨论】：