CODEWITHSUNDEEP
angularsystemjs
runtimeZero
runtimeZero

Reputation: 28076

Loading angular2 library using systemJs

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>

Upvotes: 3

Views: 465

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202176

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.

Upvotes: 1

Related Questions