1

I'm trying to go on my angular 2 webapp but I get this error on each page : enter image description here

I haven't changed anything in the app, and it works on computers of people of my team.

Is it caused by these warnings when npm install ?

npm WARN deprecated [email protected]: Please use the new package name
@agm/core - Details here: htt://... npm WARN prefer global [email protected] should be installed with -g

[email protected] install C:...\node_modules\node-sass node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5
.3/win32-x64-48_binding.node Download complete Binary saved to C:...\node_modules\node-sass\vendor\win32-x64-48\bindi ng.node Caching binary to C:\Users\toto\AppData\Roaming\npm-cache\node-sass\4.5.3\win3
2-x64-48_binding.node

[email protected] postinstall C:...\node_modules\tslerp typings install

typings WARN enoent Path "C:...\node_modules\tslerp\typings.json" is missing

`-- (No dependencies)

[email protected] postinstall C:\Users\aviale\Documents\dev\workspace\PlaceDesFa
milles\PlaceDesFamilles\PlaceDesFamillesFront\node_modules\node-sass node scripts/build.js

Binary found at C:\Users\aviale\Documents\dev\workspace\PlaceDesFamilles\PlaceDe
sFamilles\PlaceDesFamillesFront\node_modules\node-sass\vendor\win32-x64-48\bindi ng.node Testing binary Binary is fine

[email protected] postinstall C:...\node_modules\ng2-google -recaptcha typings install

typings WARN enoent Path "C:...\node_modules\ng2-google-recaptcha\typings.json" is missing

`-- (No dependencies)

[email protected] C:... +-- @angular/[email protected] | +-- @ngtools/[email protected] | +-- @ngtools/[email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | |-- [email protected] | +-- [email protected] | | -- [email protected] | |-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | | |-- [email protected] | | +-- [email protected] | | | -- [email protected] | | | -- [email protected] | | +-- [email protected] | | | -- [email protected] | | |-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | | |-- [email protected] | | -- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | |-- [email protected] | | | -- [email protected] | | +-- [email protected] | | |-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | | -- [email protected] | | | |-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | -- [email protected] | | |-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | -- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | |-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | | | +-- [email protected] | | |-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | |-- [email protected] | | | -- [email protected] | | | +-- [email protected] | | | |-- [email protected] | | | +-- [email protected] | | | | -- [email protected] | | |-- [email protected] | | +-- [email protected] | | -- [email protected] | +-- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | | -- [email protected] | +-- [email protected] | |-- [email protected] | +-- [email protected] | | +-- [email protected] | | -- [email protected] | +-- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | |-- [email protected] | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | | -- [email protected] | | | |-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | -- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | |-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | | |-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | | +-- [email protected] | | | | | +-- [email protected] | | | | | +-- [email protected] | | | | | | -- [email protected] | | | | | | +-- [email protected] | | | | | |-- [email protected] | | | | | -- [email protected] | | | | +-- [email protected] | | | | |-- [email protected] | | | | +-- [email protected] | | | | | +-- [email protected] | | | | | +-- [email protected] | | | | | +-- [email protected] | | | | | -- [email protected] | | | | | +-- [email protected] | | | | |-- [email protected] | | | | -- [email protected] | | |-- [email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- restore- ... UNMET PEER DEPENDENCY @angular/[email protected] | +-- @types/[email protected] | -- UNMET PEER DEPENDENCY zone.js@^0.8.4 +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | |-- [email protected] | | +-- [email protected] | | +-- [email protected] | | -- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | | -- [email protected] | +-- [email protected] |-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] | -- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | | -- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | |-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | -- [email protected] | |-- [email protected] | | +-- [email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | | -- [email protected] | | | |-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | -- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | |-- [email protected] | | | | -- [email protected] | | |-- [email protected] | | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | -- [email protected] | | |-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | |-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | | -- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | |-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | -- [email protected] | | | |-- [email protected] | | | -- [email protected] | |-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | +-- [email protected] | -- [email protected] | +-- [email protected] |-- [email protected] [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | |-- [email protected] | | -- [email protected] | +-- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | |-- [email protected] | | -- [email protected] |-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | | -- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | -- [email protected] | +-- [email protected] |-- [email protected] +-- [email protected] | -- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | | |-- [email protected] | | +-- [email protected] | | | -- [email protected] | | -- [email protected] | -- [email protected] +-- [email protected] | +-- [email protected] | | +-- [email protected] | |-- [email protected] | +-- [email protected] | | -- [email protected] | +-- [email protected] |-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | |-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | |-- [email protected] | +-- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | -- [email protected] | | +-- [email protected] | |-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | -- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | |-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | |-- [email protected] | +-- [email protected] | | -- [email protected] |-- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | `-- [email protected] | | +--

[email protected] | | -- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | -- [email protected] | | | |-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | -- [email protected] | | |-- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | -- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | |-- [email protected] | | -- [email protected] | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | |-- [email protected] | | | -- [email protected] | | +-- [email protected] | | | +-- [email protected] | | |-- [email protected] | | +-- [email protected] | | | -- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | |-- [email protected] | | | -- [email protected] | | +-- [email protected] | |-- [email protected] | -- [email protected]-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
) npm WARN @angular/[email protected] requires a peer of @angular/[email protected]
but none was installed. npm WARN @angular/[email protected] requires a peer of zone.js@^0.8.4 but none was inst
alled.

Here is my app.component.ts:

import { Component, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router';
import { Modal, Overlay } from 'angular2-modal';
import { Utilisateur } from './shared/utilisateur';
import { PanierService } from './panier.service';
import { ParentService } from './parent.service';
import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng';
import { PanierNumber } from './shared/panier';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PanierNumber]

})
export class AppComponent {
  userRole: string;
  displayLogin: boolean = false;
  displayRegister: boolean = false;
  open: any = -1;
  year: number;
  nrPanier: number;

  constructor( private utilisateur: Utilisateur, private router: Router, private modal: Modal, overlay: Overlay, viewContainer: ViewContainerRef,
               private confirmationService: ConfirmationService, private panierService: PanierService, private parentService: ParentService, private panierNumber: PanierNumber) {
                this.nrPanier = 0;
                this.year = new Date().getFullYear();
                overlay.defaultViewContainer = viewContainer;
                this.utilisateur.mySubject.subscribe(
                    value => {
                        this.userRole = value;
                        this.displayLogin = false;
                    }
                  );
                  if(localStorage.getItem("currentUserPDF")){
                    this.utilisateur.role = JSON.parse(localStorage.getItem("currentUserPDF")).role;
                    if(JSON.parse(localStorage.getItem("currentUserPDF")).role == "PARENT"){
                      this.parentService.getParent(JSON.parse(localStorage.getItem("currentUserPDF")).id).subscribe(r => {
                          r.enfants.forEach(e => {
                              this.panierService.getPanier(JSON.parse(localStorage.getItem("currentUserPDF")).id, e.id).subscribe(r => {
                                  r.forEach(h => {
                                      this.nrPanier++;
                                  });
                                  this.panierNumber.setNumber(this.nrPanier);
                              });
                          });

                      });

                      this.panierNumber.numberPanier$.subscribe(nr => {
                        this.nrPanier = nr;
                      });
                    }
                  }

  }
  checkToken() {
      if(localStorage.getItem("accessToken")) {
        return true;
      }
      return false;
  }
  confirmLogout() {
      this.confirmationService.confirm({
          message: 'Êtes-vous sûr de vouloir vous déconnecter ?',
          header: "Déconnexion",
          accept: () => {
             localStorage.removeItem('currentUserPDF');
             localStorage.removeItem("accessToken");
             this.router.navigate(['']);
            }
      });
  }
  openLoginModal() {
        this.displayLogin = true;
  }
  openRegisterModal() {
        this.displayRegister = true;
  }
  toggle() {
    this.open = this.open*-1;
  }
  isOpen() {
    if(this.open>0) {
      return true;
    } else {
        return false;
    }
  }
  goToPanier(){
    this.router.navigate(['/panier']);
  }
}

Here is my package.json :

{
  "name": "place-des-familles-front",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@types/fullcalendar": "^2.7.42",
    "@types/jquery": "^2.0.44",
    "angular2-google-maps": "^0.17.0",
    "angular2-modal": "^2.0.3",
    "ap-angular2-fullcalendar": "^1.2.8",
    "core-js": "^2.4.1",
    "fullcalendar": "^3.4.0",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "ng2-google-recaptcha": "1.1.0",
    "primeng": "^2.0.6",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "typings": "2.1.0",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.43",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "^1.0.2",
    "protractor": "~5.1.0",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.0"
  }
}

Here is my app.component.html :

<nav>
    <a routerLink=''><img src="./assets/img/logo.png" height="66"></a>
    <button class="collapse" type="button" pButton (click)="toggle()" icon="fa-bars"></button>
    <div class="nav1">
        <div *ngIf="!checkToken()">
            <div class="navbar-div" ><a class="navbar-a" routerLink='./rechercher_creche'> recherche </a></div>
            <div class="navbar-div" ><a class="navbar-a" routerLink='./register'> inscription </a></div>
            <div class="navbar-div"><a class="navbar-a" (click)="openLoginModal()"> connexion </a></div>
        </div>
        <div *ngIf="checkToken()">
            <div class="navbar-div" *ngIf="checkToken() && utilisateur.role.toLowerCase()=='parent'" (click)="goToPanier()" style="cursor: pointer;">
                <img src="./assets/img/panier.jpg" style="width: 20px; float: right"/>
                <span style="float: right; color: #428bca;">{{nrPanier}}</span>
            </div>
            <div class="navbar-div" ><a class="navbar-a" (click)="confirmLogout()"> déconnexion </a></div>
            <div class="navbar-div" *ngIf="utilisateur.role.toLowerCase()=='parent'"><a class="navbar-a" routerLink='compte_famille'> mon compte </a></div>
            <div class="navbar-div" *ngIf="utilisateur.role.toLowerCase()!='parent'"><a class="navbar-a" routerLink='etablissement'> professionnels </a></div>
        </div>

    </div>
    <div class="nav2" [ngClass]="{'in': isOpen()}">
        <div *ngIf="!checkToken()">
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" (click)="openLoginModal()"> connexion </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='./register'> inscription </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='./rechercher_creche'> recherche </a></div>
        </div>
        <div *ngIf="checkToken()"> 
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='compte_famille'> mon compte </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" (click)="confirmLogout()"> déconnexion </a></div>
            <div class="navbar-div" *ngIf="checkToken() && utilisateur.role.toLowerCase()=='parent'" (click)="goToPanier()" style="cursor: pointer;">
                <img src="./assets/img/panier.jpg" style="width: 20px; float: right"/>
                <span style="float: right; color: #428bca;">{{nrPanier}}</span>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <router-outlet></router-outlet>
</div>


<p-dialog header="Connexion" [(visible)]="displayLogin" [dismissableMask]="true" modal="modal" responsive="true" styleClass="crecheTab">
    <login></login>
</p-dialog>

<p-confirmDialog icon="fa fa-question-circle" #cd responsive="true">
    <p-footer>
        <button type="button" pButton icon="fa-close"label="Non" (click)="cd.reject()" style="background-color:#3887C9;font-family: raleway;"></button>
        <button type="button" pButton icon="fa-check" label="Oui" (click)="cd.accept()" style="background-color:#3887C9;font-family: raleway;"></button>
    </p-footer>
</p-confirmDialog>

<footer>
    <div class="foot1 ui-g">
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST PRATIQUE </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink=''> Foire aux questions </a></li>
                        <li> <a class='footer-a' routerLink=''> Professionnels petite enfance </a></li>
                        <li> <a class='footer-a' routerLink=''> Application mobile </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST NOUS ! </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink='./qui_sommes_nous'> Qui nous sommes ? </a></li>
                        <li> <a class='footer-a' routerLink=''> Nos partenaires </a></li>
                        <li> <a class='footer-a' routerLink=''> Nous recrutons </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST LÉGAL </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink='./cgu'> Conditions générales d'utilisation </a></li>
                        <li> <a class='footer-a' routerLink='./mentions_legales'> Notice légale </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
    </div>

    <div class="foot2">
        Place des Familles - {{year}} <i class="fa fa-registered" aria-hidden="true"></i>
    </div>
</footer>

EDIT : In my class 'utilisateur', I define a default value for the role so it should not be undefined :

@Injectable()
export class Utilisateur {
    public id: number;
    public prenom: string;
    public nom: string;
    public login: string;
    public role: string = 'guest';
    public codePostal: string;
    public ville: string;
    public accessToken: string;
    public civilite: string;
    public mySubject: BehaviorSubject<string> = new BehaviorSubject<string>(this.role);
    public changeRole(): void {
        this.mySubject.next(this.role);
    }
}

Ask me for any more information.

1
  • Can you include your html? Commented Jun 15, 2017 at 9:32

1 Answer 1

2

As your error indicates, utilisateur.role is not defined by the time you execute your *ngIf hence utilisateur.role.lowerCase() is throwing an error. You can do a workaround like this:

*ngIf="utilisateur.role && utilisateur.role.toLowerCase()=='parent'">

this will first check for utilisateur.role and if it is undefined, it will be evaluated to false.

Sign up to request clarification or add additional context in comments.

6 Comments

How can I define it before the *ngIf is executed ?
But in my class Utilisateur, I define a default value for role : @Injectable() export class Utilisateur { public id: number; public prenom: string; public nom: string; public login: string; public role: string = 'guest'; public codePostal: string; public ville: string; public accessToken: string; public civilite: string; public mySubject: BehaviorSubject<string> = new BehaviorSubject<string>(this.role); public changeRole(): void { this.mySubject.next(this.role); } }
@anais1477 It's hard to read it from here. Can you add it to your question? And you can define it inside the constructor before your subscribe function. And didn't this answer work? You are practically checking for null values, IMO this way is always more secure.
So I had this line at the top of my constructor method : this.utilisateur.role = 'guest'; It doesn't change anything :/
@anais1477 hmm strange, maybe the html is executed before the dependency injection. Does my answer work?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.