Angular2 and node.js

Question

I'm just beginning to read the angular2 quickstart and notice it is using npm, node and typescript. I was wondering what is the use of node.js in angular2? Isn't angular just a client side framework? So what is the use of node.js and what is node.js exactly doing? In the quickstart, it doesn't show you how to use angular2 without node.js. So I'm a bit confused since in my mind angular is just a client side framework.

Thanks for the clarification.

Zdravko Tatarski · Accepted Answer · 2016-05-26 14:23:38Z

7

Angular2 is a client side framework, it doesn't need nodejs in order to work. The confusion comes from typescript, because the typescript compiler runs on nodejs. Note that typescript supports ES6 which introduced the support for modules that have import and export functionality.

NodeJS became inseparable part of the front-end development cycle since it provides many tools for building apps, task runners, compilers, test frameworks etc. .

PS: There is an angular documentation dedicated for javascript: link

You can switch the languages from the dropdown menu under the main header. Sadly, at the moment most of the documentation is written only for Typescript. You can download already compiled source of angular2 and start using it without node.

edited May 26, 2016 at 14:23

answered May 26, 2016 at 14:15

Zdravko Tatarski

1844 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nivesh · Accepted Answer · 2016-05-26 15:01:30Z

3

Fact: Sure, angularJS is a client side framework. But NODEJS is not a sever side framework, it is a platform which provides JavaScript Runtime Environment.

Why NodeJS is being used in Client Side Development:

It provides instant access to all the JS libraries(e.g Angular) to be used in the web page, with the help of npm (Node Package Manager). Thus, install any required library using npm install package_name --save. So, no need to learn bower.
One can write build scripts and create watchers. Thus, no need of Gulp or Grunt.
One can install any live-reload node module for live reload the changes made in your client app.

NODEJS used in Angular2 (JavaScript) Documentation:

Created a package.json file which contains all the required libraries for the client app.
Next simply hit npm install and all the required libraries are downloaded in your local machine under node_modules folder.
thus: <script src="node_modules/@angular/core/core.umd.js"></script>
Installs a node module called: lite-server which serves your web app and live reloads it on changes. It is executed by npm start check the script section in package.json.
Thus, for futher development you just need to focus on your app and for downloading any client side libraries one can use like: npm install jQuery --save

At the end of the day, NODEJS just makes your life easier with just one package.json file.

edited May 26, 2016 at 15:01

answered May 26, 2016 at 14:45

Nivesh

2,6031 gold badge22 silver badges29 bronze badges

3 Comments

pdiddy Over a year ago

Thanks for the clarification, I am a very beginner in all this. I did some node.js and express.js and remember that most of the time you would do something like node app.js to start it. But in the angular2 quickstart, you would run npm start which run lite-server ... so In production, how would I start it? I tried node app/app.component.js or node index.html, but obviously that doesn't work .... in production I'm not going to use lite-server, but something like nginx for example ...

Nivesh Over a year ago

sure, in production you just need to serve your index.html and rest JS files which it requires. So, for that you can either use nginx to serve static files (html/JS/CSS) as it is super fast. OR you can create your own nodeJS server to serve your static files.

Nivesh Over a year ago

This setup is for development environment. In production you can put the required files(HTML/JS/CSS) under dist folder and serve it. Using web server of your choice.

Thierry Templier · Accepted Answer · 2016-05-26 15:10:47Z

The reason I think that Angular2 is provided as an NPM module is because of the TypeScript compilation.

The compiler requires d.ts files for module contracts. Moreover when you specify the moduleResolution attribute to node in the tsconfig.json file, it will load them through Node:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node", // <-----
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

That being said, Node isn't used within the Angular2 application itself when executing within the browser.

Collectives™ on Stack Overflow

Angular2 and node.js

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related