Before 1 year i planned to create simple angular app but at that time i don't have idea about angular cli so i had configure lot of things and faced more issue.I spend 2-3 days to configure angular app and finally done. In this article we will learn how to create Angular app using angular CLI.Angular CLI is just a command line interface help us to create angular app very eaisly within 2 minute.
To know about Angular more concept go through on given links.
- How to create simple angular application?
- How to work with dropdown in angular ?
- How to post Form-Data in angular using WebApi. ?
- Angular4 content to learn
Agenda
- How to create angular app using angular-CLI?
- How to use angular cli command?
- Create app with component,module and HTML.
- Create HTML to show "Welcome to C# corner, Angular app using Angular CLI by Bikesh Srivastava ".
- Explanantion about angular CLI command one by one.
What is angular CLI?
Angular CLI is "A command line interface to create angular app with webpack and other configuration".Angular CLI provide 4,5 command to create angular application easily.some command given below.see image.
For more details go on official site of angular : https://cli.angular.io/
Don't confuse about my-dream-app word ,its just project name you can write anything.Angular CLI provide us very powerfull,simple and easy command which can create angular app within 2 minute.So i would like to suggest you use Angular CLI command to create angular app.
So If you are using angular cli command to create angular app ,you don't need to configure anything extra just run single command and run application.
Let's follow 3-4 step
Step 1: Install Node.js npm on your system,you can download from Node.js offcial site https://nodejs.org/en/
after installation completed, check installed or not ,open cmd on your system and type "npm -v" and enter thereafter you can see latest version of npm.
Step 2: Open cmd command on your system and type "npm install -g @angular/cli" and enter after that angular cli will installed for whole computer because i used "-g".If you don't want apply angular/cli for whole system ,you can remove -g from command.
No we can run angular cli command to create, serve,run etc....
These angular CLI command can be use now.
- ng new project_Name
- ng generate
- ng serve
- ng Test,Lint,Format
ng new app_Name
Before run this command be sure "npm install -g @angular/cli" executed ,don't need run again again ,installed only one time.
you can use ng new command on system cmd command and on VS code also.So now i am going to create a simple application using VS code.see image how to use.
Open visual studio code=>Open terminal to run command thereafter choose directory to create project.Here Angular4 is project name.
Press enter after that you can check Angular4 project created on Desktop with related files.One more point even you don't need run npm install command.By default angular cli will do.see image how and when install..
In this image you can see Angular cli firstly created angular app and then installing packages from npm.
One more thing if you have already installed git on your system, angular cli configure git with your project. see image all configuration in created and installed successfully.see image and run to start...
ng serve / npm start
Now we are ready to run app,so we can use anyone command ng serve or npm start ng serve run application directly,npm start run ng serve in background.that's why i am sying you can use any one. see package.json for more details.
Package.json
1. {
2. "name": "angular4",
3. "version": "0.0.0",
4. "license": "MIT",
5. "scripts": {
6. "ng": "ng",
7. "start": "ng serve",
8. "build": "ng build",
9. "test": "ng test",
10. "lint": "ng lint",
11. "e2e": "ng e2e"
12. },
13. "private": true,
14. "dependencies": {
15. "@angular/animations": "^4.0.0",
16. "@angular/common": "^4.0.0",
17. "@angular/compiler": "^4.0.0",
18. "@angular/core": "^4.0.0",
19. "@angular/forms": "^4.0.0",
20. "@angular/http": "^4.0.0",
21. "@angular/platform-browser": "^4.0.0",
22. "@angular/platform-browser-dynamic": "^4.0.0",
23. "@angular/router": "^4.0.0",
24. "core-js": "^2.4.1",
25. "rxjs": "^5.4.1",
26. "zone.js": "^0.8.14"
27. },
28. "devDependencies": {
29. "@angular/cli": "1.2.7",
30. "@angular/compiler-cli": "^4.0.0",
31. "@angular/language-service": "^4.0.0",
32. "@types/jasmine": "~2.5.53",
33. "@types/jasminewd2": "~2.0.2",
34. "@types/node": "~6.0.60",
35. "codelyzer": "~3.0.1",
36. "jasmine-core": "~2.6.2",
37. "jasmine-spec-reporter": "~4.1.0",
38. "karma": "~1.7.0",
39. "karma-chrome-launcher": "~2.1.1",
40. "karma-cli": "~1.0.1",
41. "karma-coverage-istanbul-reporter": "^1.2.1",
42. "karma-jasmine": "~1.1.0",
43. "karma-jasmine-html-reporter": "^0.2.2",
44. "protractor": "~5.1.2",
45. "ts-node": "~3.0.4",
46. "tslint": "~5.3.2",
47. "typescript": "~2.3.3"
48. }
49. }
In package.json you can add or remove dependencies,scripts.etc....
So now time to run aaplication use npm start or ng serve in terminal or cmd. You should keep in mind angular cli default port is http://localhost:4200/
and default browser is chrome,so copy and paste in chrome browser and Enter.see output..
So if you want change port number according your choice ,don't worry about that i am here and i'll tell you how we can change default port from 4200 to anything.
Open Angular-cli.json in your project and add 1-3 line of code suppose i want chnage from 4200 to 2500.see code given below.
1. {
2. "defaults": {
3. "serve": {
4. "port": 2500
5. }
6. }
7. }
If still you are not getting where we need to add this line of code just see complete code of Angular-cli.json..
1. {
2. "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3. "project": {
4. "name": "angular4"
5. },
6. "apps": [
7. {
8. "root": "src",
9. "outDir": "dist",
10. "assets": [
11. "assets",
12. "favicon.ico"
13. ],
14. "index": "index.html",
15. "main": "main.ts",
16. "polyfills": "polyfills.ts",
17. "test": "test.ts",
18. "tsconfig": "tsconfig.app.json",
19. "testTsconfig": "tsconfig.spec.json",
20. "prefix": "app",
21. "styles": [
22. "styles.css"
23. ],
24. "scripts": [],
25. "environmentSource": "environments/environment.ts",
26. "environments": {
27. "dev": "environments/environment.ts",
28. "prod": "environments/environment.prod.ts"
29. }
30. }
31. ],
32. "e2e": {
33. "protractor": {
34. "config": "./protractor.conf.js"
35. }
36. },
37. "lint": [
38. {
39. "project": "src/tsconfig.app.json",
40. "exclude": "**/node_modules/**"
41. },
42. {
43. "project": "src/tsconfig.spec.json",
44. "exclude": "**/node_modules/**"
45. },
46. {
47. "project": "e2e/tsconfig.e2e.json",
48. "exclude": "**/node_modules/**"
49. }
50. ],
51. "test": {
52. "karma": {
53. "config": "./karma.conf.js"
54. }
55. },
56. "defaults": {
57. "serve": {
58. "port": 2500
59. },
60. "styleExt": "css",
61. "component": {}
62. }
63. }
Highlighted code is updated by me to change port.
So now time to work more and enjoy with angular app.
For more details go on angular official site https://cli.angular.io/
Click here :https://www.clicktime.com/blog/8-ways-to-stop-over-servicing-your-clients/
Click here :https://www.clicktime.com/blog/8-ways-to-stop-over-servicing-your-clients/
Bikesh Srivastava
Angular
