Ad

Angular the series Part 3: Initialize project



    Welcome to the third installment of our Angular series! In this article, we'll guide you through creating your first Angular project using the Angular CLI.

Step 1: Create a New Angular Project

    First, navigate to the directory where you'd like to create your project. Open your terminal or command prompt and run:
Terminalng new my-first-project
Replace my-first-project with your desired project name.

The Angular CLI will prompt you to:
  • Add Angular routing?: Type y (yes) or n (no). We'll delve into routing in a future article.
  • Choose a stylesheet format: Select from CSS, SCSS, SASS, LESS, or Stylus based on your preference.
Once completed, the CLI will generate a new folder named after your project, containing the initial project structure.


Step 2: Explore the Project Structure

    Navigate into your project directory:
Terminalcd my-first-project
Here's an overview of the generated files and folders:
  • e2e/: Contains end-to-end tests for your application.
  • node_modules/: Houses all third-party libraries and dependencies.
  • src/: The main source folder for your application code.
  • .editorconfig: Defines coding styles for different editors.
  • .gitignore: Specifies files and folders to be ignored by Git.
  • angular.json: Configuration file for Angular CLI projects.
  • karma.conf.js: Configuration for the Karma test runner.
  • package.json: Lists project dependencies and scripts.
  • package-lock.json: Records the exact versions of installed packages.
  • README.md: Provides information about your project.
  • tsconfig.json: TypeScript configuration file.
  • tsconfig.app.json: Extends tsconfig.json for the application.
  • tsconfig.spec.json: Extends tsconfig.json for tests.
Note: TSLint (tslint.json) has been deprecated. It's recommended to use ESLint for linting TypeScript code.


Within the src/ folder:
  • app/: Contains the main application module and components.
  • app.component.ts: The root component logic.
  • app.component.html: The root component template.
  • app.component.css: The root component styles.
  • app.component.spec.ts: Unit tests for the root component.
  • app.module.ts: The main application module.
  • app-routing.module.ts: Handles application routing (if routing was added).
  • assets/: Stores static assets like images and fonts.
  • environments/: Contains environment-specific configurations.
  • favicon.ico: The favicon for your application.
  • index.html: The main HTML page that hosts your application.
  • main.ts: The entry point of your application.
  • polyfills.ts: Provides polyfills for browser compatibility.
  • styles.css: Global styles for your application.
  • test.ts: Configuration for running unit tests.

Step 3: Run the Development Server

    To view your application in the browser, start the development server:
Terminalng serve
Open your browser and navigate to http://localhost:4200/. You should see the default Angular welcome page.


Congratulations! You've successfully initialized your first Angular project. In the next part of this series, we'll delve into creating and managing components to build out your application's functionality.
Tags