Angular 4 Production

[Benjamin Ugbene]

Hi guys, let me start by saying that I'm new to Angular.

I built a small application using a
Angular 4 (via Angular CLI), Angular Material 2, and Firebase 3.

This application works perfectly when I run `ng serve`; however, when I build using `ng build --prod --aot` some pages do not render properly, and do not display any errors in the console.

Any ideas please? I've spent a bit over a week researching deployment methods and so far nothing has panned out. Actually deployed to Firebase, and got the same result.

Thanks in advance.

Best regards,
Ben

[Sander Elias]

Hi Benjamin,

This application works perfectly when I run `ng serve`; however, when I build using `ng build --prod --aot` some pages do not render properly, and do not display any errors in the console. 

If you don't provide more detail as this, it's very difficult to help you! What does not render properly? define your idea of properly! what did you expect? what did you get?  

Regards

Sander

[Benjamin Ugbene]

Hi Sander,

Thanks for replying, and for taking an interest. Please see attached screenshots for one of the examples.

I have attached two files. One shows how the page renders when it loads using `ng serve`, the other shows what the production build looks like.

Any clue as to why this would happen please?

Many thanks,

Benjamin

[Sander Elias]

Hi Benjamin,

Looks like there is some missing css, look into the developers tools network tab, and see if there is a 404 somehwere.

Regards

Sander

[Benjamin Ugbene]

Hi Sander,

Thanks again for your reply.

There are no visible errors on any of the tabs - please see screenshots of network and console tabs.

However, there is definitely something fishy going on on that page; because, when I hit the back button, the previous page fails to load associated data, even though it loads it when I visit that page first - please see screenshots.

Thanks again for your interest, and any help will be much appreciated. Will keep digging though.

Best regards,

Benjamin

[Sander Elias]

Ho Benjamin,

What happens if you use aot on dev?

ng serve --aot true --prod

[Benjamin Ugbene]

Hi Sander,

The same production issue happens, and still no errors. Thanks for that command though, I will take that page apart, component after component, till I find the culprit.

Will let you know how I get on.

Best regards,

Ben

[Benjamin Ugbene]

Hi Sander,

Well, this still does not make sense, but it looks like the conflict is as a result of form elements on the page. As soon as I add any form/input elements... KABLOOWEE!!

<spinner class="centered" *ngIf="isLoading; else hymnForm"></spinner>

<ng-template #hymnForm>

   <md-card class="hymn-card">

       <md-card-title><h1>{{ page_title }}</h1></md-card-title>

       <form [formGroup]="form" (ngSubmit)="save($event)">

           <md-card-subtitle>

               <span class="alert form-text alert-danger" *ngIf="error && form.touched">

                   {{ error }}

               </span>

           </md-card-subtitle>

           <md-card-content>

                   <fieldset>

                       <div class="form-group">

                           <label for="number">

                               Hymn Number

                               <span class="required">*</span>

                           </label>

                           <input type="number"

                               mdInput

                               class="form-control"

                               id="number"

                               formControlName="number"

                               placeholder="Number"

                               [(ngModel)]="hymn.number">

                           <div *ngIf="form.controls.number.touched && form.controls.number.errors">

                               <span class="help-block alert alert-danger" *ngIf="form.controls.number.errors.required">

                                   Number is required.

                               </span>

                               <span class="help-block alert alert-danger" *ngIf="form.controls.number.errors.numberRequired">

                                   Please enter a numeric value.

                               </span>

                           </div>

                       </div>

                       <div class="form-group">

                           <label for="title">

                               Title

                               <span class="required">*</span>

                           </label>

                           <input type="text"

                               mdInput

                               class="form-control"

                               id="title"

                               formControlName="title"

                               placeholder="Title"

                               [(ngModel)]="hymn.title">

                           <div *ngIf="form.controls.title.touched && form.controls.title.errors">

                               <span class="help-block alert alert-danger" *ngIf="form.controls.title.errors.required">

                                   Title is required.

                               </span>

                               <span class="help-block alert alert-danger" *ngIf="form.controls.title.errors.maxWidth">

                                   Please enter a valid title.

                               </span>

                           </div>

                       </div>

                       <div class="form-group">

                           <label for="content">

                               Content

                               <span class="required">*</span>

                           </label>

                           <textarea

                               mdInput

                               class="form-control"

                               id="content"

                               formControlName="content"

                               placeholder="Content"

                               [(ngModel)]="hymn.content"></textarea>

                           <div *ngIf="form.controls.content.touched && form.controls.content.errors">

                               <span class="help-block alert alert-danger" *ngIf="form.controls.content.errors.required">

                                   Content is required.

                               </span>

                           </div>

                       </div>

                       <div class="form-group">

                           <label for="tags">

                               Tags

                               <span class="required">*</span>

                           </label>

                           <tag-input

                               mdInput

                               class="form-control"

                               id="tags"

                               theme='bootstrap'

                               formControlName="tags"

                               [modelAsStrings]="true"

                               [(ngModel)]='hymn.tags'></tag-input>

                           <div *ngIf="form.controls.tags.touched && form.controls.tags.errors">

                               <span class="help-block alert alert-danger" *ngIf="form.controls.tags.errors.required">

                                   Please provide at least one tag.

                               </span>

                           </div>

                       </div>

                   </fieldset>

                   <input type="hidden" id="$key" formControlName="$key" [(ngModel)]="hymn.$key">

           </md-card-content>

           <md-card-footer>

               <div class="button-row">

                   <button

                       type="button"

                       color="warn"

                       class="pull-left"

                       (click)="onGoBack()"

                       md-raised-button>Cancel</button>

                   <button

                       [disabled]="!form.valid"

                       type="submit"

                       color="primary"

                       class="pull-right"

                       md-raised-button>Save</button>

               </div>

           </md-card-footer>

       </form>

   </md-card>

</ng-template>

Simply putting the form element itself, triggers the conflict.

This makes no sense.

I tried removing the `md-card` components, but the buttons still did not display properly.

Still investigating, but do you have any ideas please?

Best regards,

Benjamin

[Sander Elias]

Can you run a ng version, and paste the output here?

Are you sure your forms module is on the same version as the rest of angular?

Regards

Sander

[Benjamin Ugbene]

Please see attached

[Benjamin Ugbene]

I just discovered something. The error actually occurs when I use the 'formControlName' directive on an element.

I was able to get it to display fine with the form element alone, and with a template driven form element.

[Benjamin Ugbene]

[Benjamin Ugbene]

The thing is, I need the form to be a model driven form, for the purpose of validation.

[Benjamin Ugbene]

Eureka!!! I finally figured it out.

Thanks Sander, you made me realize that I was looking in the wrong place, and the `ng serve --aot true --prod` command was a great help.

The problem is that I was using formControlName, and [(ngModel)] directives together. I removed the latter and presto :D.

Yay!!

Thanks again, overjoyed at the moment.

Best regards,

Benjamin

[Sander Elias]

I see both formControlName and ngModel. I think you should only use one of those.  For template driven forms you use ngModel, for reactive forms, you use formControlName. not both.

Have a look at the example in the docs page

Regards

Sander

[b...@sfi.ca]

The best part of this thread is you figured out the problem.

The 2nd best part is the word KABLOOWEE!!  which I haven't seen in ages.. love it!  ;-)

[Benjamin Ugbene]

Yeah, that was my bad. Would have expected it to fail in dev mode as well though.

Thanks again :).

[Benjamin Ugbene]

:D