Angular serve works in dev but fails in prod due to a form related import

Question

I get the following error when I run a prod build on my Angular 9 app.

ERROR in Can't export value FormControl in from MaterialModule in as it was neither declared nor imported!

I have imported FormsModule and ReactiveForms Module in my App Module and a shared Module called


// Angular Material Components
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule }   from '@angular/forms';
import { ReactiveFormsModule, FormControl } from '@angular/forms';

const MatModules = [

  ReactiveFormsModule,
  FormControl,
  FormsModule,
]

@NgModule({
  declarations: [ ],
  imports : [
    FormsModule,
    ReactiveFormsModule
   ],
  exports : [ MatModules ]
})

export class MaterialModule { }

Kindly let me know what I am missing.

Thanks!

Warm Regards, Adi

As the error message tells you: You are trying to export class `FormControl` that you have not imported. Note that it's about the import/export sections of NgModule annotation and I can't see any reason why you want to export FormControl there. — Christoph Lütjen, Jun 28 '20 at 17:25

score 2 · Accepted Answer · answered Jun 28 '20 at 17:46

2

My question is: why you want export FormControl? You don't need import/export FormControl, you just need to import ReactiveFormsModule and you will be able to use FormControl.

answered Jun 28 '20 at 17:46

Alin Bizau

79
1
6

Thank you! I removed the FormControl and it worked! – Aditya P Jul 06 '20 at 16:29

score 1 · Answer 2 · answered Jun 28 '20 at 17:47

1

Your missing import FromControl from '@material-ui/core'

import FormControl from '@material-ui/core/FormControl';
// or
import { FormControl } from '@material-ui/core';

Refer : https://material-ui.com/api/form-control/

answered Jun 28 '20 at 17:47

Bayu Dwiyan Satria

986
12
28

Thank you for the response. We weren't using FormControl, but had copied it accidentally. Removing it fixed the issue – Aditya P Jul 06 '20 at 16:30
Oh sure, great to hear that. – Bayu Dwiyan Satria Jul 06 '20 at 16:41

Aditya P · Answer 3 · 2020-07-22T18:48:38.707

0

I created a new Angular 9 Project and try to serve a prod build. The issue reoccurred.

In the end, instead of making changes to angular, I decided to just go with Angular 10 as a workaround. Fortunately, everything went smoothly in the new version.

edited Jul 22 '20 at 18:48

answered Jul 22 '20 at 17:56

Aditya P

19
1
9

Angular serve works in dev but fails in prod due to a form related import

3 Answers3