当 typescript 中的模块导入期间未指定 .js 扩展名时，抛出错误 404答案

【问题标题】：Error 404 is thrown, when .js extension is not specified during modul import in typescript当 typescript 中的模块导入期间未指定 .js 扩展名时，抛出错误 404
【发布时间】：2016-03-09 21:41:18
【问题描述】：

我遵循了 angular2 教程https://angular.io/docs/ts/latest/tutorial/。我不希望它在 node.js lite-server 下运行，而是在 django 下运行。

我设法完成了它及其工作但是：每次我导入任何角度模块时，例如。在 index.html 中：

System.import('static/dist/js/main')
            .then(null, console.error.bind(console));

或在 main.ts 中：

import {AppComponent} from './app.component'

或在任何地方，javascript 应用程序正在尝试加载一些 js 资源，例如 static/dist/js/main 文件，当然这些文件不存在，因为编译后的文件名为 main.js 而不是 主要的。

当我添加扩展名“.js”时：

System.import('static/dist/js/main.js')
                .then(null, console.error.bind(console));

或

import {AppComponent} from './app.component.js'

它突然可以工作了，但是 ts 到 js 编译器 (npm run tsc) 抛出错误（甚至通过它的编译），我的 IDE 将导入作为错误下划线。

这是我的完整 index.html：

{% verbatim %}
<html>
  <head>
      <base href="/">
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="static/node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="static/node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="static/node_modules/systemjs/dist/system.src.js"></script>
    <script src="static/node_modules/rxjs/bundles/Rx.js"></script>
    <script src="static/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="static/node_modules/angular2/bundles/router.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('static/dist/js/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
{% endverbatim %}

我检查了这个Angular2 Typescript app throws 404 on components when js extension not specified，但它没有帮助我。

请问有人有意见吗？

【问题讨论】：

标签： django typescript angular systemjs

【解决方案1】：

假设您已将 tsc 配置为将代码输出到“static/dist/js”文件夹，您应该能够像这样配置 Systemjs：

  <script>
        System.defaultJSExtensions = true;
        System.config({
            baseURL: "./static/dist/js"
        });

        System.import("main")
    </script>

【讨论】：

非常感谢，就是这样！