在打字稿中导入模块期间未指定 .js 扩展名时抛出错误 404

Question

我遵循了 angular2 教程 https://angular.io/docs/ts/latest/tutorial/。我不想运行在 node.js 精简服务器下，而是在 django 下。

我设法完成了它及其工作但是：每次我导入任何 angular 模块时，例如。在 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 不是 main.

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

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

或

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

它突然工作了，但是 ts 到 js 编译器 (npm 运行 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 %}

我检查了这个但它对我没有帮助。

有人有想法吗？

Answer 1

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

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

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

在打字稿中导入模块期间未指定 .js 扩展名时抛出错误 404

Error 404 is thrown, when .js extension is not specified during modul import in typescript

django

typescript

systemjs

angular