Encountered an issue while trying to build Angular 6 with the --prod flag. The error message states: "ERROR Error: ngIfElse was expecting a TemplateRef, but received 'true' instead

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',
}];

The issue arose immediately after upgrading 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)
javascriptangulartypescript

Answer №1

To implement a conditional statement with an else block in Angular using ngIf, you will need to utilize the ng-template element as the else block within your HTML file.

Here is an example of how to structure this in your code:

<div *ngIf="condition; else elseBlock">Content to display when the condition is met.</div>
<ng-template #elseBlock>Content to display when the condition is not met.</ng-template>

Answer №2

, the problem was resolved by identifying a redundant property (Boolean) that had been mistakenly linked to the "ng-template." 
noData: boolean = true;
<ng-template #noData>...Blah blah...</ng-template>

Answer №3

Your code built successfully with the --prod option, no errors were found. I've set up an editor for you to experiment with your issue if needed. Your code has been copied and is functioning correctly.

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

Alternatively, try replacing a specific line of code with the following one.

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

If you encounter any further issues, feel free to edit and save your code at the provided URL. I will be happy to assist.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to submit numerous requests to the Game Coordinator at once?

I am currently utilizing the node-globaloffensive library and I am facing an issue where my code is repeating itself and only returning one request back from the gc. My goal is to send multiple requests in order to receive every rank from all users in my d ...

javascriptnode.js

Using a function as a variable within jQuery's .click() method

Currently, I am utilizing a tabbed interface that is being managed by a jQuery function to handle the click events of my tabs. $(document).ready(function () { $('a#foo').click(function() { //content, various calls return fal ...

javascriptjquerybindunbind

When using the Composition API in Vue 3, the "Exclude" TypeScript utility type may result in a prop validation error

Currently, I am utilizing Vue 3 alongside the Composition API and TypeScript, all updated to their latest stable versions. If we take a look at the types below: export interface Person { name: string; } export type Status = Person | 'UNLOADED&ap ...

typescriptvue.jsvuejs3vue-composition-apivue-props

Retrieve a Google map using Ajax in a PHP script

I'm attempting to display a google map on my homepage using the following function: function addressCode(id, concatenatedToShowInMap) { var geocoder; var map; geocoder = new google.maps.Geocoder(); ...

javascriptphpajaxgoogle-maps

Stop a hacker from obtaining the usernames from a system

Our forgot password page has been identified with a security issue that needs attention: ISS-0003938 Web Inspect Open Medium Suspicious Files Found in Recursive Directory ****** Remove any unnecessary pages from the web server If any files are nec ...

javascriptjsonajaxsecurity

Discovering the presence of a NAN value within a JSON string

Consider the following scenario: I have a function that receives jsonData in JSON format, and I want to validate the variable jsonData to check for NaN. How can I achieve this? function save() { var jsonData = getEnteredValue(); $.ajax({ ...

javascriptjqueryjson

Encountering the issue of "Cannot read properties of undefined" while attempting to pass data to a prop

Currently, I am developing a Vue application that heavily relies on charts. The issue lies in the fact that I am fetching data from the database individually for each chart component, resulting in multiple calls and a slower page load time. I am looking to ...

javascriptdatabasevue.js

What is the best way to pass a context to the function constructor?

After reading about the dangers of using the eval method, I decided to utilize a function constructor to prevent any malicious code injection. Here is the approach I took: function evalContext(context: Record<string, unknown>) { const injectCon ...

javascriptreactjstypescriptsecurity

"Encountering issues with calling a Node.js function upon clicking the button

I'm facing an issue with the button I created to call a node.js server function route getMentions, as it's not executing properly. Here is the code for my button in index.html: <button action="/getMentions" class="btn" id="btn1">Show Ment ...

javascripthtmlnode.js

Instructions for updating the Modal Value using ajax

This is the script I use to retrieve the data <script> $(document).ready(function() { $('.tmpsurat').click(function() { var id=$(this).data('id'); var url ='{{URL('/cekSuratKelengkapan')}}/'+id; ...

javascripthtmljqueryajaxlaravel

Using a single name to target multiple input fields

I currently have multiple input fields with prices: <input type="text" name="price[]" value="100"> <input type="text" name="price[]" value="50"> <input type="text" name="price[]" value="10"> <input type="text" name="price[]" value="90 ...

javascripthtml

Step-by-step guide on defining a property within the ng-repeat's scope

My goal is to create a dynamic list of items that can be edited individually. Each item should have its own editing mode. Here's the code I'm using: <ul ng-controller="ItemCtrl"> <li ng-repeat="item in items"> <div cl ...

javascriptangularjs

Issue: The specified entry point "@angular/flex-layout" is lacking necessary dependencies

Whenever I attempt to launch my Angular app, I encounter the following error message: Error: The target entry-point "@angular/flex-layout" is missing dependencies: - ./flex-offset/flex-offset at TargetedEntryPointFinder.findEntryPoints (file:///C:/Users/r ...

angularangular-material

What steps can I take to avoid the replacement of a default user image in my Firebase 9 application?

I have been working on a chat application using React 18 and Firebase 9. One issue I encountered is with the Register form, specifically with an input field of type file for uploading the user's avatar. The avatar field in the form is not mandatory, ...

javascriptreactjsfirebase

Exploring AngularJS: Leveraging ng-model within a custom directive featuring iterations and dynamically generated HTML elements

Trying to implement a directive for a grid, I encountered an issue where passing in a column definition that includes an HTML control with ng-model and ng-click directives resulted in an error: "Error: [$rootScope:infdig] 10 $digest() iterations reached. ...

javascriptangularjs

Show the name of the channel on the FeatherJS chat application

I've been using this repository as a guide to develop a chat application. Currently, I'm working on displaying the channel name (the default room where users are logged in) in the chat client. Is there a way to retrieve channel information from ...

javascriptexpresssocket.iofeathersjs

If the option is not chosen, remove the requirement for it

I am in the process of creating a form that offers 3 different payment options: 1 - Direct Deposit 2 - Credit Card 3 - Cash at Office The issue I am facing is with the validation of input fields for Credit Cards. I want to make it so that these field ...

javascriptjqueryhtmlcssforms

Executing multiple child processes in a loop with asynchronous operations and collecting the output after the loop concludes

Here's a snippet of code I've been working on... const { exec } = require('child_process'); const Main = async () => { const result = await RetrieveAllItems(); console.log('output', result); }; const RetrieveAllI ...

javascriptnode.jsasynchronousstdoutchild-process

What is the process of expanding types definitions by incorporating custom types?

I added these custom types to my project. The file structure can be found here. However, these types do not contain certain useful types such as ClientState. I want to include the following enum in those types: enum ClientState { DISCONNECTE ...

typescriptwebpackvoximplant

Ways to evaluate the amount of traffic on a webpage?

Recently, I encountered an issue while creating a page to showcase blog posts. Each post had the typical social media share buttons like "Facebook like," "tweet this post," and "+1." Additionally, there were some extra JavaScript functions added for variou ...

javascripthtmldebugging