0

I got a problem while learning Angular 8 with material design.

I copy pasted a material design example from here https://material.angular.io/components/input/overview, it looks like this:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

When I start my Angular server with npm start the site is on localhost:4200 and I can watch it. And there it is in material design.

material design

now the fun stuff happens and I have no idea whats going on. After I save my file, even after just deleting one character and readding it, the hot reload function kicks in and reloads my site. Now I see this:

not material design

I have absolutely no idea what code I should show you, because I have no idea what's going on, but if you request any file, I can put the content of that file here.

Furthermore I can tell that I'm working in a monorepository and the angular project was created by nrwl.

I'm completely new to web dev so I have no idea what's going on.

Thanks in advance.

eXodiquas
  • 300
  • 2
  • 10
  • try to change enableIvy true to false. You will get it in you tsconfig.app.json file of your angular project. This works for me. – Saud Anjum Nov 21 '19 at 15:11
  • when I try to disable enableIvy I can't compile it with the error message: ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.6.4 was found instead. – eXodiquas Nov 22 '19 at 14:03
  • ok cool. just make the enableIvy to true and try to apply the answer which i have posted. – Saud Anjum Nov 25 '19 at 07:46

1 Answers1

0

remove this line in your angular.json file of your angular project 

"aot": true

This solved my problem. Hope it will workout in your case as well.

Saud Anjum
  • 208
  • 2
  • 12