简体   繁体   中英

Angular 6 ng build --prod error “ERROR Error: ngIfElse must be a TemplateRef, but received 'true'.”

ERROR Error: ngIfElse must be a TemplateRef, but received 'true'

HTML File

<select class="form-control">
  <option selected value="0">Select Manufacturer</option>
  <option *ngFor="let brand of allMakes">
     {{ brand.brand }}
  </option>
</select>

ts file

  this.allMakes = [{
    id: '1',
    brand: 'Mazda'
  },
  {
    id: '2',
    brand: 'Audi',
  }];

It all started right after i upgraded from Angular 5 to Angular 6

Console Log Error

ERROR Error: ngIfElse must be a TemplateRef, but received 'true'.
  at Vt (main.6e360f04b7d39ee1dc33.bundle.js:1)
  at t.set [as ngIfElse] (main.6e360f04b7d39ee1dc33.bundle.js:1)
  at Sa (main.6e360f04b7d39ee1dc33.bundle.js:1)
  at main.6e360f04b7d39ee1dc33.bundle.js:1
  at main.6e360f04b7d39ee1dc33.bundle.js:1
  at es (main.6e360f04b7d39ee1dc33.bundle.js:1)
  at Os (main.6e360f04b7d39ee1dc33.bundle.js:1)
  at Object.updateDirectives 
  (main.6e360f04b7d39ee1dc33.bundle.js:1)
  at Object.updateDirectives (main.6e360f04b7d39ee1dc33.bundle.js:1)
  at ts (main.6e360f04b7d39ee1dc33.bundle.js:1)

For ngIf with else block you need to use <ng-template> block as a else in your .html file.

Here is the sample code:

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div> <ng-template #elseBlock>Content to render when condition is false.</ng-template>

Issues solved, the cause was a redundant property(Bool) that was attached to the "ng-template"

noData: boolean = true;
<ng-template #noData>...Blah blah...</ng-template>

There is no error found while build using --prod option with your code. I've created a editor for you to playaround with your issue, if any. I've copied your code and its working fine.

https://stackblitz.com/edit/angular-p4ctul

or try changing this line of code with below one.

platformBrowserDynamic().bootstrapModule(AppModule, { enableLegacyTemplate: true })

If you are still getting issue, just edit and save your code on above url. I will take a look.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM