Search code examples
node.jsangularnpmsystemjs

Explanations about script integration with npm / gulp


I'm trying to setup a working project with the Angular2 Quickstart guide, with Visual Studio 2015, using TypeScript, NPM and gulp. (Angular2 2.0.0-rc.3, TypeScript 1.8.10, npm 3.6.0 and gulp 3.9.1)

Following guides on the internet, there is something I don't really understand, and having an explanation would be really helpful.

NPM allows us to get the up-to-date modules that we need to load into our app. This means I need to install the dependencies with the package.json file as followed :

"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    ...

    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
},
...

Once installed, I need to serve those files using gulp into my root folder (wwwroot), which makes perfect sense.

After that, I need to configure systemJS accordingly to my application needs, so that it knows where to get the files to load.

And then, following the Quickstart, I need to setup the scripts to import in my index.html file.

What I don't understand is why do we manually import those 3 scripts while we could set them up in the systemJS configuration file ?

(I'm talking about these :

  • node_modules/core-js/client/shim.min.js
  • node_modules/reflect-metadata/Reflect.js
  • node_modules/zone.js/dist/zone.js

)

Is it only because it's a sample project and therefore it's fine to proceed this way, or is there a better reason ?

I assume it's only because we need these single files whereas packages like @angular contain a lot of files which are easier to manage using systemJS ?

I am aware this means I know very few about the subject, and any help would be really nice. I've read this link (https://angular.io/guide/quickstart) which helped me a bit, but I think I'm missing something there...

Thanks,

Alex


Solution

  • These modules are "static" (shim / polyfills, reflect metadata for class metadata and zones) and don't need to be involved in module management. That's why they are configured outside SystemJS.