Sequelize under Angular2 w / Typescript

Question

I'm new to Angular and just starting to get my head wrapped around how it works. Please Internet, be careful ...

I completed Angular2 5 minutes Quickstart through Tour of Heroes and worked without problems. Now I am trying to connect to the local MS SQL server, since I have a SQL based project where Angular2 is the necessary platform. I banged my head against the wall for several days, trying to get Sequelize to work and really could help.

What I have done so far, based on different things that I read:

• Used by npm to set sequelize and verify that sequelize and the lodash, bluebird, and validator dependencies all exist in node_modules
• We downloaded bluebird.d.ts, lodash.d.ts, sequelize.d.ts and validator.d.ts from the DefinitelyTyped project on GitHub and placed them in the sample folder
• In tsConfig.json, I changed compilerOptions -> target from es5 to es6
• Created a simple db.component.ts file (see below)
• Updated app.component.ts to import db.component and added a route to it

A simple page appears at this point, but I cannot figure out how to get Sequelize to work.

Script errors that I see (based on using Visual Studio Code as my editor):

• When I open the secelize.d.ts file, an error occurs in the 'declare module "line" {"states that" Ambient modules cannot be nested in other modules "
• When I open lodash.d.ts, on lines 239 and 240 (underscores) there are errors that say "Duplicate identifier" _ "

() , . , (?) / db.component.ts, IDE, , (Chrome).

, /config/etc, , "" , , - , (, )

app.component.ts

import { Component }            from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import { DashboardComponent }   from './dashboard.component';
import { HeroService }          from './hero.service';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';

import { dbComponent }          from './db.component';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <nav>
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>
        <router-outlet></router-outlet>
    `,
    styleUrls: ['app/app.component.css']
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})

@RouteConfig([
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    },
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    },
    {
        path: '/sql',
        name: 'SqlTest',
        component: dbComponent
    }   
])

export class AppComponent {
  title = 'Sample App';
}

db.component.ts

/// <reference path="../typings/sequelize.d.ts" />

import { Component, OnInit }            from 'angular2/core';
import Sequelize = require('sequelize');  <-- I dont know if this is doing anything

//- This just errors out with require not being found (tds@latest installed)
//var Sequelize = require("sequelize");

//- I know this goes somewhere, but I have no idea where
//var sql = new Sequelize('dbName', 'uName', 'pw', {
//  host: "127.0.0.1",
//  dialect: 'mssql',
//  port: 1433 <-- SqlExpress
//});

@Component({
    selector: 'my-sql',
    template:`
        <h1>SQL Test</h1>
    `
})

export class dbComponent implements OnInit {

    constructor(
    ) { }

    auth() {
        console.log('auth');
        //sql.authenticate().then(function(errors) { console.log(errors) });
    }

    ngOnInit() {
        console.log('onInit');
        this.auth();
    }
}

console.log, , , , , , Sequelize.

, , . ...

Answer 1

, Sequelize - Javascript, , , angular2 .

, "Tour of Heroes" angular2 .

1: , NodeJS - ! - , :

var express = require('express');

var http = require('http');
var path = require('path');
var bodyParser = require('body-parser');
var mysql = require('ms-sql');//Note not entirely sure if this is the correct library for MS-SQL Server I would google how to use this.

var app = express();  
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));

, , , angular . MS-SQL , body-parser. npm install express-generator -g, express myapp .

! .

var server = http.createServer(app);

server.listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

, node myapp.js , !

angular2.

app.get('/', function(req, res){
    res.render('index.html');
});

index.html . angular2 Node!

, , ms-sql. , ms-sql, MySQL . node :

app.use(

    connection(mysql,{

        host: 'localhost',//or the IP address
        user: 'root',
        password : 'myPassword',
        port : 3306, //port mysql
        database:'myDatabaseName'
    },'request')
);

, , .

app.get('/api/heroes', function(req, res){
    req.getConnection(function(err,connection){

       connection.query("SELECT ID, ROLE_NAME, DESCRIPTION, ACTIVE_FLAG FROM ROLES",function(err,rows)     {

           if(err)
               console.log("Error Selecting : %s ",err );

           res.json({data:rows});

        });

     });
});

, → data.

, angular2 , , ngOnInit. , , .

import { Component, OnInit }            from 'angular2/core';
import {Http} from 'angular2/http':


@Component({
    selector: 'my-sql',
    template:`
        <h1>SQL Test</h1>
         {{myData}}
    `
})

export class dbComponent implements OnInit {

    myData: any;
    constructor(public http: Http) { }


    ngOnInit() {
        this.http.get('api/heroes/').map((response => this.myData = response.json().data));
    }
}

, . Http , this.http! , Http.

ngOnInit http- api my.ydata response.json(), , , ? , JSON , .

Sequelize, , , , , MySQL.

, .

Answer 2

, Sequelize orm . api ( Sequelize, , , nodeJs), frontend.