Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
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.
@angular-eslint/template-parser
Advanced tools
@angular-eslint/template-parser is a parser for Angular templates that integrates with ESLint. It allows developers to lint Angular templates using ESLint rules, ensuring code quality and consistency in Angular projects.
Parsing Angular Templates
This feature allows you to parse Angular templates into an Abstract Syntax Tree (AST), which can then be analyzed or transformed. The code sample demonstrates how to parse a simple Angular template.
const parser = require('@angular-eslint/template-parser');
const ast = parser.parse('<div>{{ title }}</div>');
console.log(ast);
Integration with ESLint
This feature allows you to integrate the template parser with ESLint, enabling you to apply ESLint rules to Angular templates. The code sample shows a basic ESLint configuration using the @angular-eslint/template-parser.
module.exports = {
parser: '@angular-eslint/template-parser',
plugins: ['@angular-eslint'],
extends: ['plugin:@angular-eslint/recommended'],
rules: {
// custom rules
}
};
eslint-plugin-angular is a plugin for ESLint that provides linting rules specific to AngularJS (Angular 1.x). While it offers similar functionality in terms of linting Angular code, it is designed for the older version of Angular and does not support Angular templates in the same way as @angular-eslint/template-parser.
Codelyzer is a set of TSLint rules for static code analysis of Angular TypeScript projects. It provides similar functionality in terms of linting Angular code, but it is based on TSLint, which has been deprecated in favor of ESLint. @angular-eslint/template-parser is part of the modern ESLint ecosystem.
Please see https://github.com/angular-eslint/angular-eslint for full usage instructions and guidance.
The @angular-eslint/template-parser
package is a custom parser for ESLint which allows you to write lint rules and run linting using ESLint on Angular templates.
18.0.1 (2024-05-30)
As part of the v18 release, support for typescript-eslint v8 prereleases was added. For authors of custom rules that consume the @angular-eslint/utils
or new @angular-eslint/test-utils
packages, the initial way this was set up with dependencies could cause type conflicts between v7 and v8. To resolve this the @angular-eslint/*
packages now depend on @typescript-eslint/*
packages via a peerDependency which permits both v7 and v8 prereleases.
As always we recommend that you update your existing workspaces by using ng update
as we provide some helpful schematics to help migrate your workspaces to the latest and greatest. Running the following will update Angular, the Angular CLI and angular-eslint together:
ng update @angular/core @angular/cli @angular-eslint/schematics
NOTE: There will not be any migration of your setup to ESLint v9 or flat configs for existing workspaces in v18.
The ESLint team are working on auto-migrate tooling which we will leverage in an opt-in conversion generator once it is ready in a v18 minor release and consider full auto-migration in v19 in six months (aligned with Angular major release schedule as always).
If you want to manually migrate your workspace to use ESLint v9, typescript-eslint
v8, and flat config you are welcome to and it should be fully supported in v18.
If you are going to attempt this, we strongly recommended creating a fresh Angular v18 workspace and adding angular-eslint to it per the instructions below and then copying the dependencies and configs that it applies into your existing workspace
Here is an example of what the new flat config with angular-eslint
v18, typescript-eslint
v8, and ESLint v9 looks like:
There is a decision to be made when adding to new Angular v18 workspaces.
Just as before, if you want to add angular-eslint
to a workspace with no existing lint setup, you leverage ng add
with the @angular-eslint/schematics
package.
The difference is in v18, you have the option of using either:
eslint.config.js
) alongside the latest prerelease of typescript-eslint
v8 (https://typescript-eslint.io/blog/announcing-typescript-eslint-v8-beta)
OR.eslintrc.json
) and the latest stable version of typescript-eslint
v7The ESLint v9 option is the default scenario if you simply run ng add
with no other changes. If you want to signal to angular-eslint
that you instead want to go with the ESLint v8 option, simply add an eslint
v8 (the exact version does not matter, it just needs to be less than 9) devDependency
in your package.json before running the ng add
. That's it - you don't even need to install the eslint
package, it just needs to be listed there.
E.g.
Here are example "after" root package.json
files from the two scenarios:
1. No eslint
devDependency specified before running ng add
, use the default ESLint v9 setup. This will use the new angular-eslint
and typescript-eslint
core packages, so you will see much fewer individual devDependencies added:
2. eslint
v8 devDependency is specified before running ng-add
. Use ESlint 8.57.0
and the traditional @typescript-eslint/
and @angular-eslint/
packages.
@angular-eslint/eslint-plugin
(#1830)@angular-eslint/utils
into new @angular-eslint/test-utils
package (#1830)8.57.0
). (#1830)angular-eslint
core package for use in ESLint v9 workspaces (#1830)typescript-eslint
v8 prereleases (#1830)@angular-eslint/eslint-plugin
(#1830)@angular-eslint/utils
into new @angular-eslint/test-utils
package (#1830)FAQs
Angular Template parser for ESLint
The npm package @angular-eslint/template-parser receives a total of 1,265,027 weekly downloads. As such, @angular-eslint/template-parser popularity was classified as popular.
We found that @angular-eslint/template-parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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
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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.