docs/en/framework/ui/angular/quick-start.md
//[doc-seo]
{
"Description": "Learn how to set up your development environment for ABP Angular 21.x with this quick start guide, ensuring a smooth development experience."
}
In this version ABP uses Angular 21.0.x version. You don't have to install Angular CLI globally
Please follow the steps below to prepare your development environment for Angular.
v20.19+ installer for your OS. An alternative is to install NVM and use it to have multiple versions of Node.js in your operating system.You have multiple options to initiate a new Angular project that works with ABP:
ABP CLI is probably the most convenient and flexible way to initiate an ABP solution with an Angular frontend. Simply install the ABP CLI and run the following command in your terminal:
abp new MyCompanyName.MyProjectName -csf -u angular
To see further options in the CLI, please visit the CLI manual.
This command will prepare a solution with an Angular and a .NET Core project in it. Please visit Getting Started section for further instructions on how to set up the backend of your solution.
To continue reading without checking other methods, visit Angular project structure section.
You can generate a CLI command on the get started page of the abp.io website. Then, use the command on your terminal to create a new Startup Template.
After creating a solution, open its "angular" directory in your IDE. This is how the contents of the root folder looks like:
Here is what these folders and files are for:
yarn or npx to make them work.Now let us take a look at the contents of the source folder.
Phew! So many files, right? Yet, most of them are typically not subject to change or, even when they are so, the CLI tooling will do the job for you. The main focus should be on the app folder and its content.
Next, we will take a look at the commands used to prepare, build, and serve our application.
Now that you know about the files and folders, we can get the application up and running.
yarn or npm install if you have not already.yarn start or npm start. The first compilation may take a while. This will start a live development server and launch your default browser in the end.You may modify the behavior of the start script (in the package.json file) by changing the parameters passed to the ng serve command. For instance, if you do not want a browser window to open next time you run the script, remove --open from the end of it. Please check ng serve documentation for all available options.
The development server runs via Angular's Application Builder and uses a fast, modern dev server under the hood. It tracks changes to source files and refreshes the browser after an incremental compilation every time <sup id="a-dev-server">2</sup> you make one. Your experience will be like this:
Please keep in mind that you should not use this server in production. To provide the fastest experience, the compiler skips some heavy optimizations and the development server is simply not built for multiple clients. The next section will describe what to do.
<sup id="f-certificate-error"><b>1</b></sup> If you see the error above when you run the Angular app, your browser might be blocking access to the API because of the self-signed certificate. Visit that address and allow access to it (once). When you see the Swagger interface, you are good to go. <sup>↩</sup>
<sup id="f-dev-server"><b>2</b></sup> Sometimes, depending on the file changed, the development server may not pick up the change (for example, certain configuration files like tsconfig are not watched). In such a case, please restart the development server. <sup>↩</sup>
An Angular application can have multiple build targets, i.e. configurations in angular.json which define how Architect will build applications and libraries. Usually, each build configuration has a separate environment variable file. Currently, the project has two: One for development and one for production.
// this is what environment variables look like
// can be found at /src/environments/environment.ts
import { Config } from '@abp/ng.core';
const baseUrl = 'http://localhost:4200';
export const environment = {
production: false,
application: {
baseUrl,
name: 'MyProjectName',
logoUrl: '',
},
oAuthConfig: {
issuer: 'https://localhost:44381',
redirectUri: baseUrl,
clientId: 'MyProjectName_App',
responseType: 'code',
scope: 'offline_access MyProjectName',
},
apis: {
default: {
url: 'https://localhost:44381',
rootNamespace: 'MyCompanyName.MyProjectName',
},
},
} as Config.Environment;
When you run the development server, variables defined in environment.ts take effect. Similarly, in production mode, the default environment is replaced by environment.prod.ts and completely different variables become effective. You may even create a new build configuration and set file replacements to use a completely new environment. For now, we will start a production build:
yarn or npm install if you have not installed dependencies already.yarn build:prod or npm run build:prod.Depending on project size, the compilation may take a few minutes. When it is finished, the compiled output will be placed inside the /dist folder. Voila! You have deployment-ready build artifacts.
The amount of optimization performed on the source is the main difference between a regular build and a production one. Production builds have a much smaller size and are more performant.
Angular web applications run on the browser and require no server except for a static web server to deliver files to the client. To see that it works, please make sure the backend application is up and then run the following command in your terminal:
# please replace MyProjectName with your project name
npx servor dist/MyProjectName/browser index.html 4200 --browse
This command will download and start a simple static server, a browser window at http://localhost:4200 will open, and the compiled output of your project will be served.
Of course, you need your application to run on an optimized web server and become available to everyone. This is quite straight-forward:
dist/MyProjectName <sup id="a-dist-folder-name">1</sup> to a publicly served destination on the server via CLI of the service provider, SSH, or FTP (whichever is available). This step would be defined as a job if you have a CI/CD flow.In addition, you can deploy your application to certain targets using the Angular CLI. Here are some deploy targets:
<sup id="f-dist-folder-name"><b>1</b></sup> The compiled output will be placed under /dist in a folder by the project name. <sup>↩</sup>