Angular - Create First Application

What is Angular Project?

An Angular project is a structured environment for developing web applications using the Angular framework. It includes various files and folders that helps to manage the application development, build, and deployment processes.

Step 1:

After installing the Angular CLI, use the following command to create a project named myapp:

ng new myapp --no-standalone

Step 2:

Choose a style based on your preferences. The CLI will create a project with the specified configuration.

D:\>ng new myapp --no-standalone
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS     [ https://developer.mozilla.org/docs/Web/CSS       ]
  Sass (SCSS)   [ https://sass-lang.com/documentation/syntax#scss      ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less    [ http://lesscss.org               ]

Step 3:

Type n if you want to skip enabling Server-Side Rendering (SSR).

D:\>ng new myapp --no-standalone
? Which stylesheet format would you like to use? CSS
[ https://developer.mozilla.org/docs/Web/CSS       ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation
(SSG/Prerendering)? n

Step 4:

D:\>ng new myapp --no-standalone
? Which stylesheet format would you like to use? CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? no
CREATE myapp/angular.json (2945 bytes)
CREATE myapp/package.json (1074 bytes)
CREATE myapp/README.md (1093 bytes)
CREATE myapp/tsconfig.json (1015 bytes)
CREATE myapp/.editorconfig (290 bytes)
CREATE myapp/.gitignore (629 bytes)
CREATE myapp/tsconfig.app.json (439 bytes)
CREATE myapp/tsconfig.spec.json (449 bytes)
CREATE myapp/.vscode/extensions.json (134 bytes)
CREATE myapp/.vscode/launch.json (490 bytes)
CREATE myapp/.vscode/tasks.json (980 bytes)
CREATE myapp/src/main.ts (256 bytes)
CREATE myapp/src/index.html (304 bytes)
CREATE myapp/src/styles.css (81 bytes)
CREATE myapp/src/app/app-routing.module.ts (255 bytes)
CREATE myapp/src/app/app.module.ts (411 bytes)
CREATE myapp/src/app/app.component.html (20239 bytes)
CREATE myapp/src/app/app.component.spec.ts (1075 bytes)
CREATE myapp/src/app/app.component.ts (216 bytes)
CREATE myapp/src/app/app.component.css (0 bytes)
CREATE myapp/public/favicon.ico (15086 bytes)
√ Packages installed successfully.

Folder Structure

Step 5:

To run the Angular project, use the command below:

ng serve

Step 6:

D:\myapp>ng serve
Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
    ng analytics disablee this setting, see https://angular.dev/cli/analytics.

Global setting: enabled
Local setting: enabled
Effective status: enabled
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  90.20 kB |
main.js             | main          |  23.63 kB |
styles.css          | styles        |  95 bytes |

                    | Initial total | 113.93 kB

Application bundle generation complete. [3.923 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

Step 7:

Copy the following URL and open it in your browser: http://localhost:4200/

Prev Next