Questions tagged [systemjs]

Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts.

Designed as a small collection of extensions to the ES6 specification System loader, which can be applied individually or all together.

Features include:

  • Core: Some small fixes to the spec loader behavior.
  • Formats: Dynamically load AMD, CommonJS and global scripts (as well as ES6 modules) - detecting the format automatically, or with format hints.
  • Map: Map configuration.
  • Versions: Multi-version support for semver compatible version ranges (@^1.2.3 syntax).
  • Plugins: A dynamic plugin system for modular loading rules.
  • Bundles: Dynamically link requires to bundle files.

Designed to work with the ES6 Module Loader polyfill (15KB minified) for a combined footprint of 27KB. In future, with native implementations, the ES6 Module Loader polyfill should no longer be necessary. As jQuery provides for the DOM, this library can smooth over inconsistiencies and missing practical functionality provided by the native System loader.

Runs in the browser and NodeJS.


Useful links

1398 questions
397
votes
14 answers

How to bundle an Angular app for production

What is the best method to bundle Angular (version 2, 4, 6, ...) for production on a live web server. Please include the Angular version within answers so we can track better when it moves to later releases.
Pat M
  • 5,966
  • 7
  • 24
  • 34
384
votes
18 answers

Angular no provider for NameService

I've got a problem loading a class into an Angular component. I've been trying to solve it for a long time; I've even tried joining it all in a single file. What I have is: Application.ts ///
M.Svrcek
  • 5,485
  • 4
  • 25
  • 33
234
votes
3 answers

What are differences between SystemJS and Webpack?

I'm creating my first Angular application and I would figure out what is the role of the module loaders. Why we need them? I tried to search and search on Google and I can't understand why we need to install one of them to run our…
smartmouse
  • 13,912
  • 34
  • 100
  • 166
225
votes
19 answers

How do you deploy Angular apps?

How do you deploy Angular apps once they reach the production phase? All the guides I've seen so far (even on angular.io) are counting on a lite-server for serving and browserSync to reflect changes - but when you finish with development, how can…
Joseph Girgis
  • 3,115
  • 4
  • 19
  • 20
224
votes
8 answers

Angular - What is the meanings of module.id in component?

In an Angular app, I have seen that @Component has property moduleId. What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', …
Nishchit
  • 18,284
  • 12
  • 54
  • 81
117
votes
2 answers

Debugging in Safari's Web Inspector, when using a module loader like SystemJS

I'm creating an Ionic app using es6 modules, TypeScript and SystemJS as a module loader. This is my setup: tsconfig.json: { "compilerOptions": { ... "target": "es5", "module": "system", ... } } index.html:
fikkatra
  • 5,605
  • 4
  • 40
  • 66
104
votes
6 answers

How do I actually deploy an Angular 2 + Typescript + systemjs app?

There's a quickstarter tutorial over at angular.io which uses typescript & systemjs. Now that I've got that miniapp running, how would I go about creating something deployable? I couldn't find any info about it whatsoever. Do I need any extra tools,…
Brian G. Bell
  • 1,143
  • 2
  • 9
  • 8
66
votes
3 answers

How to include zone.js, reflect-metadata etc. in Systemjs builder task?

I'm using system.js and systemjs builder to create a dist folder with all the packed javascript files of my angular2 application. It works pretty nicely, except that it does not include the following files, which are currently statically included in…
user66875
  • 2,772
  • 3
  • 29
  • 55
58
votes
9 answers

Angular2 too many file requests on load

I'm making a website using Angular2 and I'm having what i suppose is an issue. On the first load of my angular page, SystemJS is making more than 500 hundred requests to retrieve every Angular2 file in angular2/src directory. In total, the first…
Marcos Basualdo
  • 2,580
  • 3
  • 18
  • 11
57
votes
6 answers

How can I improve load performance of Angular2 apps?

Angular2 app is loading slow, how can I improve the performance on load? I use Angular2, typescript with html5. currently my app takes 4 seconds to load. I host with Firebase and use cloudflare. Things I'm doing / info: I've compressed images. I…
AngularM
  • 15,982
  • 28
  • 94
  • 169
56
votes
1 answer

What is the need for SystemJS in Angular2?

I am a complete beginner to Angular and Angular2. I am confused about how the workflow is structured. I have been looking at the sample project that is present in the Angular2 site. Correct me if I am wrong but what I know till now is that all the…
ng.newbie
  • 2,807
  • 3
  • 23
  • 57
53
votes
3 answers

Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators

I am having the following problem running the below versions of JSPM with Angular2 and SystemJS (Versions: Angular@2.0.0-alpha.27 with JSPM@0.16.0-beta.2 and SystemJS@0.18.0) That once the typescript is compiled (without errors) i get the following…
N.Schipper
  • 1,668
  • 3
  • 18
  • 25
46
votes
6 answers

SystemJS - moment is not a function

I'm using JSPM, AngularJS, TypeScript, SystemJS and ES6 and my project is running pretty well... unless I try to use momentJS. This is the error I get: TypeError: moment is not a function This is part of the code: import * as moment from…
eestein
  • 4,914
  • 8
  • 54
  • 93
45
votes
3 answers

How to prepare release version with SystemJS and Gulp?

I use SystemJS in my Angular2 project. I use tsconfig file for TypeScript. I want to use gulp to concat and minify my code for production version. I am having an issues with concating the code: each time I try to concat files I get either 'angular'…
uksz
  • 18,239
  • 30
  • 94
  • 161
40
votes
5 answers

How to use UMD in browser without any additional dependencies

Suppose I have an UMD module like this (saved in 'js/mymodule.js'): (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ?…
Dorival
  • 401
  • 1
  • 4
  • 4
1
2 3
93 94