not found 404 godaddy angular

https://co.godaddy.com/community/VPS-Dedicated-Servers/Using-Angular-2-routing-on-Linux-Hosting-with-cPanel/m-p/33959#M1119


Crea el archivo: y lo pegas en tu servidor o en goddady. Aplica para angular



.htaccess


RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . / [L]

undefined

this.departamentoService.obtenerIdDepartamento(descripcion).subscribe((resp : any) => {

console.log("respuesta", resp[0]._id);

});

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

quita todas las comas al final de la respuesta:

res.json({

ok: true,

usuario: usuarioDB,

token

});

descargar heroku para pc

https://devcenter.heroku.com/articles/heroku-cli

descargar github CLI

https://gitforwindows.org/

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

INICIO ANGULAR 6

1. Instalar nodejs

https://nodejs.org/es/

reiniciar el computador.

node -v
npm -v

2.ejecutar como administrador:

npm install -g typescript

3. Instalar el angular cli en el cmd: .ejecutar como administrador:

https://cli.angular.io/

npm install -g @angular/cling v
otros: https://nodemon.io/

npm install -g nodemon




jsonWebToken

https://www.npmjs.com/package/jsonwebtoken

instalar npm i jsonwebtoken --save

parse jwt

Parse JWT

NO lo deben de usar para validar tokens, no es el código ideal para eso, es un código para extraer información de un token desde el Front-End. NO LO USEN EN EL BACKEND

unique validator query

https://github.com/blakehaswell/mongoose-unique-validator#find--updates

NODE JS SERVER BACKEND

Conectar la base de datos

utilizaremos mongoose
https://mongoosejs.com/ 
https://www.npmjs.com/package/mongoose

1. instalar la libreria:
https://www.npmjs.com/package/mongoose

npm i mongoose --save


copiamos la siguiente linea: 

// Using Node.js `require()`

const mongoose = require('mongoose');

require('./config/config');

const express = require('express')

// Using Node.js `require()`

const mongoose = require('mongoose');

const app = express()

const bodyParser = require('body-parser')

// parse application/x-www-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json

app.use(bodyParser.json())

app.get('/usuario', function(req, res) {

res.json('get usuario')

})

//crear nuevos registros

app.post('/usuario', function(req, res) {

let body = req.body;

if (body.nombre === undefined) {

res.status(400).json({

ok: false,

mensaje: 'El nombre es necesario'

});

} else {

res.json({

body: body

})

}

})

//actualizar

app.put('/usuario/:id', function(req, res) {

let id = req.params.id;

res.json({

id

})

})

app.delete('/usuario', function(req, res) {

res.json('delete usuario')

})

app.listen(process.env.PORT, () => {

console.log("Escuchando el puerto ", process.env.PORT);

})

2. pegar la linea:
mongoose.connect('mongodb://localhost/my_database');

require('./config/config');

const express = require('express')

// Using Node.js `require()`

const mongoose = require('mongoose');

const app = express()

const bodyParser = require('body-parser')

// parse application/x-www-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json

app.use(bodyParser.json())

app.get('/usuario', function(req, res) {

res.json('get usuario')

})

//crear nuevos registros

app.post('/usuario', function(req, res) {

let body = req.body;

if (body.nombre === undefined) {

res.status(400).json({

ok: false,

mensaje: 'El nombre es necesario'

});

} else {

res.json({

body: body

})

}

})

//actualizar

app.put('/usuario/:id', function(req, res) {

let id = req.params.id;

res.json({

id

})

})

app.delete('/usuario', function(req, res) {

res.json('delete usuario')

})

mongoose.connect('mongodb://localhost:27017/donacolombiabd', (err, res) => {

if (err) throw err;

console.log('Base de datos ONLINE');

});

app.listen(process.env.PORT, () => {

console.log("Escuchando el puerto ", process.env.PORT);

})

CREAR UNA CARPETA Q SE LLAME: routes en la raiz del proyecto

y crear un archivo que se llame usuarios.js dentro de la misma.

pegar rutas de metodos get, delete, post y put dentro del archivo quedando asi:

const express = require('express')

const app = express()

app.get('/usuario', function(req, res) {

res.json('get usuario')

})

//crear nuevos registros

app.post('/usuario', function(req, res) {

let body = req.body;

if (body.nombre === undefined) {

res.status(400).json({

ok: false,

mensaje: 'El nombre es necesario'

});

} else {

res.json({

body: body

})

}

})

//actualizar

app.put('/usuario/:id', function(req, res) {

let id = req.params.id;

res.json({

id

})

})

app.delete('/usuario', function(req, res) {

res.json('delete usuario')

})

module.exports=app;

3.y agregar la linea: app.use(require('./routes/usuario'));

en el archivo server.js

require('./config/config');

const express = require('express')

// Using Node.js `require()`

const mongoose = require('mongoose');

const app = express()

const bodyParser = require('body-parser')

// parse application/x-www-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json

app.use(bodyParser.json())

app.use(require('./routes/usuario'));

mongoose.connect('mongodb://localhost:27017/donacolombiabd', (err, res) => {

if (err) throw err;

console.log('Base de datos ONLINE');

});

app.listen(process.env.PORT, () => {

console.log("Escuchando el puerto ", process.env.PORT);

})

4. Crear la carpeta models en la carpeta server

y crearemos un archivo llamado usuario.js

https://www.npmjs.com/package/mongoose-unique-validator , creamos el schema.

const mongoose = require('mongoose');

let Schema = mongoose.Schema;

var uniqueValidator = require('mongoose-unique-validator');

var rolesValidos = {

values: ['ADMIN_ROLE', 'USER_ROLE'],

message: '{VALUE} no es un rol permitido'

}

var usuarioSchema = new Schema({

nombre: { type: String, required: [true, 'El nombre es necesario'] },

email: { type: String, unique: true, required: [true, 'El correo es necesario'] },

password: { type: String, required: [true, 'La contraseña es necesaria'] },

img: { type: String, required: false },

role: { type: String, required: true, default: 'USER_ROLE', enum: rolesValidos },

google: { type: Boolean, default: false }

});

usuarioSchema.plugin(uniqueValidator, { message: "{PATH} debe ser único" });

module.exports = mongoose.model('Usuario', usuarioSchema);

En usuario.js de routes se debe importar el Usuario models.

const Usuario = require('../models/usuario');

//crear nuevos registros

app.post('/usuario', function(req, res) {

let body = req.body;

let usuario = new Usuario({

nombre: body.nombre,

email: body.email,

password: body.password,

role: body.role

});

usuario.save((err, usuarioDB) => {

if (err) {

return res.status(400).json({

ok: false,

err

});

}

res.json({

ok: true,

usuario: usuarioDB

})

});

})

Encriptación de la contraseña: https://www.npmjs.com/package/bcrypt

npm i bcrypt --save

Agregar en el usuario.js (routes)

const bcrypt = require('bcrypt');

password: bcrypt.hashSync(body.password, 20),

ENVIAR CORREOS DESDE NODE.JS

Pueden ver estas dos librerías

https://www.w3schools.com/nodejs/nodejs_email.asp

https://nodemailer.com/about/

CREAR BACKEND NODE.JS

INSTALAR MONGODB
1. https://www.mongodb.com/download-center/community
NEXT NEXT NEXT
seguir installation instructions:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/?_ga=2.38143840.2108327929.1542221392-61917411.1541862555
Crear una carpeta en C.


2. Crear una carpeta para el backend
ir a la consola cmd y pegar la ruta de la carpeta.
dentro de la ruta de la carpeta: escribir: npm init: y enter a todo.

con eso creamos el package.json.

3. npm express  https://www.npmjs.com/package/express

escribir en cmd en la ruta de la carpeta:

npm i express --save , save para agregarla a nuestras dependencias.

4. crear un nuevo folder en la raiz del proyecto llamado server
5. crear un archivo dentro del folder server q se llame server.js
6. En el archivo de server.js colocar el siguiente codigo tomado de express la pagina de arriba

var express = require('express')

var app = express()



app.get('/', function (req, res) {

  res.send('Hello World')

})



app.listen(3000)




configurarlo para q qde:










const express = require('express')

const app = express()

app.get('/', function(req, res) {

res.send('Hello World')

})

app.listen(3000, () => {

console.log("Escuchando el puerto ", 3000);

})

7.probarlo usando el comando:
node server/server

8.ahora probar la respuesta desde postman pegar la siguiente ruta en get
http://localhost:3000

la rta debe ser hello world

9. instalar el nodemon https://nodemon.io/ ejecutando el cmd como administrador por la -g npm install -g nodemon
10. escribir en la consola cmd : nodemon server/server

cambiar por json:

const express = require('express')

const app = express()

app.get('/', function(req, res) {

res.json('Hello World')

})

app.listen(3000, () => {

console.log("Escuchando el puerto ", 3000);

})

agregar los métodos:

const express = require('express')

const app = express()

app.get('/usuario', function(req, res) {

res.json('get usuario')

})

//crear nuevos registros

app.post('/usuario', function(req, res) {

res.json('post usuario')

})

//actualizar

app.put('/usuario/:id', function(req, res) {

let id = req.params.id;

res.json({

id

})

})

app.delete('/usuario', function(req, res) {

res.json('delete usuario')

})

app.listen(3000, () => {

console.log("Escuchando el puerto ", 3000);

})

11. buscar bodyparser:

https://www.npmjs.com/package/body-parser
este se utiliza para en el post recibir datos desde el body www...
 instalar en cmd:
npm i body-parser --save

declarar el bodyparser debajo del express:

const bodyParser = require('body-parser')

//y usar estas lineas ver en la pagina:

// parse application/x-www-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json

app.use(bodyParser.json())

y asi se usaria:

const express = require('express')

const app = express()

const bodyParser = require('body-parser')

// parse application/x-www-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json

app.use(bodyParser.json())

app.get('/usuario', function(req, res) {

res.json('get usuario')

})

//crear nuevos registros

app.post('/usuario', function(req, res) {

let body = req.body;

if (body.nombre === undefined) {

res.status(400).json({

ok: false,

mensaje: 'El nombre es necesario'

});

} else {

res.json({

body: body

})

}

})

//actualizar

app.put('/usuario/:id', function(req, res) {

let id = req.params.id;

res.json({

id

})

})

app.delete('/usuario', function(req, res) {

res.json('delete usuario')

})

app.listen(3000, () => {

console.log("Escuchando el puerto ", 3000);

})

12. ahora vamos a hacer el archivo de config q sirve para desplegar la aplicación en Heroku

12.1 Crear una carpeta dentro de la carpeta server que se llame config
12.2 Crear un archivo que se llame config.js dentro de la carpeta config

el archivo debe quedar asi:

//=======================

// Puerto

//=======================

process.env.PORT = process.env.PORT || 3000;

Ahora crearemos lo que es el archivo para excluir modulos de node:

creamos un archivo en la raiz del proyecto con nombre .gitignore y escribimos en el archivo:
node_modules/

Para Heroku es importante q creemos el start..en package.json agregar:

{

"name": " nombreapp",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"start": "node server/server.js",

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"body-parser": "^1.18.3",

"express": "^4.16.4"

}

}

Subir los cambios a github
crear nuevo repositorio y seguir los pasos q dice en github

Subir los cambios a heroku

escribir en cmd:
heroku create

Heroku crea el nombre del repositorio


escribir para probar :
git remote
git remote -v

para subirlo
push heroku master

heroku open

CREAR UN FRONTEND EN ANGULAR 6, NODE JS

1. Crear carpeta
2. ng new nombreproyecto
3. cd nombreproyecto
4. abrir la carpeta con visual studio code
5. crear componentes:
 ng g c login --spec=false -is
 ng g c nopagefound --spec=false -is
 ng g c pages/principal --spec=false -is
ng g c shared/header --spec=false -is
ng g c shared/sidebar --spec=false -is
 ng g c shared/breadcrumbs --spec=false -is
 ng g s services/shared --spec=false
 ng g s services/sidebar --spec=false
6. abrir el template y copiar en en index.html todas las referencias css,assets, boostrap, o en el angular.json agregar los css.
7. agregar de la pagina principal la parte de html en todas las rutas de shared, header, sidebar, etc..
8. agregar archivo app.routes.js y llenarlo:

import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login/login.component';

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

const appRoutes: Routes = [

{ path: 'login', component: LoginComponent },

{ path: 'register', component: LoginComponent },

{ path: 'principal', component: PrincipalComponent },

{ path: '', redirectTo: '/principal', pathMatch: 'full' },

{ path: '**', component: NopagefoundComponent }

];

export const APP_ROUTES = RouterModule.forRoot(appRoutes, {useHash : true});

agregar el appRouting en app.module.js:

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

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

//rutas

import { APP_ROUTES } from './app.routes';

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

import { HeaderComponent } from './shared/header/header.component';

import { SidebarComponent } from './shared/sidebar/sidebar.component';

import { BreadcrumbsComponent } from './shared/breadcrumbs/breadcrumbs.component';

@NgModule({

declarations: [

AppComponent,

LoginComponent,

NopagefoundComponent,

PrincipalComponent,

HeaderComponent,

SidebarComponent,

BreadcrumbsComponent

],

imports: [

BrowserModule, APP_ROUTES

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

9. crear componente pages:
 ng g c pages/pages --flat --spec=false
10. pegar el contenido de app.component.html a pages.component.html y en el app.component se deja : <router-outlet></router-outlet>
11. modificar el archivo de rutas: agregando direccion al pagesComponent

import { RouterModule, Routes } from '@angular/router';

import { PagesComponent } from './pages/pages.component';

import { LoginComponent } from './login/login.component';

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

const appRoutes: Routes = [

{ path: '', component: PagesComponent },

{ path: 'login', component: LoginComponent },

{ path: 'register', component: LoginComponent },

{ path: 'principal', component: PrincipalComponent },

// { path: '', redirectTo: '/principal', pathMatch: 'full' },

{ path: '**', component: NopagefoundComponent }

];

export const APP_ROUTES = RouterModule.forRoot(appRoutes, {useHash : true});

12. agregar el children y las rutas hijas:

import { RouterModule, Routes } from '@angular/router';

import { PagesComponent } from './pages/pages.component';

import { LoginComponent } from './login/login.component';

import { NopagefoundComponent } from './shared/nopagefound/nopagefound.component';

import { PrincipalComponent } from './pages/principal/principal.component';

const appRoutes: Routes = [

{ path: '',

component: PagesComponent

children: [

{ path: 'principal', component: PrincipalComponent },

{ path: '', redirectTo: '/principal', pathMatch: 'full' }

]

},

{ path: 'login', component: LoginComponent },

{ path: 'register', component: LoginComponent },

// { path: '', redirectTo: '/principal', pathMatch: 'full' },

{ path: '**', component: NopagefoundComponent }

];

export const APP_ROUTES = RouterModule.forRoot(appRoutes, {useHash : true});

13. crear nuevo componente register:
ng g c login/register --flat --spec=false -is

14. crear un module en pages/

pages.module.ts

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

@NgModule({

declarations: [

],

exports:[

],

imports:[

]

})

export class PagesModule { }

llenarlo:

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

import { PrincipalComponent } from './principal/principal.component';

import { PagesComponent } from './pages.component';

@NgModule({

declarations: [

PrincipalComponent

],

exports: [

PrincipalComponent,

PagesComponent

],

imports: [

]

})

export class PagesModule { }

14. crear un modulo en shared/

shared.module.ts

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

import { NopagefoundComponent } from './nopagefound/nopagefound.component';

import { HeaderComponent } from './header/header.component';

import { SidebarComponent } from './sidebar/sidebar.component';

import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';

@NgModule({

declarations: [

NopagefoundComponent,

HeaderComponent,

SidebarComponent,

BreadcrumbsComponent

],

exports: [

NopagefoundComponent,

HeaderComponent,

SidebarComponent,

BreadcrumbsComponent

],

imports: [

]

})

export class SharedModule { }

agregar el shareModule a pages.module.ts

import { SharedModule } from '../shared/shared.module';

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

import { PrincipalComponent } from './principal/principal.component';

import { PagesComponent } from './pages.component';

@NgModule({

declarations: [

PrincipalComponent

],

exports: [

PrincipalComponent,

PagesComponent

],

imports: [

SharedModule

]

})

export class PagesModule { }

15. agregar el archivo : en pages/
pages.routes.ts

import { RouterModule, Routes } from '@angular/router';

const pagesRoutes: Routes = [

];

export const APP_PAGES_ROUTES = RouterModule.forRoot(pagesRoutes, {useHash : true});