Angular CLI Commands

C:\Users\amit.maddheshiya\AppData\Roaming

npm -v

node -v

1. Install Angular globally

npm install -g @angular/cli

or 

npm i -g @angular/cli 

ng -v

2. ng new MyFirstApp

or

ng new MySecondApp –dry-run

or 

ng new MyFirstApp –skip-install; npm install

3. cd MyFirstApp

4. code .

5. ng serve –open //to start server and open defualt browser

6. ng e2e //to run end to end test cases

7. Help document of angular

ng –help

or

ng –help | clip

or

ng –help >MyTextDoc.txt

or

ng –help >MyWordDoc.doc

8. ng generate component abc | ng g c abc
9. ng generate component abc/xyz
10. ng g c pqr –flat
11. ng g c abc/xyz –flat

12  ng generate component abc/xyz -d

13. ng generate component abc/xyz –dry-run
14. ng g c abc/xyz -it -is –spec=false -d
15. ng generate service employee
16. ng g s student -d –spec=false 
17. ng g s student -d –spec=false –flat=false  –If you want a folder of it’s own for a service 
18. ng g m students -d -m=app.module
19. ng g m students -m=app.module –spec=false –flat=true
20. ng g d directiveName –skip-import -d

    or

    ng g d directiveName -m=app.module -d

21. ng g class employee/employee –spec=true 

or

    ng g cl employee/employee –spec=true 

22. ng g interface employee/employee –spec=true 

or

    ng g i employee/employee –spec=true 

23. ng g enum employee/employee –spec=true 

or

    ng g e employee/employee –spec=true 

24. ng lint #to check code symantic issues
25. ng lint –fix
26. ng lint –help

27. ng new RoutingDemo –routing 

ng g c HomeComponent

ng g c EmployeesComponent

ng g c PageNotFoundComponent

import { HomeComponent } from ‘./home/home.component’;

import { EmployeesComponent } from ‘./employees/employees.component’;

import { PageNotFoundComponent } from ‘./page-not-found/page-not-found.component’;

const routes: Routes = [

  { path: ‘home’, component: HomeComponent },

  { path: ’employees’, component: EmployeesComponent },

  { path: ”, redirectTo: ‘/home’, pathMatch: ‘full’ },

  { path: ‘**’, component: PageNotFoundComponent }

];

<div style=”padding:5px”>

<ul class=”nav nav-tabs”>

        <li routerLinkActive=”active”>

            <a routerLink=”home”>Home</a>

        </li>

        <li routerLinkActive=”active”>

            <a routerLink=”employees”>Employees</a>

        </li>

</ul>

<br/>

<router-outlet></router-outlet>

</div>

npm install bootstrap@3 –save 

“styles”: [

  “node_modules/bootstrap/dist/css/bootstrap.min.css”,

  “styles.css”

]

28. ng serve –help
29. ng build or ng build –dev
30. ng build –prod
31. ng build –dev -sm false    or  ng build –prod -sm true
32. ng build –dev -ec true

=====================================================

for full stack product

npm i npm (to update npm)

npm run build

Creating new angular app

ng new product-mart –routing –style scss –prefix pm –skip-install –dry-run

with routing module wi sass as defualt style with pm as the prefix to component and directives with skip install so it just create

the folder structures with dry dry run so that it will just create in memory and diplay it in the console

ng add @angular/material

ng g c home

ng g m products –routing

ng g c products/products -m products/products.module

ng g s product-data –dry-run

npm i express –save

npm run lint

ng lint –fix

ng g c login

ng g s auth

ng g c register

npm i -S dotenv body-parser cors helmet morgan express-async-handler

npm i -D concurrently nodemon

npm i -S mongoose

npm i -S bcrypt

npm i -S passport passport-jwt passport-local jsonwebtoken

ng g s tokenStorage

ng g s authHeaderInterceptor

npm i -S http-errors