Angular – First Application
To create an Angular project named insurance-ng-app with a welcome message, follow these steps:
Step 1: Set Up Angular CLI
Ensure Angular CLI is installed globally:
npm install -g @angular/cli
Verify installation:
ng version
Step 2: Create the Angular Project
Run the following command to create the project:
ng new insurance-ng-app
- When prompted:
- Add Angular routing: No (optional).
- Choose a stylesheet format (CSS, SCSS, etc.): CSS.
Navigate into the project folder:
cd insurance-ng-app
Step 3: Serve the Application
Start the development server:
ng serve
Open your browser and go to : http://localhost:4200
Step 4: Add the Welcome Message
Modify the app.component.html file to include the welcome message:
- Open the file:
- Replace its content with:
<h1>Welcome to the Insurance Angular Project!</h1>
Step 5: Optional Styling
If desired, you can add styles to enhance the appearance:
- Open the file:
- Add styles, for example:
h1 { color: #2c3e50; font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
Step 6: View the Application
Refresh your browser. You should see:
Terminal Commands and logs
PS D:\AngularProject> ng new insurance-ng-app
√ 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)? yes
√ Would you like to use the Server Routing and App Engine APIs (Developer Preview) for this server application? yes
CREATE insurance-ng-app/angular.json (2886 bytes)
CREATE insurance-ng-app/package.json (1293 bytes)
CREATE insurance-ng-app/README.md (1536 bytes)
CREATE insurance-ng-app/tsconfig.json (942 bytes)
CREATE insurance-ng-app/.editorconfig (331 bytes)
CREATE insurance-ng-app/.gitignore (629 bytes)
CREATE insurance-ng-app/tsconfig.app.json (508 bytes)
CREATE insurance-ng-app/tsconfig.spec.json (449 bytes)
CREATE insurance-ng-app/.vscode/extensions.json (134 bytes)
CREATE insurance-ng-app/.vscode/launch.json (490 bytes)
CREATE insurance-ng-app/.vscode/tasks.json (980 bytes)
CREATE insurance-ng-app/src/main.ts (256 bytes)
CREATE insurance-ng-app/src/index.html (313 bytes)
CREATE insurance-ng-app/src/styles.css (81 bytes)
CREATE insurance-ng-app/src/main.server.ts (271 bytes)
CREATE insurance-ng-app/src/server.ts (1674 bytes)
CREATE insurance-ng-app/src/app/app.component.html (20239 bytes)
CREATE insurance-ng-app/src/app/app.component.spec.ts (975 bytes)
CREATE insurance-ng-app/src/app/app.component.ts (304 bytes)
CREATE insurance-ng-app/src/app/app.component.css (0 bytes)
CREATE insurance-ng-app/src/app/app.config.ts (447 bytes)
CREATE insurance-ng-app/src/app/app.routes.ts (80 bytes)
CREATE insurance-ng-app/src/app/app.config.server.ts (519 bytes)
CREATE insurance-ng-app/src/app/app.routes.server.ts (174 bytes)
CREATE insurance-ng-app/public/favicon.ico (15086 bytes)
√ Packages installed successfully.
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
Successfully initialized git.
PS D:\AngularProject>
PS D:\AngularProject> ng serve
Error: This command is not available when running the Angular CLI outside a workspace.
PS D:\AngularProject> cd .\insurance-ng-app\
PS D:\AngularProject\insurance-ng-app>
PS D:\AngularProject\insurance-ng-app> dir
Directory: D:\AngularProject\insurance-ng-app
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 01-12-2024 13:26 .vscode
d----- 01-12-2024 13:27 node_modules
d----- 01-12-2024 13:26 public
d----- 01-12-2024 13:26 src
-a---- 01-12-2024 13:26 331 .editorconfig
-a---- 01-12-2024 13:26 629 .gitignore
-a---- 01-12-2024 13:26 2886 angular.json
-a---- 01-12-2024 13:27 533141 package-lock.json
-a---- 01-12-2024 13:26 1293 package.json
-a---- 01-12-2024 13:26 1536 README.md
-a---- 01-12-2024 13:26 508 tsconfig.app.json
-a---- 01-12-2024 13:26 942 tsconfig.json
-a---- 01-12-2024 13:26 449 tsconfig.spec.json
PS D:\AngularProject\insurance-ng-app> ng serve
Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.dev/cli/analytics.
yes
Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:
ng analytics disable
Global setting: enabled
Local setting: enabled
Effective status: enabled
Browser bundles
Initial chunk files | Names | Raw size
polyfills.js | polyfills | 90.20 kB |
main.js | main | 18.32 kB |
styles.css | styles | 95 bytes |
| Initial total | 108.61 kB
Server bundles
Initial chunk files | Names | Raw size
polyfills.server.mjs | polyfills.server | 572.91 kB |
main.server.mjs | main.server | 19.55 kB |
server.mjs | server | 1.86 kB |
Application bundle generation complete. [6.966 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
Component stylesheet(s) changed.
Application bundle generation complete. [0.017 seconds]
Recent Comments