What is @angular/common?
The @angular/common package is a core Angular library that provides commonly needed services, pipes, and directives that are essential for application development. It is part of the Angular framework and is used for tasks such as HTTP communication, localization, and various utility functions.
What are @angular/common's main functionalities?
HTTP Client
Provides a simplified API for HTTP functionality which allows performing HTTP requests and handling responses within an Angular application.
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
]
})
export class AppModule { }
Common Directives
Includes directives like ngIf, ngFor, and ngSwitch which are essential for controlling the rendering of the template.
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
]
})
export class SharedModule { }
Location Services
Provides services for interacting with the browser's URL. Useful for routing and navigation within an Angular application.
import { Location } from '@angular/common';
@Component({
selector: 'app-component',
template: '<p>Current path: {{ location.path() }}</p>'
})
export class AppComponent {
constructor(public location: Location) { }
}
Date, Currency, and Decimal Pipes
Provides built-in pipes for formatting data such as dates, currency, and numbers.
import { DatePipe, CurrencyPipe, DecimalPipe } from '@angular/common';
@Component({
selector: 'app-component',
template: '<p>Today is {{ today | date }}</p><p>Amount: {{ amount | currency }}</p>'
})
export class AppComponent {
today = new Date();
amount = 1234.56;
}
Other packages similar to @angular/common
react
React is a JavaScript library for building user interfaces. While it is not a one-to-one comparison with @angular/common, React provides a component-based architecture similar to Angular's directives and services.
vue
Vue.js is a progressive JavaScript framework used for building UIs and single-page applications. It offers similar directives and reactivity systems but is generally considered to be more lightweight and easier to integrate into projects than Angular.
axios
Axios is a promise-based HTTP client for the browser and Node.js. It provides many of the same HTTP client capabilities as the HttpClientModule in @angular/common.
moment
Moment.js is a library for parsing, validating, manipulating, and formatting dates. It is similar to the DatePipe in @angular/common but is a standalone library focused solely on date manipulation.
19.0.0-next.0 (2024-08-14)
Breaking Changes
core
-
Errors that are thrown during ApplicationRef.tick
will now be rethrown when using TestBed
. These errors should be
resolved by ensuring the test environment is set up correctly to
complete change detection successfully. There are two alternatives to
catch the errors:
- Instead of waiting for automatic change detection to happen, trigger
it synchronously and expect the error. For example, a jasmine test
could write
expect(() => TestBed.inject(ApplicationRef).tick()).toThrow()
TestBed
will reject any outstanding ComponentFixture.whenStable
promises. A jasmine test,
for example, could write expectAsync(fixture.whenStable()).toBeRejected()
.
As a last resort, you can configure errors to not be rethrown by
setting rethrowApplicationErrors
to false
in TestBed.configureTestingModule
.
router
- The
Router.errorHandler
property has been removed.
Adding an error handler should be configured in either
withNavigationErrorHandler
with provideRouter
or the errorHandler
property in the extra options of RouterModule.forRoot
. In addition,
the error handler cannot be used to change the return value of the
router navigation promise or prevent it from rejecting. Instead, if you
want to prevent the promise from rejecting, use resolveNavigationPromiseOnError
. - The return type of the
Resolve
interface now includes
RedirectCommand
.
core
| Commit | Type | Description |
| -- | -- | -- |
| 468d3fb9b1 | fix | rethrow errors during ApplicationRef.tick in TestBed (#57200) |
router
| Commit | Type | Description |
| -- | -- | -- |
| f271021e19 | feat | Add routerOutletData
input to RouterOutlet
directive (#57051) |
| b2790813a6 | fix | Align RouterModule.forRoot errorHandler with provider error handler (#57050) |
| 7436d3180e | fix | Update Resolve interface to include RedirectCommand like ResolveFn (#57309) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="18.2.0"></a>