angular: Error: NG0301

 

>PROBLEM

The angular app throws the following error during attempt to open a child modal:

   Error: NG0301

This error may have many types of causes.
It usually means some issue between the component and the template configuration or some subjacent library version incompatibility.

Below there are the four different solutions from different real cases that worked for me.

NOTE: the 3rd solution is the one that I most use. If you are sure that nothing changed in your code, try it. Run the "npm audit fix --force" once or more, but make sure that a node_modules backup is made before. If this folder gets corrupted, fixing it is time-consuming.

>SOLUTION #1

>before

<button id="btn_update_activity_" type="button" class="btn btn-primary icon-config icon-update_20g"

  style="margin-top: 5px; margin-left: 5px;" (click)="openModal(template)">Open modal</button>

<ng-template #template>

>after

Found duplicated ng-template reference.
The second one was switched to solve the conflict.

<button id="btn_update_todo_" type="button" class="btn btn-primary icon-config icon-update_20g"

  style="margin-top: 5px; margin-left: 5px;" (click)="openModal(templateUpTodo)">Open modal</button>

<ng-template #templateUpTodo>

>SOLUTION #2

>before

- todos.component.ts (parent-child biding):

  <!-- xxmodal TODO UPDATE -->

  <app-uptodo [theTodo]="todoi" [email]="email" [stoken]="stoken" [activity]="activity" [activities]="activities"

  (click)="setTodoi(todo)" (updateEvent)="updateTodo($event)"></app-uptodo>

  <!-- xxupdate -->

- uptodo.component.ts (child):

export class UptodoComponent implements OnInit {

  modalRef: BsModalRef;

  @Input()

  email: string;

  @Input()

  stoken: string;

  @Input()

  activities = [];

  @Input()

  theTodo: any;

  activity: string;

  @Output()

  updateEvent = new EventEmitter<string>();

>after

- uptodo.component.ts (child):

export class UptodoComponent implements OnInit {

// ...

  @Input()

  activity: string;

  @Output()

  updateEvent = new EventEmitter<string>();

>SOLUTION #3

Make a backup of the node_modules folder in another place.
Stop the app.

1. Run the command:
npm install

2. Apply the fix command:
npm audit fix

3. Usually there are issues. Run again with --force flag, one or many times:
npm audit fix --force

4. Restart the app.

>SOLUTION #4

If the issue happens too frequently, maybe an update may solve it.
Do:
npm update

Please!!! Create a backup first to not cry later!  :-)

NOTE:
After the update, it may appear some VSCode error messages.
Restart VSCode.

>ENV

Angular CLI: 13.2.2

Node: 16.13.1

Package Manager: npm 8.5.4

OS: win32 x64

MyRef;

y;faq-Error: NG0301<memo<angularx;.

angular: ngx-bootstrap modal fails when closing

 

>PROBLEM

Attempt to close the modal fails.

ERROR TypeError: Cannot read properties of undefined (reading 'hide')
    at main.js:1:434209
    at UT (main.js:1:69900)
    at s (main.js:1:70062)
    at HTMLButtonElement.<anonymous>

>SOLUTION

BEFORE

The new modal component code:

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-deltodo',
  templateUrl: './deltodo.component.html',
  styleUrls: ['./deltodo.component.scss'],
})
export class DeltodoComponent implements OnInit {

  modalRef: BsModalRef;
  title: string;

  constructor() {}


  ngOnInit(): void {}

}

AFTER

The modal component code:

 

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-deltodo',
  templateUrl: './deltodo.component.html',
  styleUrls: ['./deltodo.component.scss'],
})
export class DeltodoComponent implements OnInit {

  title: string;
  // list: any[] = [];

  constructor(public modalRef: BsModalRef) {}

  ngOnInit(): void {}

}

 

>ENV

angularx_ngx_bootstrap_modal_

Angular CLI: 13.2.2

Node: 16.13.1

Package Manager: npm 8.5.4

OS: win32 x64