0

I have updated Angular from version 8 to 9. I have observed that in app.module.ts, the following has changed from

import { MatRadioModule } from '@angular/material';

To

import { MatRadioModule } from '@angular/material/radio';

Now, I am getting the following error on ng build.

  1. If 'mat-radio-button' is an Angular component, then verify that it is part of this module.
  2. If 'mat-radio-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I have tried adding CUSTOM_ELEMENTS_SCHEMA or NO_ERRORS_SCHEMA to app module with no luck.

import { NO_ERRORS_SCHEMA } from '@angular/core';
schemas: [NO_ERRORS_SCHEMA]

What will be the issue? Thanks!!

Update:

I have found similar issue here: Angular compilation fails after upgrade to Angular v9 and enabling Ivy

Pearl
  • 8,373
  • 8
  • 40
  • 59

1 Answers1

1

The issue is that you're using <mat-radio-button></mat-radio-button> within a module where MatRadioModule is not imported.

Firstly, you'll need to add angular/material and angular/cdk as dependencies to your project.

To correctly import MatRadioModule, make sure it is imported in the module, where you are using <mat-radio-button></mat-radio-button>

Like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports:      [ BrowserModule, FormsModule, MatRadioModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Now I can use it in my template like this: (within AppModule)

<mat-radio-button></mat-radio-button>

Example: https://stackblitz.com/edit/angular-c8kmds

Make sure you followed all those steps and make sure that MatRadioModule is imported in the right Module

  • 1
    still facing the same issue. – Pearl May 04 '20 at 13:44
  • 1
    @Pearl If you can, try to create a reproducer of the issue on stackblitz. Iam suspecting the Upgrade to V9 hasn't changed all the imports and messed something up. The error message should give you a hint as to where the error occured. –  May 04 '20 at 13:50
  • In the url: https://github.com/angular/components/issues/18489, he uses ([ngModel]) instead of [(ngModel])? Will it resolve the issue? – Pearl May 05 '20 at 08:30
  • 1
    `[(ngModel)]` is the correct way to two-way bind a property, there's no telling what's wrong in your application without a reproducible example. –  May 05 '20 at 08:33
  • Mike, I came across similar issue, hope it will be helpful: https://stackoverflow.com/questions/59931739/angular-compilation-fails-after-upgrade-to-angular-v9-and-enabling-ivy – Pearl May 06 '20 at 07:45