0

I created an Angular project with Angular Material (both version 10.0.1). In development mode everything works fine, but in production mode I can't see my mat-cards. However, I can click on them, so they are actually there. When I click on them, they do what they have to do, so the functionality works as well.

How it should look like: enter image description here

How it actually looks: enter image description here

Here is my create.component.html:

<a routerLink="/add/info" routerLinkActive="active">
<mat-card class="add">
    <div class="text-right">
        <i class="material-icons noselect">add_circle_outline</i>
    </div>
    <div class="red-box noselect">
        <div class="box-text noselect">
            create
        </div>
    </div>
</mat-card>

and here my homepage.component.html:

<body>
<div fxLayout="row wrap" fxLayoutAlign="space-between center" >
    <div fxFlex>
        <app-create></app-create>
    </div>
    <div fxFlex="50">
        <app-search></app-search>
    </div>
    <div fxFlex>
        <app-all></app-all>
    </div>
</div>

Do you have an idea what effects this behavior? Do you need anything else to know to help me?

Let me know. Thank you!

PS: I get as well this conflict message in production mode: Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt

SOLVED: Actually my mat-card has "opacity: 90%", but in production mode it was changed to "opacity: 1%".

julki
  • 153
  • 1
  • 1
  • 7
  • Where have you imported the Material Module ? Can you add some code to better understand your question. – nitin9nair Jul 17 '20 at 11:13
  • @nitin9nair I imported it in the app.module.ts. I add some code to the actual post. – julki Jul 17 '20 at 11:27
  • 1
    Based on the code you added, it seems the `mat-card` is `visibility: hidden`, if you able to click them in production, then just check your CSS code maybe some style or CSS class is overriding mat-card's CSS. – nitin9nair Jul 17 '20 at 11:43
  • you're right! Actually my mat-card has "opacity: 90%", but in production mode it was changed to "opacity: 1%". Thanks a lot!! – julki Jul 17 '20 at 11:48
  • That's awesome. Can you also write the answer to the question, so that other people will get to know what the solution to the issue was ? – nitin9nair Jul 17 '20 at 11:49
  • sure! but do you have an idea, why the opacity is changed that way? – julki Jul 17 '20 at 11:54
  • 1
    Best guess is that maybe some style was getting overrided for `mat-card`. – nitin9nair Jul 17 '20 at 11:55

0 Answers0