I'm running the ng run build command in my angular6 project and I get the following error:
ERROR in src \ app \ sidebar \ sidebar.component.html (1,68):: Property 'active' does not exist on type 'SidebarComponent'.
This is the .html file where the error is located ...
P.S. execute the ng serve -o is generated normally and I can do what I want calmly just shows me this error when I type the command ng build -prod
<button type="button" id="boton1" class="btn btn-dark nav-item " [ngClass]="{'d-none':activo=='primero'}" [ngClass]="{'d-block':activo=='segundo'}" (click)="activo='primero'">
<i class="fas fa-align-justify"></i>
</button>
<button type="button" id="boton2" class="btn btn-success nav-item d-none" [ngClass]="{'d-block':activo=='primero'}" [ngClass]="{'d-none':activo=='segundo'}" (click)="activo='segundo'" >
<i class="fas fa-align-justify"></i>
</button>
<div class="wrapper">
<!-- ACA COMIENZA EL SIDEBAR -->
<!-- ACA COMIENZA EL HEADER DEL SIDEBAR-->
<nav id="sidebar" [ngClass]="{'active':activo=='primero'}" >
<div class="sidebar-header">
<div align='center' class="sidebar-header-grey">
<a href="http://globalr.net/site/" class="simple-text " >
<img class="gris":hover src="assets/GR.png" width="130" height="50" >
</a>
</div>
</div>
<!-- ACA TERMINA EL HEADER DEL SIDEBAR-->
<!-- ACA COMIENZA EL CONTENIDO DEL SIDEBAR -->
<ul class="list-unstyled components ">
<p><a [routerLink]="['/Gestionar2', {outlets: {'cero': ['hijo0']}} ]">Gestion de Proyecto</a></p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" >Herramientas</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a [routerLink]="['/Crear', {outlets: {'uno': ['hijo']}} ]">Crear</a>
</li>
<li>
<a [routerLink]="['/Modificar', {outlets: {'dos': ['hijo2']}} ]" >Modificar</a>
</li>
<li>
<a href="#" >Eliminar</a>
</li>
</ul>
</ul>
</nav>
<!-- ACA TERMINA EL SIDEBAR -->
<div id="content">
<!-- ACA COMIENZA EL NAVBAR -->
<!-- ACA TERMINA EL NAVBAR-->
<!-- ACA COMIENZA CONTENIDO -->
<div [ngClass]="{'contraer':activo=='primero'}" >
<router-outlet name="cero"></router-outlet>
<router-outlet name="uno"></router-outlet>
<router-outlet name="dos"></router-outlet>
<router-outlet name="tres"></router-outlet>
<router-outlet name="cuatro"></router-outlet>
<router-outlet name="cinco"></router-outlet>
<router-outlet name="seis"></router-outlet>
</div>
<!-- ACA TERMINA EL CONTENIDO-->
</div>
</div>
Here is the. ts
import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
currentUrl:string;
constructor(private router: Router) {
router.events.subscribe((_: NavigationEnd)=>{
if(!!_.url){
this.currentUrl=_.url
}
}
);
}
cero: boolean=true;
uno: boolean=true;
dos: boolean=true;
tres: boolean=true ;
cuatro: boolean;
cinco: boolean;
seis: boolean;
siete: boolean;
ocho: boolean;
nueve: boolean ;
diez:boolean=true ;
once: boolean ;
doce:boolean ;
ngOnInit() {
}
titulo1():void{
this.cero = false;
this.uno = false;
this.dos = false;
this.tres = false;
this.diez = false;
this.doce = true;
}
titulo2():void{
this.uno = false;
this.dos = false;
this.tres = false;
this.diez = false;
this.cuatro = true;
this.cinco = true;
this.seis = true;
this.siete = true;
this.ocho = true;
this.nueve = true;
this.once = true;
}
cambiartitulo():void{
this.cero = false;
this.cuatro = false;
this.cinco = false;
this.seis = false;
this.siete = false;
this.ocho = false;
this.nueve = false;
this.once = false;
this.doce = true;
}
cambiartitulo1():void{
this.cero = false;
this.cuatro = false;
this.cinco = false;
this.seis = false;
this.siete = false;
this.ocho = false;
this.nueve = false;
this.once = false;
this.diez = true;
this.doce = true;
}
cambiartitulo2():void{
this.cero = false;
this.cuatro = false;
this.cinco = false;
this.seis = false;
this.siete = false;
this.ocho = false;
this.nueve = false;
this.once = false;
this.doce = true;
}
cambiartitulo3():void{
this.cero = false;
this.cuatro = false;
this.cinco = false;
this.seis = false;
this.siete = false;
this.ocho = false;
this.nueve = false;
this.once = false;
this.doce = true;
}
}
and like that I have more of the same type, for example:
src \ app \ login \ login.component.html (2,9):: Property 'title' does not exist on type 'LoginComponent'.
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
<div class="container">
<div class="card">
<form action="submit">
Usuario <input type="text" name="FirstName" placeholder="Id"><br>
Contraseña <input type="text" name="LastName" placeholder="*******"><br>
</form>
</div>
</div>
<button [routerLink]="['/Gestionar2', {outlets: {'cero': ['hijo0']}} ]" class="btn">ingresar</button>
Another one src \ app \ createproject \ createproject.component.html (66,135) :: Property 'change' does not exist on type 'CreateprojectComponent'.
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light nav-top fixed-top nav-top">
<div class="container-fluid">
<h4 style="padding-top: 15px" class="title text-muted">Registro de Proyecto</h4>
</div>
</nav>
<div class="content" align="center">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header" style="padding:15px">
<h4 class="title">Registro de proyecto</h4>
<p class="category text-muted">Por favor, Complete todos los campos</p>
</div>
<div class="container">
<form>
<div class="row">
<div class="form-group col-md-5">
<label for="Nombre">Nombre del Proyecto</label>
<input type="text" class="form-control" id="NombreP" placeholder="Nombre" required [(ngModel)]="model.NombreP" name="NombreP" maxlength="40" size="20">
</div>
<div class="form-group col-md-3">
<label for="ClienteP">Cliente</label>
<input type="text" class="form-control" placeholder="Nombre del cliente" id="ClienteP" required [(ngModel)]="model.ClienteP" name="ClienteP" maxlength="20" size="20">
</div>
<div class="form-group col-md-4">
<label for="AdminP">Administrador del Proyecto</label>
<input type="text" class="form-control" id="AdminP" required [(ngModel)]="model.AdminP" placeholder="Nombre del Administrador" name="AdminP" maxlength="40" size="20">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="CodigoP">Codigo</label>
<input type="text" class="form-control" id="CodigoP" placeholder="Ingrese número USSD/SMS " required [(ngModel)]="model.CodigoP" name="CodigoP" maxlength="40">
</div>
<div class="form-group col-md-3 ">
<label for="FechaIP">Fecha de Inicio</label>
<input type="date" min="2018-08-30" class="form-control btn-outline-secondary" style="border-color:rgba(165, 157, 157, 0.664)" id="FechaIP" required>
</div>
<div class="form-group col-md-3 ">
<label for="FechaCP">Fecha de Culminacion</label>
<input type="date" min="2018-08-30" class="form-control btn-outline-secondary" style="border-color:rgba(165, 157, 157, 0.664)" id="FechaCP" required>
</div>
<div class="form-group col-md-2 ">
<label>Plataforma</label><br/>
<select class="btn btn-outline-secondary" style="border-color:rgba(165, 157, 157, 0.664)">
<option value="0">USSD</option>
<option value="1">SMS</option>
</select>
</div>
</div>
<div style="padding-bottom: 15px">
<button type="submit" class="btn btn-success">Registrar</button>
<a [routerLink]="['/Gestionar2', {outlets: {'cero': ['hijo0']}} ]"><button type="button" class="btn btn-danger" (click)="cambio()">Volver</button></a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<nav id="navbar2" class="navbar fixed-bottom nav-bot navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Pagina Principal <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<p class="copyright ">
© <script>document.write(new Date().getFullYear())</script> <a href="http://globalr.net/site/">2018 Global Resources</a>
</p>
</form>
</div>
</nav>