Category: Tools

Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. Angular DevTools supports Angular v12 and later when compiled with the optimization configuration option disabled ({optimization:false}). You can find Angular DevTools in the Chrome Web Store and in Firefox Addons. After installing Angular DevTools, find the extension under the Angular tab in your browser DevTools.…

Configuring compiler options for the Angular Language Service To enable the latest Language Service features, set the strictTemplates option in tsconfig.json by setting strictTemplates to true, as shown in the following example: For more information, see the Angular compiler options guide. Features Your editor autodetects that you are opening an Angular file. It then uses the Angular Language Service to read your tsconfig.json file, find all the…

A number of Angular CLI commands run a complex process on your code, such as linting, building, or testing. The commands use an internal tool called Architect to run CLI builders, which apply another tool to accomplish the wanted task. With Angular version 8, the CLI Builder API is stable and available to developers who want…

Configuring application environments You can define different named build configurations for your project, such as development and staging, with different defaults. Each named configuration can have defaults for any of the options that apply to the various builder targets, such as build, serve, and test. The Angular CLI build, serve, and test commands can then replace files with appropriate versions for your intended target environment. Configure environment-specific…

Overview of template type checking Just as TypeScript catches type errors in your code, Angular checks the expressions and bindings within the templates of your application and can report any type errors it finds. Angular currently has three modes of doing this, depending on the value of the fullTemplateTypeCheck and strictTemplates flags in the TypeScript configuration file. Basic mode In…

The following are metadata errors you may encounter, with explanations and suggested corrections. Expression form not supportedReference to a local (non-exported) symbolOnly initialized variables and constantsReference to a non-exported classReference to a non-exported functionFunction calls are not supportedDestructured variable or constant not supportedCould not resolve typeName expectedUnsupported enum member nameTagged template expressions are not supportedSymbol…

When you use ahead-of-time compilation (AOT), you can control how your application is compiled by specifying template compiler options in the TypeScript configuration file. The template options object, angularCompilerOptions, is a sibling to the compilerOptions object that supplies standard options to the TypeScript compiler.tsconfig.json Configuration inheritance with extends Like the TypeScript compiler, the Angular AOT compiler also supports extends in the angularCompilerOptions section of the TypeScript…

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser. The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the…

Simple deployment options Before fully deploying your application, you can test the process, build configuration, and deployed behavior by using one of these interim techniques. Building and serving from disk During development, you typically use the ng serve command to build, watch, and serve the application from local memory, using webpack-dev-server. When you are ready to deploy, however,…