Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@angular/compiler
Advanced tools
The @angular/compiler package is a core part of the Angular framework that is responsible for compiling Angular templates into JavaScript code that can be executed by the browser. It takes the templates and annotations provided in Angular components and generates code that represents the structure and behavior of the application.
Template Compilation
This feature allows you to compile Angular components and modules dynamically at runtime. The code sample demonstrates how to use the JIT compiler to compile a module and its components asynchronously.
import { Compiler, COMPILER_OPTIONS, CompilerFactory } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
// Get a reference to the JIT compiler factory
const compilerFactory: CompilerFactory = platformBrowserDynamic().injector.get(CompilerFactory);
const compiler = compilerFactory.createCompiler();
// Compile a component dynamically
compiler.compileModuleAndAllComponentsAsync(DynamicModule)
.then(compiled => {
const moduleRef = compiled.ngModuleFactory.create(this.injector);
const componentFactory = compiled.componentFactories[0];
this.container.createComponent(componentFactory);
});
AOT Compilation
Ahead-of-Time (AOT) compilation converts Angular HTML and TypeScript code into efficient JavaScript code during the build process, before the browser downloads and runs the code. This code sample shows how to bootstrap an Angular application using the AOT-compiled module factory.
import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app/app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
Babel is a JavaScript compiler that converts ECMAScript 2015+ code into a backwards-compatible version of JavaScript that can be run by older JavaScript engines. Babel is similar to @angular/compiler in that it performs code transformation, but it is not specific to Angular and does not compile Angular templates.
TypeScript is a superset of JavaScript that compiles to plain JavaScript. It is similar to @angular/compiler in that it performs a compilation step, but TypeScript focuses on type-checking and converting TypeScript code to JavaScript, rather than compiling framework-specific templates.
The vue-template-compiler package is used to compile Vue.js templates into render functions. It is similar to @angular/compiler as both are used for compiling framework-specific templates, but they target different frameworks (Vue.js vs Angular).
The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.
Usage information and reference details can be found in Angular documentation.
License: MIT
17.0.0 (2023-11-08)
Blog post "Angular v17 is now available".
Node.js v16 support has been removed and the minimum support version has been bumped to 18.13.0.
Node.js v16 is planned to be End-of-Life on 2023-09-11. Angular will stop supporting Node.js v16 in Angular v17. For Node.js release schedule details, please see: https://github.com/nodejs/release#release-schedule
Angular now requires zone.js
version ~0.14.0
Versions of TypeScript older than 5.2 are no longer supported.
The mutate
method was removed from the WritableSignal
interface and completely
dropped from the public API surface. As an alternative, please use the update
method and
make immutable changes to the object.
Example before:
items.mutate(itemsArray => itemsArray.push(newItem));
Example after:
items.update(itemsArray => [itemsArray, …newItem]);
OnPush
components that are created dynamically now
only have their host bindings refreshed and ngDoCheck run
during change
detection if they are dirty.
Previously, a bug in the change detection would result in the OnPush
configuration of dynamically created components to be ignored when
executing host bindings and the ngDoCheck
function. This is
rarely encountered but can happen if code has a handle on the
ComponentRef
instance and updates values read in the OnPush
component template without then calling either markForCheck
or
detectChanges
on that component's ChangeDetectorRef
.
REMOVE_STYLES_ON_COMPONENT_DESTROY
default value is now true
. This causes CSS of components to be removed from the DOM when destroyed. You retain the previous behaviour by providing the REMOVE_STYLES_ON_COMPONENT_DESTROY
injection token.
import {REMOVE_STYLES_ON_COMPONENT_DESTROY} from '@angular/platform-browser';
...
providers: [{
provide: REMOVE_STYLES_ON_COMPONENT_DESTROY,
useValue: false,
}]
The withNoDomReuse()
function was removed from the public API. If you need to disable hydration, you can exclude the provideClientHydration()
call from provider list in your application (which would disable hydration features for the entire application) or use ngSkipHydration
attribute to disable hydration for particular components. See this guide for additional information: https://angular.io/guide/hydration#how-to-skip-hydration-for-particular-components.
Absolute redirects no longer prevent further redirects. Route configurations may need to be adjusted to prevent infinite redirects where additional redirects were previously ignored after an absolute redirect occurred.
Routes with loadComponent
would incorrectly cause
child routes to inherit their data by default. The default
paramsInheritanceStrategy
is emptyOnly
. If parent data should be
inherited in child routes, this should be manually set to always
.
urlHandlingStrategy
has been removed from the Router public API.
This should instead be configured through the provideRouter or RouterModule.forRoot APIs.
The following Router properties have been removed from the public API:
These should instead be configured through the provideRouter
or
RouterModule.forRoot
APIs.
The setupTestingRouter
function has been removed. Use
RouterModule.forRoot
or provideRouter
to setup the Router
for
tests instead.
malformedUriErrorHandler
is no longer available in
the RouterModule.forRoot
options. URL parsing errors should instead be
handled in the UrlSerializer.parse
method.
FAQs
Angular - the compiler library
The npm package @angular/compiler receives a total of 2,796,328 weekly downloads. As such, @angular/compiler popularity was classified as popular.
We found that @angular/compiler demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.