Search code examples
djangotypescriptangularsystemjs

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

I followed angular2 tutorial https://angular.io/docs/ts/latest/tutorial/. I didnt want it run under node.js lite-server, but under django.

I managed to finish it and its working BUT: everytime I import any angular module eg. in index.html:

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

or in main.ts:

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

or everywhere, javascript application is trying to load some js resource like static/dist/js/main file which doesnt exist of course, because the compiled file is named main.js not main.

When I add the extensions '.js' like:

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

or

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

It suddenly works, but ts to js compiler (npm run tsc) is throwing error (even throught its compiling) and my IDE is underlining imports as errors.

This is my full 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 %}

I checked this Angular2 Typescript app throws 404 on components when js extension not specified but it didnt helped me.

Does anyone have an idea, please?

Solution

  • Assuming you have configured tsc to output your code to the 'static/dist/js' folder you should be able to configure Systemjs like this:

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

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