Loading angular2 library using systemJs

Question

I was following the Angular2 quickstart guide from angular.io They utilize systemJs for app loading.

angular2, rx.js and angular2.dev.js are loaded via script reference instead of importing ..

Is there anyway to import these scripts ?

    <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>

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

  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>

Thierry Templier · Accepted Answer · 2016-03-21 08:25:43Z

1

Including the Angular2 bundles directly registers its packages using the System.register method.

That said you can also configure SystemJS to load Angular2 files by files for each modules using the following configuration but it's less efficient:

<script src="node_modules/es6-promise/dist/es6-promise.js"></script>
<script src="node_modules/es6-shim/es6-shim.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
  System.config({
    defaultJSExtensions: true,
    map: {
      angular2: 'node_modules/angular2/src',
      rxjs: 'node_modules/rxjs'
    },
    packages: {
      app: {
        defaultExtension: 'js',
        format: 'register'
      },
      angular2: {
        defaultExtension: 'js',
      }
    }
  });
  (...)
</script>

In both cases, it's possible to import corresponding modules (angular2/*, rxjs/*) in your application.

edited Mar 21, 2016 at 8:25

answered Mar 21, 2016 at 7:29

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cosmin Ababei Over a year ago

Why aren't you loading angular's polyfills from node_modules/angular2/bundles/angular2-polyfills.min.js?

Thierry Templier Over a year ago

Thanks very much @CosminAbabei for pointing this out! You're completely right. I updated my answer accordingly...

runtimeZero Over a year ago

This solution fails with the following error "system.src.js:1085 GET localhost:3000/node_modules/angular2/src/platform/browser.js " what i noticed is that there is no browser.js file in the platform folder

Thierry Templier Over a year ago

Sorry it's angular2: 'node_modules/angular2' instead of angular2: 'node_modules/angular2/src'

Collectives™ on Stack Overflow

Loading angular2 library using systemJs

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related