Front-end application

angular.md

See how to install a specific version of the nodeJS.

Installing

Globally

$ npm i -g @angular/cli

Manually

Create ~/package.json file.

$ npm init

$ npm i --no-optional @angular/cli

Obs.: Sometimes you’ll have to install individually a specific version requested by the each package after you try to install the Angular, and sometimes you will have test what version is the more appropriate; the packages is installed in ~/node_modules, but you can set prefix in ~/.npmrc and put node_modules folder in another path, but nvm doesn’t is compatible with prefix, so don’t use both.

Edit ~/package.json file remove dependencies key (cause' this package doesn’t refer to an Angular project), and add "bin": {"ng": "..."} with ng path (.../node_modules/@angular/cli/bin/ng) to this key. So, run:

$ npm link

Ejecting to use Node Project (with webpack) based instead Angular Project

$ ng eject

Obs.: a webpack.config.js file will be created in root of project, so use $ npm start to start project.

To use ng s or npm start in the same project, remove @ngtools/webpack from node_modules/@angular/cli/node_modules/ and keep installed in node_modules; in .angular-cli.json keep up project.ejected as false.

Starting application

Inside the folder of projet (when Angular is installed), run

$ ng s

Obs.:

• sometimes this command will complain about @ngtools/webpack installed in more than one place. So remove it from .../node_modules/@angular/cli/node_modules/@ngtools/webpack manually;
• If you want to choose dinamically a port, pass --port=0 and --open to ng command. To pass manually a port, just pass --port=<port>;
• to not reload the page after build, use --liveReload false flag.

See more.

Testing in browser

Put at URL bar localhost:<port>. The default port is 4200.

Creating a new front-end application

$ ng new <app>

Generating a component

$ ng g c <path>

Obs.: restart server on create a new component.

Generating a module

$ ng g m <path>

Generating a service

$ ng g s <path>

Setting a default style preprocessor

$ ng set defaults.styleExt <extension>

The file will be created at src/app/<path>.

See more.