Skip to content

angular/angular

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

#48888)

Showing a minimum app to reproduce the bug.
1. Create the app and add angular material.
```
ng new project
cd project
ng add @angular/material
```
1. Overwrite the src/app/app.component.html with minimal content.
```
<button mat-button *ngIf="true"><span *ngIf="true" class="{{'a'}}"></span></button>
```
1. Run the app. The button is not shown because of an exception.
```
main.ts:6
ERROR TypeError: item.toLowerCase is not a function
    at isCssClassMatching (core.mjs:8726:35)
    at isNodeMatchingSelector (core.mjs:8814:22)
    at isNodeMatchingSelectorList (core.mjs:8931:13)
    at matchingProjectionSlotIndex (core.mjs:14179:13)
    at Module.ɵɵprojectionDef (core.mjs:14222:49)
    at MatButton_Template (button.mjs:113:99)
    at executeTemplate (core.mjs:10534:9)
    at renderView (core.mjs:10356:13)
    at renderComponent (core.mjs:11529:5)
    at renderChildComponents (core.mjs:10216:9)
```
Because isCssClassMatching() function does not take care if the value is not string, while attrs[] may contain AttributeMarker which is actually numbers, item.toLowerCase() throws the exception.
Just inserted a check if the item is string.

Created a testcase for the original fix. It causes an exception without the fix.

fix(core): add a check code to avoid an exception inside isCssClassMatching

Showing a minimum app to reproduce the bug.
1. Create the app and add angular material.
```
ng new project
cd project
ng add @angular/material
```
1. Add `import { MatButtonModule } from '@angular/material/button'`,
   and also MatButtonModule inside @NgModule imports in src/app/app.module.ts to use MatButtonModule.
1. Overwrite the src/app/app.component.html with minimal content.
```
<button mat-button *ngIf="true"><span *ngIf="true" class="{{'a'}}"></span></button>
```
1. Run the app. The button is not shown because of an exception.
```
main.ts:6
ERROR TypeError: item.toLowerCase is not a function
    at isCssClassMatching (core.mjs:8726:35)
    at isNodeMatchingSelector (core.mjs:8814:22)
    at isNodeMatchingSelectorList (core.mjs:8931:13)
    at matchingProjectionSlotIndex (core.mjs:14179:13)
    at Module.ɵɵprojectionDef (core.mjs:14222:49)
    at MatButton_Template (button.mjs:113:99)
    at executeTemplate (core.mjs:10534:9)
    at renderView (core.mjs:10356:13)
    at renderComponent (core.mjs:11529:5)
    at renderChildComponents (core.mjs:10216:9)
```
Because isCssClassMatching() function does not take care if the value is not string, while attrs[] may contain AttributeMarker which is actually numbers, item.toLowerCase() throws the exception.
Just inserted a check if the item is string.

PR Close #48888
e655e8a

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

Angular - The modern web developer's platform.

angular-logo
Angular is a development platform for building mobile and desktop web applications
using TypeScript/JavaScript and other languages.

www.angular.io

Contributing Guidelines · Submit an Issue · Blog

CI status   Angular on npm   Discord conversation

InsightsSnapshot


Documentation

Get started with Angular, learn the fundamentals and explore advanced topics on our documentation website.

Advanced

Development Setup

Prerequisites

Setting Up a Project

Install the Angular CLI globally:

npm install -g @angular/cli

Create workspace:

ng new [PROJECT NAME]

Run the application:

cd [PROJECT NAME]
ng serve

Angular is cross-platform, fast, scalable, has incredible tooling, and is loved by millions.

Quickstart

Get started in 5 minutes.

Ecosystem

angular ecosystem logos

Changelog

Learn about the latest improvements.

Upgrading

Check out our upgrade guide to find out the best way to upgrade your project.

Contributing

Contributing Guidelines

Read through our contributing guidelines to learn about our submission process, coding rules, and more.

Want to Help?

Want to report a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues labeled as help wanted or good first issue.

Code of Conduct

Help us keep Angular open and inclusive. Please read and follow our Code of Conduct.

Community

Join the conversation and help the community.

Love Angular badge

Love Angular? Give our repo a star ⬆️.