Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
Yes
Description
In v22.0.1, commit 1ee224ca30 ("fix(compiler): disallow i18n event attributes") widened the i18n attribute security check to reject any i18n-prefixed attribute whose name starts with the substring on (case-insensitive):
// packages/compiler — I18nMetaVisitor._visitElementLike
if (isTrustedType || name.toLowerCase().startsWith('on')) {
this._reportError(attr, `Translating attribute '${name}' is disallowed for security reasons.`);
}
The intent is to block translation of event-handler attributes (onclick, onmouseover, …). But String.prototype.startsWith('on') matches much more than event handlers — it also matches the bare attribute on, as well as online, onboarding, once, etc. These are legitimate, translatable attributes and are now rejected as a false positive.
This breaks Kendo UI for Angular's Switch component (@progress/kendo-angular-inputs), whose precompiled kendoSwitchLocalizedMessages container declares i18n-on="kendo.switch.on|The On label of the Switch." for its On/Off labels. Any app importing now fails to build:
✘ [ERROR] Errors found in the template:
Translating attribute 'on' is disallowed for security reasons. ("oSwitch"], ngImport: i0, template: `
<ng-container kendoSwitchLocalizedMessages
[ERROR ->]i18n-on="kendo.switch.on|The **On** label of the Switch."
on="ON"
...
Since that template ships precompiled in node_modules, downstream apps cannot work around it other than pinning Angular back to 22.0.0.
Please provide a link to a minimal reproduction of the bug
https://codesandbox.io/p/sandbox/recursing-sun-295n98
Please provide the exception or error you saw
Error: Errors during JIT compilation of template for AppComponent: Translating attribute 'on' is disallowed for security reasons. (" <p on="ON" [ERROR ->]i18n-on="meaning|The On label">Hello</p> "): ng:///AppComponent/template.html@0:12
at parseJitTemplate (/node_modules/@angul…piler.mjs:40:184779)
at CompilerFacadeImpl.compileComponent (/node_modules/@angul…piler.mjs:40:174790)
at AppComponent.get (/node_modules/@angul…-chunk.mjs:5:627220)
at getComponentDef (/node_modules/@angul…ks-chunk.mjs:682:14)
at assertComponentDef (/node_modules/@angul…-chunk.mjs:5:120525)
at assertStandaloneComponentType (/node_modules/@angul…-chunk.mjs:5:119972)
at internalCreateApplication (/node_modules/@angul…22/core.mjs:5095:58)
at bootstrapApplication (/node_modules/@angul…er-chunk.mjs:279:44)
console.<computed> @ index.js:9
console.<computed> @ sandbox.39927e00d.js:2
eval @
invoke @
run @
eval @
invokeTask @
runTask @
drainMicroTaskQueue @
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 22.0.1
Angular : 22.0.1
Node.js : 24.15.0
Package Manager : pnpm 11.6.0
Operating System : darwin arm64
┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/core │ 22.0.1 │ catalog: │
│ @angular-devkit/schematics │ 22.0.1 │ catalog: │
│ @angular/animations │ 22.0.1 │ catalog: │
│ @angular/build │ 22.0.1 │ catalog: │
│ @angular/cdk │ 20.2.5 │ catalog: │
│ @angular/cli │ 22.0.1 │ catalog: │
│ @angular/common │ 22.0.1 │ catalog: │
│ @angular/compiler │ 22.0.1 │ catalog: │
│ @angular/compiler-cli │ 22.0.1 │ catalog: │
│ @angular/core │ 22.0.1 │ catalog: │
│ @angular/forms │ 22.0.1 │ catalog: │
│ @angular/language-service │ 22.0.1 │ catalog: │
│ @angular/localize │ 22.0.1 │ catalog: │
│ @angular/material │ 20.2.5 │ catalog: │
│ @angular/platform-browser │ 22.0.1 │ catalog: │
│ @angular/platform-browser-dynamic │ 22.0.1 │ catalog: │
│ @angular/router │ 22.0.1 │ catalog: │
│ @schematics/angular │ 22.0.1 │ 22.0.0 │
│ ng-packagr │ 22.0.1 │ 22.0.0 │
│ rxjs │ 7.8.2 │ catalog: │
│ typescript │ 6.0.3 │ 6.0.3 │
│ zone.js │ 0.16.2 │ 0.16.2 │
└───────────────────────────────────┴───────────────────┴───────────────────┘
Anything else?
Surfaced via @progress/[email protected] (kendo-switch). Introduced in 22.0.1 by 1ee224ca30.
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
Yes
Description
In v22.0.1, commit 1ee224ca30 ("fix(compiler): disallow i18n event attributes") widened the i18n attribute security check to reject any i18n-prefixed attribute whose name starts with the substring on (case-insensitive):
The intent is to block translation of event-handler attributes (onclick, onmouseover, …). But String.prototype.startsWith('on') matches much more than event handlers — it also matches the bare attribute on, as well as online, onboarding, once, etc. These are legitimate, translatable attributes and are now rejected as a false positive.
This breaks Kendo UI for Angular's Switch component (@progress/kendo-angular-inputs), whose precompiled kendoSwitchLocalizedMessages container declares i18n-on="kendo.switch.on|The On label of the Switch." for its On/Off labels. Any app importing now fails to build:
Since that template ships precompiled in node_modules, downstream apps cannot work around it other than pinning Angular back to 22.0.0.
Please provide a link to a minimal reproduction of the bug
https://codesandbox.io/p/sandbox/recursing-sun-295n98
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run
ng version)Anything else?
Surfaced via @progress/[email protected] (kendo-switch). Introduced in 22.0.1 by 1ee224ca30.