search

Introduction

Installing Node

Gulp requires node to run. And it usages npm packages to perform different task, So install node and npm first. Please follow the guide

1. Installing node

> Go to https://nodejs.org/en/ and download the LTS version ( Recommend 20.12.2 )

2. Installing Npm

> go to command and run npm install wait a bit

or

3. Installing Yarn

> go to command and run yarn install wait a bit

> Now run Npm start, it should open up http://localhost:4200 on your browser

Angular Build Version

Development Build

Command: npm run build
Description: This command triggers the Angular CLI to build the application for development. The resulting output is stored in the dist/ directory. This build is optimized for development and includes source maps for easy debugging.

Production Build

Command: npm run build-prod
Description: This command initiates a production build of the Angular application. The build is optimized for performance and generates minified and compressed bundles. The resulting output is stored in the dist/ directory.

Production Build with Stats

Command: npm run build-prod-state
Description: Similar to the production build, this command also generates a production build of the Angular application. Additionally, it creates a JSON file (stats.json) that contains detailed statistics about the generated bundles. The resulting output is stored in the dist/ directory.

Serve Development Build

Command: npm start
Description: This command serves the development build of the Angular application on the local development server. The application is accessible at http://localhost:4200/ and opens automatically in the default browser.

Run Tests

Command: npm test
Description: This command runs the unit tests for the Angular application using Karma as the test runner. It executes the test suites and reports the results.

Linting

Command: npm run lint
Description: This command performs linting checks on the Angular application's code using the configured linting rules. It helps ensure code quality and consistency.

End-to-End Testing (E2E)

Command: npm run e2e
Description: This command runs end-to-end (E2E) tests for the Angular application using Protractor. E2E tests simulate real user interactions and verify the application's behavior in a browser environment.

Generate Bundle Report

Command: npm run bundle-report
Description: This command generates a bundle report for the Angular application using Webpack Bundle Analyzer. The report provides insights into the size and composition of the generated bundles, helping identify potential optimizations.

Deployment

When deploying an Angular application to a remote server, you have several options available.

Simple Deployment

During development, use the ng build command to generate build artifacts in the "dist" folder. Serve the contents of the "dist" folder using a local web server for testing.

Automatic Deployment with Angular CLI

For automated deployment, use the ng deploy command. Add third-party builders to your project using ng add. Example packages:

  • Firebase hosting: @angular/fire
  • Vercel: vercel init angular
  • Netlify: @netlify-builder/deploy
  • GitHub pages: angular-cli-ghpages
  • NPM: ngx-deploy-npm
  • Amazon Cloud S3: @jefiozie/ngx-aws-deploy

You can visit the official Angular documentation at: https://angular.io/guide/deployment

Custom or Manual Deployment

If no builder is available for your platform, you can create a custom builder or manually deploy your application.

If you need more detailed information or further guidance on Angular application deployment, I recommend visiting the official Angular documentation website. The official documentation provides comprehensive and up-to-date information on various deployment strategies and options.

On the documentation website, you'll find detailed explanations, examples, and best practices for deploying Angular applications to different platforms and servers. It covers topics such as building and serving the application, deployment automation with Angular CLI, deploying to specific platforms like Firebase, Vercel, Netlify, GitHub Pages, NPM, and more. Additionally, the documentation provides guidance on manual deployment and custom deployment scenarios.

I hope this helps! If you have any further questions, feel free to ask.