6

I would like to start working with the Angular2 Beta, but I am facing a few problems regarding the required libraries.
I am using Eclipse and it's TypeScript Plugin.
Also, I am using SystemJSas module loader.
My problem is that if I install Angular2 using npm install angular2 it loads the whole Angular-Project, including the CommonJS-Version, ES6-Version and the TypeScript-Version. This results in a over 30 MB big folder with almost 2000 files, though I only need the TypeScript-Version (still a few 100 files), without examples.
Also, importing the /ts-folder in Eclipse gives me errors, that the modules from "rxjs" do not exist ("rxjs/Subject"...). So i guess i have to download that project too.
Using the package.json used in the 5 Min Quickstart, npm install downloads over 80MB (almost 10000 files), and I am sure, I don't need all those files.
So i would like to know, which files are really needed by Angular2 and how can i download them?
Should i create my own package.json-File? Or is there a even simpler way?

EDIT: Taking a look at our (working) Angular 1.X Project, i can see a single angular.js file, as well as files for the different modules (like restangular.js, angular-route.js etc.), in total about 10 files.
What i am now looking for is an angular2 counterpart of those files.
Do those counterparts exist? Where can i find them?

Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
Robert P
  • 9,398
  • 10
  • 58
  • 100

2 Answers2

7

"What i am now looking for is an angular2 counterpart of those files":

<!-- 1. Load libraries -->
<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>

You need those 4 .js (not .ts) files.

"Where can i find them?" They got downloaded with npm. You can keep those 4 and delete everything else. You can also get them from a CDN, or download them manually.

<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

HOWEVER. These are already compiled javascript files, and they'll work for you if you write your app using JS, but right now 90% of the scarse documentation you will find about Angular 2 is on typescript and in order to work with typescript you'll need the source files of Angular 2 which is the whole package you are getting.

My suggestion if you are doing it in typescript: Don't worry about all those files getting downloaded, they are meant for development, not neccesarily part of your build. You can only include the ones I told you in your build and that will keep you real app small. Also you are not suppose to add all those files into the git repo or w/e repo you are using, the idea is that you have git ignore the whole "node_modules" folder and you only commit the package.json file, which will work for other developers so they run npm install and they get all the dependencies themselves. So all those files are only meant to be in dev machines, you don't have to worry about them making you app too big cause they won't be part of your app.

Langley
  • 5,326
  • 2
  • 26
  • 42
  • Thanks for your answer. So basicly if i want to use typescript, i have to include the whole package, to be able to use all angular2 functions in typescript? Also as mentioned in my question, including the /ts folder in my app gives errors, as systemjs as well as rxjs, which are required are not included in the angular2 package. Is it enough to download those 2 packages or are there more needed packages? – Robert P Jan 08 '16 at 15:50
  • Depends on you project needs. Those are the basic ones, if you need more stuff like the router, you have to add the router one. rxjs and systemjs are not part of angular2, angular 2 just have dependencies on them, node will detect that and download them too in node_modules/systemjs & node_modules/rxjs. – Langley Jan 08 '16 at 15:58
  • I meant npm, not node. When you do "npm install". – Langley Jan 08 '16 at 16:07
  • Okay so basicly i would just need to include the dependencies "angular2", "systemjs" and "rxjs" into my "package.json" and npm should download all these packages for me right? Also shouldn't angular-router be included in the angular2 package allready? – Robert P Jan 08 '16 at 16:09
  • rxjs is a dependency of angular2 so it should get downloaded automatically, systemjs is required but you can choose to use another technology instead so that one is not considered a hard dependency and you do have to add it to your package.json. angular-router IS included in angular2 package. But if you want your app to use it, you'll have to add the script tag that points to it, along with the others I showed you: – Langley Jan 08 '16 at 16:18
  • Just remember that browsers don't read typescript.Your typescript must be compiled into js so the browser can read it,the js is your real app,is the only one you need in your build/deliverable. You could add a ts transpiler to the browser so it can read ts but it would be compiling in the client side which is obviously not recommended for production at all. Same for Angular2,those 4/5 js files are the actual app, but if you want to write typescript and use his objects you need the source code. So don't worry too much about all the downloaded files, they are part of development not the release. – Langley Jan 08 '16 at 16:24
  • Ah okay, thanks a lot, now i guess i understood those things. So my package.json only needs to contain angular2 and systemjs as dependencies. Is there also a way to download just the `ts` version of angular2 as i won't need CommonJS or ES6 version? – Robert P Jan 08 '16 at 16:33
  • Yes, manually from the repo, which would make no sense. Just download the whole package and use whatever you need from it. You don't go into the src of jquery and download only the methods/modules you need right? you download the whole thing. Maybe at some point later in time they'll create different builds but I wouldn't get my hopes up, they have lots in their hands right now and there really is no reason for it. – Langley Jan 08 '16 at 17:11
  • Btw you'll also need to add typescript as your dev dependency: `"devDependencies": { "typescript": "^1.7.3" }` so you can compile your own ts code. – Langley Jan 08 '16 at 17:34
  • one last question: I am using Eclipse with the [Typescript Plugin](https://github.com/palantir/eclipse-typescript). The plugin seems to require full path for `import * from`. So there i need to give the path to (for example) `core.ts`. But in the final app there won't be a `core.ts`, as i would use the angular2-bundle right? Wouldn't that cause problems, as `SystemJS` can't find the import? – Robert P Jan 11 '16 at 16:39
  • 1
    If you have more questions open new questions, these long comments discussions aren't as helpful to other users. – Langley Jan 11 '16 at 16:41
3

The package.json file in Angular 2 Quickstart guides contains development dependencies like concurrently,lite-server, typescript etc along with es6-shim etc for older browser compatibility.

Basic dependencies for angular 2 are

  • angular2
  • typescript
  • systemjs
  • rxjs

You can look into this Angular2 Tutorial Plunker to start a simple application. It also contains routing library.

TheKojuEffect
  • 20,103
  • 19
  • 89
  • 125
  • Is it also possible to just download the `TypeScript`-Version of angular2? The whole angular2 project, as stated above, is over 30 MB bit. It also includes examples, which are not needed for a real app. Or would it even be better to download only the single files? – Robert P Jan 07 '16 at 10:37
  • You can try downloading individual files and use npm local path feature. https://docs.npmjs.com/files/package.json#local-paths – TheKojuEffect Jan 07 '16 at 10:41
  • 1
    Thanks for your help, but i still can't really see which single files are really needed. Taking a look at our current (working) Angular1 project, i can see a single `Angular.js` file, as well as files for modules like `restangular`, `angular-route` etc. But looking at the `Angular2` files (the one downloaded over "npm install angular2"), i can't find the Angular2 counterparts. – Robert P Jan 07 '16 at 10:49
  • are there angular2 counterparts of the files i mentioned above? Or is the angular2 framework splitted up into different files (like core.ts, common.ts etc.)? – Robert P Jan 08 '16 at 06:59