Hints about Angular framework

angular.md

Angular

Make sure you have Node.js installed on your computer first.

Check if Angular is installed on your computer

ng --version

Install Angular for the first time

npm install -g @angular/cli

The -g flag is to install Angular globally on your computer.

Update Angular to the latest version if it's already installed

npm install -g @angular/cli@latest

The -g flag is to install Angular globally on your computer.

Create a new Angular project

ng new <app-name> --routing --skipInstall --style=scss

The --routing flag generates a file called app-routing.module.ts, which is one of the files you need for setting up lazy loading for your feature module. This is good if your application is going to use routing. More Info.

The --skipInstall flag will skip installing the required dependencies. If you use the --skipInstall flag in the command as shown above, you will need to run the npm install command as shown below to install the required dependencies.

If you remove the --skipInstall flag from the above command, all the required dependencies will be automatically installed in a directory called node_modules and you will not need to run the below npm install command.

The --style=scss flag determines the extension to be used for style files. The default is css. So, if we want to use another extension (like scss) we should determine it as shown above.

To show a list of all possible flags that could be used with the ng new command, Check This Link.

Run your Angular project in the browser

# Go to your project directory
cd app-name/

# Install the dependencies (If it's not automatically installed through the previous command)
npm install

# Run your project in the browser
ng serve --open

The --open flag opens a browser to http://localhost:4200/.

If your browser didn't open automatically, open it and navigate to: http://localhost:4200. The app will automatically reload the browser if you change any of the source files.

Generate a new component

ng generate component <component-name>

For other type of files that could be generated through the Angular CLI, see: angular.io/cli/generate.

Generate a new service

ng generate service <service-name>

How to use a jQuery plugin with Angular?

Check this answer on stackoverflow.com

How to generate components in a specific folder with angular-cli?

ng generate component <your-directory-name/your-component-name>

The output of this command will be: your-directory-name/your-component-name/your-component-name.component.ts.

If you want to directly place the component files in the directory, use the --flat flag like this:

ng generate component <your-directory-name/your-component-name> --flat

This command will generate the files without making a new folder. The output will be: your-directory-name/your-component-name.component.ts.

Similar approach can be used for generating other components like directive, pipe, service, class, guard, interface, enum, module, etc.

More info: see This answer on stackoverflow.com.

# Generate a module and a routing modules files
# This command should be run first to avoid automatically adding the component(s) to the app.module.ts
ng g module <modules/orders> --routing

This creates a orders folder with two files inside, ordersModule and ordersRoutingModule. ordersModule will act as the gatekeeper for anything that concerns orders. ordersRoutingModule will handle any customer-related routing. This keeps the app’s structure organized as the app grows and allows you to reuse this module while easily keeping its routing intact. More Info.

Some examples

# Generate a module and a routing module
ng g module modules/orders --routing

# Generate a component directory called order-list inside the orders/components directory
ng g component modules/orders/components/order-list

# Generate a service for the orders
ng g service modules/orders/services/order

# OR in case of mock
ng g model modules/orders/mocks/mock-orders

# Build an Angular app for production
ng build --prod --aot

# In case the Angular app exists in a sub directory on the server
# Note that the trailing slash is important
ng build --prod --aot --base-href="http://domain-name.com/sub-directory-name/"

# Linting (show errors) in your Angular app
ng lint

# In case you want to automatically fix all linting errors
ng lint --fix

# Load the app in the development environment. i.e. Load the app using
# the values stored in the `environment.ts` file.
#
# The `--open` flag is to automatically open the app in the browser.
ng serve --open

# Load the app in the production environment. i.e. Load the app using
# the values stored in the `environment.prod.ts` file.
#
# Note that when building the app using `ng build --prod` command, the values
# in the `environment.prod.ts` file will be used as the default, because that
# command automatically replaces `environment.ts` with `environment.prod.ts`
# More info: https://goo.gl/Mw8LwA
#
# The `--open` flag is to automatically open the app in the browser
ng serve --prod --open
# OR
ng serve --environment=prod --open

# You can load the app in any other custom environment like this:
# Supposing you have created a new custom environment called `test`
# More info: https://goo.gl/GkkLz2
ng serve --environment=test --open

# You can also use any custom environment when building the app like this:
ng build --environment=test