In this Tutorial, we will go through the basic parts of an Angular application by creating a New Angular Project from scratch and running our application Step by Step.
In the previous section of the Angular Course, we got a very quick overview of Angular and its features, as well as a step-by-step guide on how to set up our local development environment.
We will cover some basic features and concepts like Angular CLI (we saw that in the previous section of our Angular Course) to create our New Angular Project, components, modules, services, and passing data between the components and the Template using the Data Binding (we will see all the concepts of data binding in the next tutorials)
We will start with a simple mini market application, which allows us to see a list of products, each with its own name, stock code, and price.
During our Complete Angular course, we will see how to package rendering a product into an individual and reusable component, and how to work with Angular data binding.
How To Create New Angular Project ?
You can simply create a new angular project by running the following command:
// ng new "your project name"
ng new stock-market
By running this command, it will automatically create a new angular project and generate a skeleton for your application under the folder stock-market with a group of files, and install all the dependencies that we need to run correctly our Angular application.
This might take a moment, but eventually, you will see the following line in your terminal:
Project 'stock-market' successfully created.
Congratulations, you have just created your New Angular Project. In the next step, we will see how to run our angular application.
The CLI Does More than the Creation of a New Angular Project
While we have just created our New Angular Project, the Angular Command-line Interface does a bit more than just the creation of the initial skeleton. In fact, it is useful during all the development process for a variety of tasks, such as :
- Bootstrapping your angular application
- Serving the application (using ng serve command )
- Running the tests process (unit test and end-to-end)
- Creating a build for distribution
- Generating new components, modules and much more for your angular application
Each of these features corresponds to one or more Angular CLI commands.
We will cover each one and its uses upfront during our Angular Course.
Each command provides a variety of arguments and options, making the Angular command-line interface ( CLI) flexible and pretty diverse and capable for a wide variety of uses.
Running Our Angular Application
Now that we have created our new Angular project and generated our application, the next step is to run it so that we can see our live running application in the browser. There are two ways to do it:
• Running the application in development mode, where the Angular CLI detects the changes and compiles the project and refreshes our interface.
• Running the application in production mode, with an optimal compiled build.
For now, we will run our application in development mode, which is as simple as running the following command :
ng serve
From the root folder of the generated project, which is the stock-market folder in our case. You should see the generated files by the Command-line (CLI) in your terminal:
√ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.02 MB |
polyfills.js | polyfills | 315.32 kB |
styles.css, styles.js | styles | 207.81 kB |
main.js | main | 50.44 kB |
runtime.js | runtime | 6.52 kB |
| Initial Total | 2.59 MB
Build at: 2022-06-30T22:16:03.023Z - Hash: bf06e7b4140305c7 - Time: 19663ms
** Angular Live Development Server is listening on localhost:4200,
open your browser on http://localhost:4200/ **
√ Compiled successfully. -XperTuto.com-
The output is a snapshot of all the files that the Angular CLI generates in order for your Angular project to be served successfully.
It includes :
main.bundle.js : this file contains the transpiled code that is specific to our application.
vendor.bundle.js : this file includes all the frameworks and the third-party libraries you depend on (including Angular).
styles.bundle.js : this file contains the compilation of all the CSS styles that are needed for your application.
polyfills.bundle.js : this file includes all the polyfills required for supporting some capabilities in older browsers, generally it is loaded before anything else. (check this polyfills example if you want)
inline.bundle.js : this tiny file contains the webpack utilities and loaders that are required for bootstrapping our application.
Now let’s try that and type the command : ng serve to start your local development server on port 4200 for you to hit from your browser.
Now when you Open http://localhost:4200 in your browser you should be seeing the live running Angular application like the screenshot :
Troubleshoot
Problem 1 : an error occurs when you run ng new : eslint is not in this registry
Installing packages (npm)...npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz - Not found
npm ERR! 404
npm ERR! 404 '@types/eslint@https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.Solution 1 : Install the dependency locally with the version 8.4.3
npm i -D @types/eslint@8.4.3
Solution 2 :
- uninstall the eslint globally using this command :
npm uninstall -g eslint
- create your angular project using –skip-install using this command
ng new project_name –skip-install
- add
"@types/eslint": "8.4.3"to the package.json - finally run
npm install
Problem 2 : an error occurs when you run ng new : deprecated source-map-resolve@x.x.x
Installing packages (npm)…npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm ERR! Exit handler never called!npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://github.com/npm/cli/issuesnpm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\XperTuto.com\AppData\Local\npm-cache_logs\2022-06-028T00_12_19_310Z-debug-0.log
× Package install failed, see above.
The Schematic workflow failed. See above.
Solution : upgrade your NPM version globally to the latest version using this command line :
npm install -g npm@latest
Finally, close and reopen your Terminal and retry.