Welcome to the Angular CLI Configuration tutorial! In this lesson, we'll dive into Angular's command-line interface (CLI) and configure it for our projects. Let's get started!
Angular CLI is a powerful tool that helps you bootstrap, develop, and maintain Angular applications. It automates many tasks, saving you time and effort.
To install Angular CLI, run the following command in your terminal:
npm install -g @angular/cliš Note: Replace npm with yarn if you prefer using Yarn.
Angular CLI has several configuration files that help customize your project's behavior. Let's explore two essential configuration files:
angular.json: The main configuration file for an Angular project.tsconfig.json: TypeScript configuration file for your project.angular.json šThe angular.json file contains settings for your project, such as the styles, scripts, and build options. To view your project's angular.json file, navigate to its root directory and run:
cat angular.jsonTo add a new project, update the projects array in the angular.json file, as shown below:
{
"projects": {
"my-new-project": {
"projectType": "application",
"schematics": "@schematics/angular:express",
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.browser.config.js"
},
"outputPath": "dist/my-new-project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/fonts"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "my-new-project:build"
},
"configurations": {
"production": {
"browserTarget": "my-new-project:build:production"
}
}
}
}
}
}
}In the example above, we added a new project called my-new-project. Replace my-new-project with the name you'd like to give to your project.
š Note: The schematics field determines the project template. In this case, we used Angular Express for a server-side rendered Angular application.
tsconfig.json šThe tsconfig.json file contains the TypeScript compilation options for your project. To view your project's tsconfig.json file, run:
cat tsconfig.jsonYou can customize the settings in this file according to your project's needs.
Let's create a new Angular project called my-new-app with a server-side rendered Angular Express template:
ng new my-new-app --collection=@angular/expressThis command creates a new project called my-new-app with the specified project template.
What is the purpose of the `angular.json` configuration file?
That's it for this lesson! In the next lesson, we'll dive deeper into Angular CLI commands and explore how to generate components and services. Happy coding! šš