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.

Entry file

The entry file for this template must be index.ts.

You can configure the main entry file, HTML index, and global styles in angular.json under the build target options. For example:

"options": {
  "outputPath": "dist/app",
  "index": "index.html",
  "main": "index.ts",
  "polyfills": [
    "zone.js"
  ],
  "tsConfig": "tsconfig.json",
  "assets": [],
  "styles": ["style.css"],
  "scripts": []
}

• main — application entry file (e.g. main.ts or index.ts)
• index — HTML entry (e.g. index.html)
• styles — global style files (e.g. ["style.css"])

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.

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();
  });
});

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

Write-tests challenges

This template supports write-tests challenges. The reference solution is already written and you write the tests: they must pass on the reference solution and catch every hidden buggy variant. Test runs your tests against the reference solution only, while Verify tests and Submit also run them against the hidden buggy variants. Read Solving a write-tests challenge for the full flow.

• Test runner: Jest (jest-preset-angular) + @testing-library/angular
• This template has no jest-dom matchers. Assert with plain Jest instead: expect(screen.getByText('Count: 0')).toBeTruthy() and expect(button.disabled).toBe(true).
• The component template (app.component.html) is part of the reference solution, so a hidden bug can be in either the .ts or the .html file.
• Name test files *.spec.ts. The Angular build behind the web preview excludes *.spec.ts, so any other name would break the preview.

A complete example is in Write-tests examples by template.

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

1. Identify the Problem Area: Determine the component, service, or function where the problem may be occurring.

2. Insert console.log() Statements: Place console.log() statements strategically throughout your code to output relevant data such as variable values, function invocations, or HTTP responses.

3. Check the Results Output of your tests:

4. 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.

5. 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:

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
  }
}