System config defaultExtension not working for Django

问题

I am trying to port angular 2 tutorial with Django backend

Here is my html file

<html>
  <head>
    <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/main.js"></script>
    <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>

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

 <!-- 3. Display the application -->
  <body>

    <my-app>Loading...</my-app>

  </body>
</html>

I found out that System.js is not working in

System.import('/static/app/main')

I have to use

System.import('/static/app/main.js')

and add .js manually to all my non 3rd libraries import for the angular app to work.

The interesting thing about this is that I don't have to add .js to

'angular2/core'
'angular2/platform/browser'

since System.js automatically resolves the import as long as I add .js extension manually to all the import for files I wrote.

But if I set

System.defaultJSExtensions = true;

I dont' have to add .js to my files anymore but System.js loses its capability to import all libraries in node_modules and instead try to use default django dir

http://localhost:8000/myApp/angular2/platform/browser.js

Can someone give me some guidance?

Thanks

回答1:

I think you misunderstand what defaultJSExtensions configures. The latter simply allows to add the js extension when importing modules:

System.defaultJSExtensions = true;

// requests ./some/module.js instead
System.import('./some/module');

This applies if the module wasn't previously and explicitly registered using System.register.

The angular2.dev.js file contains modules for Angular2 core (registered explicitly with System.register). Including the file with a script element simply makes them available for imports.

If you want to use instead single JS files of Angular2 from node_modules/angular2 (for example core.js, ...), you need this SystemJS configuration:

System.config({
  defaultJSExtensions: true,
  map: {
    angular2: 'node_modules/angular2/src',
    rxjs: 'node_modules/rxjs'
  },
  packages: {
    app: {
      defaultExtension: 'js',
      format: 'register'
    }
  }
});
System.import('app/boot')
  .then(null, console.error.bind(console));

What is important above is the map block to tell SystemJS where to find modules with names that start for example by angular2/.

In this case, no need to import Angular2 bundled JS files (angular2.min.js, ...).

来源：https://stackoverflow.com/questions/35813233/system-config-defaultextension-not-working-for-django

标签

javascript

angularjs

django

angular

systemjs