H. Díaz's questions

My question is simple: How can I handle the value of two child components? Example:

I have this class, Board:

import React, { Component } from 'react';
import Square from './Square';

    export default class Board extends Component {
    
        render(){
            return (
                <>
                    <Square />
                    <Square />
                </>
            );
        }
    
    }

and this is the child component:

import React, {useState} from 'react';

const Square = (props) => {

    let initStatusMessage = 'Aún no se ha clicado.'
    const [count, setCount] = useState(0);
    const [status, setStatus] = useState(initStatusMessage);

    function handleClick(){
        setCount(count + 1);
        if(status === initStatusMessage){
            setStatus('Veces clicado: ');
        }
    }

    return(
        <div>
            <p>{status}</p>
            <button onClick={() => handleClick()}>{count}</button>
        </div>
    );
}

export default Square;

How, instead of handling the count value for each of the children, can I handle the different values ​​from the parent?

I have this piece of code to signup a new user in NodeJS with passport as authentication middleware. The case is that I cause an error to throw an exception and thus see where and how I have to handle it, but it is not being caught. here I put an example:

passport.use('signup', new localStrategy(
    {
        passReqToCallback: true,
        usernameField: 'email'
    },
    async function (req, email, password, done) {
        try{
            let findOrCreateUser = async function () {
                let result = await userModel.findOneUser(email);
                if (result != null) {
                    console.log("El usuario ya existe");
                    done(null, false);
                } else {
                    let user = new userModel();
                    user.username = req.body.username;
                    user.email = email;
                    user.password = await createHash(password);
                    await userModel.newUser(user); 
                    return done(null, user);    
                }
            }
            await process.nextTick(findOrCreateUser);
        }catch(e){
            console.log("asdasd");
            done(null, false);
        }
    }
))

and the createHash function where I intentionally cause an error by calling the genSal function, instead of genSalt.

async function createHash(password){
    try{
        let salt = await bcrypt.genSal(20);
        let hash = await bcrypt.hash(password, salt);
        return hash;
    }catch(e){
        throw e;
    }
}

Why don't you catch it: Unhandled exception.

Should I put the try/catch somewhere else?

Thanks in advance.

I need to extend the capabilities of an EC2 instance on AWS. The thing is, I have a t3a.small instance, and I wanted to "upload" it to t3a.medium. I've been reading the documentation, but I can't confirm if the instance will continue to work after I've stopped it, expanded it, and started it again. Apparently it is necessary that the volume is EBS, the elastic ip... etc. The operating system installed is a Centos 7.

Basically I need to know if it is possible to resize the features of the machine and then make it work as before. If anyone has experience or has had to perform these extensions. Any information needed, let me know. Thank you for your attention.

I have a problem with sockets in nodejs. I make a request to an API to obtain x number of products from a store. After obtaining this list of products, I make calls to an external service, hosted on another server, with which I obtain the stock of all the products.

This is the part in which I launch the request to the external service with the data of all the products:

let options = {
    method: 'POST',
    body: JSON.stringify(productsFromAPI),
    headers: {
        'Content-Type': 'application/json'
    }
}
let response = await nodeFetch(`http://xxx.xxx.xxx.xxx:15422/api/product/getStockFromBD`, options);
let responseJSON = await response.json();
return res.send({ result: responseJSON }); 

In the external service I receive the complete array of products, and I collect them from the database:

    let finalStructure = [];
    await bluebird.mapSeries(productsFromAPI, async (pfa) => {
        let conn = await pool.getConnection();
        let sql = `select articulo, codigo_barras, stock_1 
            from alm 
            where entidad = :entidad and articulo like :articulo`;
        let objToSend = {
            entidad: 9,
            articulo: pfa.sku
        }
        let result = await conn.execute(sql, objToSend, {});
        if (result.rows != "") {
            let structure = appUtils.dbStructure(result.rows, result.metaData);
            let structureItem = { "ARTICULO": pfa.sku, "CODIGO_BARRAS": structure[0].CODIGO_BARRAS, "STOCK": 0 };
            structure.map((s) => {
                structureItem.STOCK = structureItem.STOCK + s.STOCK_1
            });
            finalStructure.push(structureItem)
        }
        await conn.close();
    });
    await pool.close();
    console.log(finalStructure);
    return res.send({result : finalStructure});

The error throws me at the time. I have tried to launch the products one by one instead of sending the entire array, but I also receive the error. So I just don't get it. Does anyone have a way to handle it? Thanks. All the best.

I have a problem with Angular's "Reactrive forms". The fact is that I had a "Template Driven" form but I decided to change it to perform validations through these forms. In one of them I upload an image, and in the template forms linking the model with "ngModel" I had no problem, since after filling in the form and sending it, it showed a dialog window notifying that the insertion had been made and redirected to a screen in which all the data of a database table is presented. Now every time I send it with the "Reactive Form" the form is reset, it does not navigate to the presentation screen and does not present the dialog, but it does make the insertions in the database. When I submit the form without uploading image it works as I expect, but if I add an image, nothing of what I want is presented. What is this behavior due to? I just don't get it. Here is some code:

HTML template:

<form [formGroup]="addEntityForm" (submit)="onSubmit()">
        <div class="cardContainer">
          <mat-form-field appearance="outline" color="accent">
            <mat-label>Nombre de la entidad (Logintud máxima: 25)</mat-label>
            <input matInput type="text" maxlength="25" name="nombre_entidad"
              formControlName="entityName">
          </mat-form-field>
          <div *ngIf="addEntityForm.controls.entityName.invalid">
            <p *ngIf="addEntityForm.controls.entityName.errors.required && addEntityForm.controls.entityName.touched"
              class="alert-danger" [@fadeAnimation]="'in'">
              Este campo es requerido.
            </p>
          </div>
          <mat-form-field appearance="outline" color="accent">
            <mat-label>Cif de la entidad (Logintud máxima: 20)</mat-label>
            <input matInput maxlength="20" name="cif_entidad"
              formControlName="entityCif">
          </mat-form-field>
          <div *ngIf="addEntityForm.controls.entityCif.invalid">
            <p *ngIf="addEntityForm.controls.entityCif.errors.required && addEntityForm.controls.entityCif.touched"
              class="alert-danger" [@fadeAnimation]="'in'">
              Este campo es requerido.
            </p>
            <p *ngIf="addEntityForm.controls.entityCif.errors.invalidCif" class="alert-danger" [@fadeAnimation]="'in'">
              Ya existe una entidad con el mismo Cif.
            </p>
          </div>
          <mat-card>
            <p>Logo de la entidad</p>
            <button mat-raised-button color="primary" type="button" style="position: relative; margin-bottom: 15px;"
              matTooltip="Solo archivos de imagen">Seleccionar archivo
              <input type="file" #image accept="image/*" (change)="onSelectImage($event)"
                style="opacity: 0; cursor: pointer; height: 100%; width: 100%; position: absolute; left: 0; top: 0;" formControlName="entityLogo">
            </button>
            <div *ngIf="imageToUpload != undefined" [@fadeAnimation]="'in'">
              <p>Imagen seleccionada</p>
              <mat-chip-list #chipList>
                <mat-chip style="margin-bottom: 15px;" [removable]="removable">
                  {{imageToUpload.name}}
                  <mat-icon matChipRemove *ngIf="removable" (click)="deleteSelection(image)">cancel</mat-icon>
                </mat-chip>
              </mat-chip-list>
            </div>
            <div [@fadeAnimation]="'in'" *ngIf="imageUrl != undefined">
              <p>Previsualización de imagen:</p>
              <div id="entityImageDiv" style="border: 1px solid #ccc">
                <img id="entityImage" src="{{imageUrl}}">
              </div>
            </div>
          </mat-card>
        </div>
        <div class="buttonContainer">
          <button mat-raised-button color="primary" [disabled]="addEntityForm.invalid">Aceptar</button>
        </div>
      </form>

Code in component:

onSubmit(){
    this.entity.nombre_entidad = this.addEntityForm.get('entityName').value;
    this.entity.cif_entidad = this.addEntityForm.get('entityCif').value;
    let userData = JSON.parse(localStorage.getItem('identity'));
    this.entity.usuario_cre = userData.USUARIO;
    this._entityService.addEntity(this.entity, this.imageToUpload).subscribe(
      response => {
        this.openInsertedDialog(response['message']);
        this._router.navigate(['/entidades']);
      },
      error => {
        console.log(error);
      }
    );
  }

Image component:

    onSelectImage(event){
        this.imageToUpload = <File>event.target.files[0];
        let reader =  new FileReader();
        reader.onload = () => {
          this.imageUrl = reader.result as string;
        }
        reader.readAsDataURL(this.imageToUpload);
      }

Service:

  addEntity(newEntity, file): Observable<Entity> {
    let formData = new FormData();
    if (file != undefined) {
      formData.append('image', file, file.name);
    }
    let entityKeys = Object.keys(newEntity);
    for (let k of entityKeys) {
      formData.append(k, newEntity[k]);
    }
    return this._http.post<Entity>(this.serviceUrl + '/api/entidad/nuevaEntidad', formData);
  }

It is as if the form was reset unintentionally. It skips the whole part of the navigation of the router and the presentation of the dialog. Reload and reload the form component. If it gives me too much trouble I'll go back to the template forms and work on a validation on my own. But it would be nice if someone could explain to me more or less the causes of this behavior, when in the template forms everything is done as expected.

Thanks in advance, if you need any additional information let me know. All the best.

EDIT:

I initialize the form with this code in the component's constructor:

this.addEntityForm = fb.group({
  'entityName': [this.entity.nombre_entidad, [
    Validators.maxLength(25),
    Validators.required
  ]],
  'entityCif': [this.entity.cif_entidad, [
    Validators.maxLength(20),
    Validators.required,
    this.entityCifValidation.bind(this),
  ]],
  'entityLogo': [this.entity.ruta_logo]
});

Once I send the data to the service within the response of the observable, I redirect to the screen where all the insertions that have been made in the database are presented:

  response => {
    this.openInsertedDialog(response['message']);
    this._router.navigate(['/entidades']);
  },

I have this problem, and the point is that everything is supposed to be done correctly. When I try to see a menu, as specified in the documentation of Angular material components, they are not seen. I attach my code to give you an idea:

<header id="mainHeader">
  <mat-toolbar color="primary">
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
  </mat-toolbar>
</header>
<router-outlet></router-outlet>
<footer>
  <mat-toolbar color="accent">
    <small></small>
  </mat-toolbar>
</footer>

This you see is my app.component.html. Now I attach the code of the app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'TITULO';
}

The fact is that I haven't touched anything, I've done it directly in a project from scratch to see if I could find the reason, but nothing...

I attach the codeapp.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatMenuModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatButtonToggleModule,
    MatPaginatorModule,
    MatTableModule,
    MatCheckboxModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatInputModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Package.json:

  "dependencies": {
    "@angular/animations": "~9.0.2",
    "@angular/cdk": "^9.1.0",
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/forms": "~9.0.2",
    "@angular/material": "^9.1.0",
    "@angular/platform-browser": "~9.0.2",
    "@angular/platform-browser-dynamic": "~9.0.2",
    "@angular/router": "~9.0.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.3",
    "@angular/cli": "~9.0.3",
    "@angular/compiler-cli": "~9.0.2",
    "@angular/language-service": "~9.0.2",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }

Does anyone see if I'm missing something or doing it incorrectly? I've never had this problem before, but I've been doing tests for a while, and I can't figure it out. Thanks in advance for the attention given.

I have a question about this function:

function qwerty(n) {
  return function(y) {
      return y + 1
    }
    (++n) + n
}

console.log(qwerty(2));

The returned result is 7. Why? I don't quite understand it, it's supposed to return function(y).....return the function with this statement, right? That is, everything after return should not be processed.

I am developing a web application in which I interact with the ebay API. I need to get user policies through API requests. What I have done is create a method for each one, in this case there would be 3 methods, and finally one that calls all of them through "request/request-promise". The thing is that to make those calls I need an authorization token which I can already obtain. Before making the calls to the 3 endpoints from which I am going to obtain the policies, there is another function with which I check if the token has expired, which it does every two hours, and as a consequence you have to use the "refresh_token" to do another request to the ebay API to refresh that token. The case is that when I don't have to refresh the token, the 3 calls are made completely normally, but if it needs to be refreshed, it only makes the call to the token refresh endpoint and then it does not continue, it enters the policy call functions, but in the first one it stops already. The thing is that when I consult the POSTMAN console I get the ECONNRESET error and the empty headers.

Here the calls are made to check the token and then to the rest:

async function getAllPolicies(req, res, next) {
        try {
            /*Más codigo, a contiación se realizan las llamadas*/
            await checkTokenExpiration(ebShop.creationDate, ebShop.expirationDate, shopName);
            let returnPolicies = await requestP(baseUrl + `getReturnPolicies/${shopName}`);
            let returnPJSON = JSON.parse(returnPolicies);
            let paymentPolicies = await requestP(baseUrl + `getPaymentPolicies/${shopName}`);
            let paymentPJSON = JSON.parse(paymentPolicies);
            let fulfillmentPolicies = await requestP(baseUrl + `getFulfillmentPolicies/${shopName}`);
            let fulfillmentPJSON = JSON.parse(fulfillmentPolicies);
            let allPolicies = { return: returnPJSON.returnPolicies, fulfillment: fulfillmentPJSON.fulfillmentPolicies, payment: paymentPJSON.paymentPolicies };
            return res.status(200).send(allPolicies);
        } catch (e) {
            next(e);
        }
    }

This is where the token is checked:

async function checkTokenExpiration(creationDate, expirationDate, shopName) {
    try {
        let exp = moment(expirationDate);
        let cre = moment(creationDate);
        let diff = exp.diff(cre, 'minutes');
        if (diff >= 120) {
            console.log("El token ha expirado y debe ser renovado.");
            await requestP.post(baseUrl + `/refreshEbayToken/${shopName}`);//Aquí se hace la llamda al endpoint con el que renuevo el token.
        } else {
            console.log(`Quedan ${120 - dif} minutos para que expire el token.`);
        }
    } catch (e) {
        throw new Error(e);
    }
}

Function that refreshes the token:

async function refreshToken(req, res, next) {

    /*Aquí hay código pero irrelevante en lo que el problema se refiere*/

    try {
        let result = await requestP.post(reqOptions);
        let resultJSON = JSON.parse(result);
        let access_token = resultJSON.access_token;
        let acces_token_expires = resultJSON.expires_in;
        let date_token_exp = moment().add(acces_token_expires, 'seconds');
        let dateToday = moment();
        let shopsConfigFile = await utils.readShopsFile();
        let shopFromFile = shopsConfigFile.filter(s => s.name == shopName)[0];
        shopFromFile.oAuthToken = access_token;
        shopFromFile.oAuthExpires = date_token_exp;
        shopFromFile.creationDate = dateToday;
        await utils.writeShopsFile(shopsConfigFile);
        return res.send({ ack: true, result: result });
    } catch (e) {
        next(e);
    }
}

After executing the refresh of the token, everything continues, until it enters the first method of obtaining policies and once the "request" is executed, it stops, which if there is no token to refresh, it does not happen.

I have a problem with an exception, the thing is that I can't catch it and I don't know how to do it:

I have a model that does an insert into a database:

xxxModel.generaNuevoxxx = async function (c, tipo, xxx) {

    let sql = `insert into xxx
        (xxx)
        values
        (xxx)`; 
    let obj = {
        xxx: xxx.xxx,
        xxx: xxx.xxx,
    }
    try {
        console.log(obj);
        return await c.execute(sql, obj, dbController.config);
    } catch (e) {
        throw new Error(`(xxx-model) generaNuevoxxxx -> ${e.message}`);
    }
}

Which if an exception occurs in the execution of the insert would throw the exception. Then I have a controller, which is somewhat more extensive:

async function fabricar(req, res) {
    let c;
    try {
       /*Aqui se hacen más cosas*/
       infoComponentes.map(async xxx => {
          try{
              let medidaxxx = calcularMedida(xxx);
              xxx.s1 = medidaxxx.stock_1;
              xxx.s2 = medidaxxx.stock_2;
              if (xxx.FAMILIA == 'xxxx' || xxx.FAMILIA == '<<<<') {
                  await xxxModel.generaMovimientoxxx(c, "qwe", [componente]);
                  await xxxModel.generaNuevoxxx(c, "qwe", xxx);
                ////AQUI ES DONDE LLAMO AL MODELO, EL CUAL AL DEVOLVER LA EXCEPCIÓN NO LA MANEJA
              }
          }catch(e){
            throw e;
          }
        });
      await c.commit();
      console.log("Desconectando...".red);
      return res.status(200).send({ message: "Proceso acabado." });
    }catch(e){
        c.rollback();
        console.log(`Error: (xxx) -> ${e.message}`);
        return res.status(500).send({ message: e.message });
    }

It tells me that the exception is unhandled and also arrives at the commit and finishes showing the finished process message. How could I catch that exception?

How could I upload an image for a product using a nodejs api? I am developing a service with NodeJs with which, through the Woocommerce API, I create, update, view and delete orders, customers and products from a Woocommerce store. The thing is that I can't find a way to upload an image for each product. I've been researching, and I can't find a way. Any ideas? The woocommerce API does not have this functionality.

My question is: How can I import Angular material modules into a proper module, and then import that module into app.module.ts?

This is my personal module:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        MatMenuModule,
        MatButtonModule
    ],
    declarations: [

    ]
})

export class MaterialModule { }

with which what I do is the following in app.module.ts:

import {MaterialModule} from './material.module';

import array:

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    MaterialModule
  ],

The thing is that I get errors, but if I do it directly everything in app.module.ts works for me. I don't want to have everything imported in the same module, so as not to make it difficult when reviewing or correcting code. Thanks in advance, regards.

How do I update this data?:

Angle 5:

export class Cualquiera{
    constructor(
        private title: string,
        private datos: [{
            title: string,
            description: string
        }]
    ){}
}

I have the backend made with nodejs. The thing is that when trying to update from an Angular form, the record is created, but not the data. I use postman as a REST application, and there I see how it generates a new record for data, but it only creates its id and does not receive the data entered.

<form #pdForm="ngForm" (ngSubmit)="onSubmit()">
    <input type="text" name="title" #title="ngModel" [(ngModel)]="cualquiera.datos.title"><br />
    <input type="text" name="description" #description="ngModel" [(ngModel)]="cualquiera.datos.description">
    <button type="submit">Actualizar</button>
</form>

I've gone a thousand times, but I haven't achieved anything, I really thought this was going to be less complicated, but I don't know what I'm missing.

Cualquiera.findByIdAndUpdate(id,
        {$push: {datos: {title: update.title, description: update.description}}}, 
        (err, cualuqieraUpdated) => {
            if (err) { return res.send({message: err});}
            return res.send({message: 'Cualquiera actualizado.', cualquiera: cualquieraUpdated, update: update});
        }
    );

that is controller method in nodejs. The truth is, I've done this more times, but now after having tried several ways I don't know what I'm doing wrong. All the best.

EDITED:

Here is the service that makes the request to the back-end:

const httpOptions = {
      headers: new HttpHeaders({'Content-type': 'application/json'})
};

.....

submitDatos(id: string, cualquiera : Cualquiera): Observable<Cualquiera>{
      return this._http.put<Cualquiera>(this.url + 'updateDatos/' + id, cualquiera, httpOptions).pipe(
        tap(tap(cv => this.log(`Datos actuaizados: id=${id}`)))
      );
    }

Backend path:

router.put('/updateDatos/:id', cualquieraController.updateDatos);

And here is the submit from the component:

onSubmitDatos(){
   const id = this._route.snapshot.paramMap.get('id');
   this._cualquieraService.submitDatos(id, this.cualquiera).subscribe(
     response => {
      // console.log(response);
     },
     error => {
       console.log(error);
     }
   );
}

How can I make a "child" route run automatically? Let's see, I have a routes file in which there are:

const appRoutes = [
    {path: 'home', component: HomeComponent},
    {path: 'proyect-list', component: ProyectList,
        children:[
            {path: 'comp-image-list', component: ImageList, outlet: 'proyectList'},
            {path: 'comp-audio-list', component: AudioList, outlet: 'proyectList'},
            {path: 'comp-video-list', component: VideoList, outlet: 'proyectList'},
            {path: 'comp-web-list', component: WebList, outlet: 'proyectList'}
        ]
    },
    {path: 'singInNow', component: LoginComponent},
    {path: 'image-detail/:id', component: ImageDetail},
    {path: 'audio-detail/:id', component: AudioDetail},
    {path: 'audio-add', component: AudioAdd},
    {path: 'audio-update/:id', component: AudioUpdate},
    {path: 'video-detail/:id', component: VideoDetail},

The file is not completely copied, but to give you an idea. The thing is that I go to "project-list" which is one of the main routes of the site. And inside this page, I have another "router-outlet" that contains those "child" routes. What I intend is that the "comp-image-list" be presented, for example, in the router-outlet of this without me having to give the link that causes that component to be presented. Can it get done? I've been reading the Angular 2 Routing documentation, and I haven't been able to get anything clear about this, or I haven't been able to find it.

The html for the "project-list" page is this:

<nav class="menuProyect">
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-image-list'] } }]" class="menuProyectLink">Imagen</a>
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-audio-list'] } }]" class="menuProyectLink">Audio</a>
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-video-list'] } }]" class="menuProyectLink">Video</a>
        <a [routerLink]="[{ outlets: { 'proyectList': ['comp-web-list'] } }]" class="menuProyectLink">Web</a>
</nav>
<router-outlet name="proyectList"></router-outlet>

I ask this question because I have a problem when receiving some data in a promise.

return res.status(200).send({message: 'Se ha subido el archivo de video satisfactoriamente.', video: updatedVideo, file_name: file_name});

That's what the video controller returns, made in NodeJs.

        (result) => {
            console.log(result);
            this.video.setFile(result.file_name);
            alert('Se ha actualizado el video del registro.');
        },

and this is the part of TypeScript where I get the name of the file. But when I go to run the application it gives me this error:

error TS2339: Property 'file_name' does not exist on type '{}'.

The fact is that once I have managed to execute it by commenting out the sentences that caused the error, and making it appear in the "result" console, I perfectly receive file_name, etc. Can someone give me a hand to receive that: "file_name" correctly? Thanks in advance.

My question is this:

How could I fit multiple images into a single object? I mean, suppose I have in an application a model created from a project, which will have different properties, but one of them is images. In which I want it to be an array to be able to introduce several images in it. But I can only make it go up one at a time, and when I upload a new one, it covers the previous one. I honestly don't even know where to start. Thanks in advance. All the best. I use connect-multiparty to perform the file upload.

Model file:

var mongoose = require('mongoose'),
    Schema = mongoose.Schema;

var ProyectSchema = Schema({
    name: String,
    description: String,
    tecnologies: String,
    author: String,
    file: [String]
});

module.exports = mongoose.model('Image', ImageSchema);

Here is the code with which I upload it:

function uploadImageFile(req, res){
    var idProyect = req.params.id;
    var file_name = 'No subido';

    if (req.files) {
        var file_path = req.files.file.path;
        var file_split = file_path.split('\\');
        var file_name = file_split[2];
        var ext_split = file_name.split('\.');
        var file_ext = ext_split[1];

        if (file_ext == 'png' || file_ext == 'jpg' || file_ext == 'gif') {
            Proyect.findByIdAndUpdate(idProyect, { file: file_name }, (err, updatedProyect) => {
                if (err) {return res.status(500).send({message: 'Error en el servidor.'});}
                return res.status(200).send({proyect: updatedProyect});
            });
        }else{
            res.status(200).send({message: 'La extensión del archivo no es correcta.'});
        }
    }else{
        res.status(200).send({message: 'No has subido ningún archivo.'});
    }
}

And here's how I instantiate connect-multiparty, in the project route file, and put it as middleware in the route:

multipart = require('connect-multiparty'),
md_upload = multipart({uploadDir: './uploads/images'});

route:

router.post('/uploadImageFile/:id', [md_auth.ensureAuth, md_upload], ImageController.uploadImageFile);

I don't know if it is possible to upload the files at the same time as the project object is created, and so far I only have an idea of ​​how to upload them once the object is created and edited.

I ask this question, because I have already made some application with authentication with these technologies: MongoDb, Angular, NodeJs and Express. The thing is that I've been researching Passport, but I can't fully implement it in nodeJs, much less do I have an idea of ​​what it will be like to insert it with angular later. So that is my question. How is it implemented? Is there a place where I can get some information, apart from the internet documentations? Thanks in advance

Why am I getting a 403 error in firebug when trying to render an image?

The application is being made with the MEAN Stack.

This is the method for the artist service:

getArtist(token, id: string){
        let headers = new Headers({
            'Content-Type' : 'application/json',
            'Authorization': token
        });
        let options = new RequestOptions({headers: headers});
        return this._http.get(this.url + 'getOneArtist/'+ id, options).map(res => res.json());
    }

And I want to put its corresponding image. The fact is that in principle everything has gone well so far, since I have the headers configured in the back-end. CORS.

Here is the HTML:

<div class="image-for-edit" *ngIf="artist.image && artist.image != 'null'">
    <img src="{{url + 'getImageArtist/' + artist.image}}">
</div>

And finally, the controller method:

getArtist(){
    this._route.params.forEach((params: Params) => {
        let id = params['id'];

        this._artistService.getArtist(this.token, id).subscribe(
            response => {
                if(!response.artist) {
                    this._router.navigate(['/']);
                }else{
                    this.artist = response.artist;
                }
            },
            error => {
                var errorMessage = <any>error;
                if(errorMessage != null) {
                    console.log(error);
                }   
            }
        );
    });
}

Any clue why all the places where I want to put an image I have not had a problem and here I have?

I am making a webapp using the MEAN stack. The fact is that now I have developed a method to be able to register objects in the database, but when I execute it, an error results:

Response for preflight has invalid HTTP status code 404

I've been doing some research, and apparently it's in CORS. I mean, the problem is on my server. I go to app.js in the api part, made with NodeJS, and this is the code made:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control');
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, OPTIONS, DELETE');
  res.header('Allow', 'GET, PUT, POST, OPTIONS, DELETE');
  res.header('Content-Type', 'application/json; charset=utf-8'); 
  return next();
});

Can you find out where the error exists? I've looked at other ways, but I can't find it.

I was taking a look at NodeJS , when I came across this example:

module.exports = function(app){
    var controllers = require('../controllers/controllers.js');
    app.get('/libros', controllers.findAll);
}

The point is that this bit of code goes in the routes.js file . After testing it, I see that it works, but I don't quite understand why it can be used appas a parameter when it hasn't even been imported.