Hello,

The warnings you're encountering after migrating your Angular application from version 11 to 12 are related to SCSS (Sass) and specifically involve the igxButton and igx-icon components from the Ignite UI for Angular library. The errors indicate that there are problems with certain CSS selectors, where it seems that the type property of undefined elements is being accessed, causing the issue.

These warnings suggest that the SCSS selectors defined in your stylesheets are not compatible with the expected structure or syntax after the migration. Here's a breakdown of the errors and some steps you can take to troubleshoot and resolve them:

Breakdown of Errors

1. .igx-filter-contextual-menu [igxButton] > igx-icon + *:
   • This selector targets an igx-icon that is a direct sibling of another element, with the igxButton directive. The error suggests that it is trying to access a property of an undefined object in the context of these components.
2. .igx-navbar__right > * + *:
   • This selector targets a sibling relationship within the igx-navbar__right class. The error may indicate that the structure of the navbar or its CSS class definitions have changed, resulting in the inability to parse this relationship.
3. .igx-navbar__left > * + *:
   • Similar to the previous error, this selector deals with sibling relationships but within the igx-navbar__left class.

Steps to Resolve the Issue

1. Update Ignite UI for Angular: Ensure that you are using the latest version of the Ignite UI for Angular library compatible with Angular 12. Updating the library might resolve compatibility issues. Use the following command to update:

npm update igniteui-angular

2. Review SCSS Migration: If you manually migrated SCSS files, check if all mixins, functions, and imports are correctly updated. Look for any deprecated styles or syntax changes that might have occurred in Angular 12 or Ignite UI updates.
3. Check Documentation: Refer to the Ignite UI for Angular update guide. The provided link is a good resource: Ignite UI for Angular Update Guide. This guide can provide information on breaking changes, new features, and deprecations.
4. Modify CSS Selectors:

• Review and possibly refactor the affected selectors in your stylesheets:
  • For .igx-filter-contextual-menu [igxButton] > igx-icon + *, check if this selector is necessary or can be refactored. Ensure that the HTML structure matches the expected CSS selector structure.
  • For .igx-navbar__right > * + * and .igx-navbar__left > * + *, verify that the igx-navbar elements have not changed in a way that affects the sibling relationships defined in these selectors.

5. Check Template HTML: Inspect the components where these selectors apply. Ensure that the components' HTML structure hasn't changed in a way that makes the selectors invalid. Look for deprecated attributes or elements that might have been replaced or removed.
6. Use Angular Migration Tools: Angular provides migration tools that can help automatically fix some migration issues:

ng update @angular/core@12 @angular/cli@12

Next Steps

If these approaches and suggestions do not resolve the issues, please consider the following:

1. Provide More Information: Share more detailed information about the warnings or errors, including the relevant code snippets and how these components are being used in your application.
2. Isolated Sample: If possible, create an isolated sample project that replicates the issue. This will help in diagnosing the problem more effectively.
3. Update to the Newer Version: Consider updating to a newer version of Angular and Ignite UI for Angular following the update guide. This may address compatibility issues that persist in older versions.

I am here to assist you further and will be happy to provide additional support if needed. Please let me know if you need any more information or assistance.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics