Angular
You should create a main component named AppComponent
with a template file app.component.html
. Your Angular application should be linted using TSLint with the recommended configuration.
Version
Running on Node.js v20.0.0
Supported languages
Typescript or Javascript
Testing framework
- Jest
- RxJS for reactive programming. You can use observables and operators from this library. For instance, you can import observables using
import { Observable } from 'rxjs';
. - It’s pre-configured to support TypeScript, but you can define a .js file if needed.
Special reminders and implementation details
- Angular Testing Library, a library that is built on top of DOM Testing Library by adding APIs for working with Angular components.
ts
import { render } from '@testing-library/angular';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
it('should display the title', async () => {
const { getByText } = await render(AppComponent);
expect(getByText('Hello world!')).toBeTruthy();
});
});
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Included libraries
- angular/animations
- angular/common
- angular/compiler
- angular/core
- angular/forms
- angular/platform-browser
- angular/platform-browser-dynamic
- angular/router
- tslib
- zone.js
- karma-mocha
- karma-chrome-launcher
- karma-structured-json-reporter
- angular-devkit/build-angular/plugins/karma
- @angular/compiler-cli
- @testing-library/angular
- jest-environment-jsdom
- jest-preset-angular
- ts-node
- typescript
How to debug
Debugging Angular applications is essential for maintaining code quality and diagnosing issues. console.log()
statements can be an effective tool for debugging Angular code.
Steps to Debug Using Console Logs
Identify the Problem Area: Determine the component, service, or function where the problem may be occurring.
Insert
console.log()
Statements: Placeconsole.log()
statements strategically throughout your code to output relevant data such as variable values, function invocations, or HTTP responses.Check the Results Output of your tests:
Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.
Analyze the Output: Review the logged output in the console to understand the flow of your Angular application and identify potential issues or unexpected behaviors.
Here’s an example of how to use console.log()
for debugging in Angular:
typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
<div>
<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
</div>
`
})
export class CounterComponent {
count: number = 0;
increment() {
console.log('Button clicked!'); // Log button click
this.count++;
}
ngOnInit() {
console.log('Component initialized.'); // Log component initialization
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23