Angular 2 dependencies

Question

Please review these dependencies in package.json:

"dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1", "@angular/platform-browser": "2.2.1", "@angular/platform-browser-dynamic": "2.2.1", "@angular/router": "3.2.1", "@angular/upgrade": "2.2.1" } 

I want to use the version of the Angulajs package and when I run this command:

npm install angular

It installs angular.min.js I want to know what is the difference between the two? Is it possible to link dependencies using npm and create a single file?

Another question: I know that Angular 4 was released, and when I run this command:

npm install angular

It installs angular.min.js with version v1.6.4 , so what is this file? And why is it out of date?

Answer 1

When you run npm install angular , AngularJS (v1.x) is installed.
That is why, when you run the command, the latest stable version of AngularJS ie v1.6.4 is installed .
Note: Angular v1 (AngularJS) is still supported . Last stable release was 3 months ago.

---

Angular 2 and higher versions are simply called Angular .
Note: Angular (v2 or v4) is an incompatible rewriting function of AngularJS (v1)

---

Now the question is, should you choose any of the above requirements. The steps you followed are to get AngularJS (v1).
You can take a look at Angular Quickstart to get started with Angular2 +, which is now updated to version 4.4.5 (starting July 5th, 2017). You can take a look at Package.json and you will notice

 "dependencies": { "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", "@angular/platform-browser": "~4.0.0", "@angular/platform-browser-dynamic": "~4.0.0", "@angular/router": "~4.0.0", "angular-in-memory-web-api": "~0.3.0", "systemjs": "0.19.40", "core-js": "^2.4.1", "rxjs": "5.0.1", "zone.js": "^0.8.4" 

},
which should install the current stable version of Angular

---

angular-cli (Angular command line tool)

Answer 2

In the second question, you can install Angular 2+ by running the following command: npm install @angular/[package] . Example:

 npm install @angular/ common@4.1.2 -- installs @angular/common v4.1.2 

It is also important to note that AngularJS (version 1) does not match Angular (version 2+).

Answer 3

The big difference in this context is that Angularjs (1.x) gives you one big file, the whole structure and no parameters. Use only a few or even a little, and you should include all of this.

Angular 2, on the other hand, is incredibly modular. Use what you want, even add your own files and put it all together. Since it uses webpack under the hood, it is extremely customizable, to the point that you can put your own css and even images in the kit. How do you ask?

ng build

This launches webpack, which creates a dist folder with various script and css files. Think of this folder as your bundle. Instead of angular.min.js, you basically have myapp.min.js , which can include everything in your application, including angular.

You probably think: "But I want only one file!". Of course you can get it. I think this is going out of your way, because the default is really reasonable. One large 5 megabyte js file, including everything, is not always the best way. But you can get it!

ng eject

This command outputs the webpack configuration to webpack.config.js , and any changes you make here will be triggered the next time you run ng build or ng serve . There is nothing complicated in having only one file instead of three, but you have to study the web package yourself!

Answer 4

Angular 2 is a complete overhaul of angular 1. Therefore, I recommend that you consider these two as two different languages. Do not mix concepts. angular 2+ is completely modular and interwoven into a common, compiler, core, http, etc. This is done to tremble trees.

If you want to bundle angular dependencies in one assembly. use

 ng eject --force 

and install CommonsChunkPlugin using

 npm install -save-dev commons-chunk-plugin 

then configure CommonChunkPlugin in webpack.config.js file.

To install any angular module use:

 npm install @angular/[module-name] 

Answer 5

I highly recommend you study: https://github.com/angular/angular-cli

This is built by the angular team to help people move quickly in angular 4. Many other frameworks do the same. For example, the reaction has the same idea: https://facebook.imtqy.com/react/blog/2016/07/22/create-apps-with-no-configuration.html

This does not answer your questions directly, but you can avoid the difficulty associated with setting up angular 4. In fact, the goal of angular-cli is to help people not get hung up on the hours of work of the clock by figuring out which dependencies to install.

Also, don't spend hours on hours creating a web package to build an angular project that creates an assembly. With angular-cli, it only runs the following command:

 ng build --prod 

Answer 6

As pointed out by Manubhargav , when you run npm install angular , AngularJS (v1.x) will be installed.

To install the latest version of angular 2, use npm install angular-2 --save . This command will update the package.json and package-lock.json and add the angular-2 dependency to them.

Note. If you get typings install error, install it on npm: npm install typings --global

To install the latest version of angular 4, you can use one of these two methods:

• Using angular CLI:
  • Install angular CLI: npm install -g @angular/cli
  • Create a new project: ng new my-app
  • Apply: go to the project directory and start the server. cd my-app ng serve --open
• Manual tuning using the Seed project:
  • Github seed cloning project: git clone https://github.com/Plum-Crazy/angular-seed
  • Launch the application: go to the project directory and start the server. cd angular-seed npm install npm run After the project is built, it will be available at http: // localhost: 3000 /