4
respostas

Erro ao carregar a Controller de Negociacao

Bom dia pessoal,

Estou tomando erro ao carregar a NegociacaoController, estou usando o lite-server e o system.js para carregar os arquivos typescript na index do projeto.

No cmd não dá erro de compilação e a página é carregada, porém no navegador (chrome), está dando os seguintes erros:

GET http://localhost:3000/ts/controllers/NegociacaoController.js 404 (Not Found)

(index):51 (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ts/controllers/NegociacaoController.js

Error: XHR error (404 Not Found) loading http://localhost:3000/ts/controllers/NegociacaoController.js

Error loading http://localhost:3000/ts/controllers/NegociacaoController.js as "../ts/controllers/NegociacaoController" from http://localhost:3000/js/app.js

sabem o que pode ser?

Instalei as mesmas versões de typsescript, concurrently e lite-server usadas no curso.

NegociacaoController


import { Negociacao, Negociacoes } from '../models/index';
import { NegociacoesView, MensagemView } from '../views/index';
import { logarTempoDeExecucao } from '../helpers/decorators/index';

export class NegociacaoController {

    private _inputData: JQuery;
    private _inputQuantidade: JQuery;
    private _inputValor: JQuery;

    private _negociacoes = new Negociacoes();
    private _negociacoesView = new NegociacoesView('#negociacoesView', true);
    private _mensagemView = new MensagemView('#mensagemView');

    constructor(){

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');
        this._negociacoesView.update(this._negociacoes, false);

        let temCarteira: boolean = true;
    }

    @logarTempoDeExecucao()
    adiciona(event: Event){

        const t1 = performance.now();

        event.preventDefault();

        let data = new Date(this._inputData.value.replace(/-/g,',')); 

        if(!this._ehDiaUtil(data)){
            this._mensagemView.update('Somente negociações em dias úteis por favor', true);
            return;
        }

        const negociacao = new Negociacao(
            data, 
            parseInt(this._inputQuantidade.value), 
            parseFloat(this._inputValor.value)
        );

        this._negociacoes.adiciona(negociacao);
        this._negociacoesView.update(this._negociacoes, false);
        this._mensagemView.update('Negociação adicionada com sucesso!', false);

        const t2 = performance.now();

        console.log(`O tempo de execução de adiciona é de ${ t2 - t1 } `);
    }

    private _ehDiaUtil(data: Date) {
        return data.getDay() != DiaDaSemana.Sabado && data.getDay() != DiaDaSemana.Domingo;
    }
}

enum DiaDaSemana {
    Domingo,
    Segunda,
    Terca,
    Quarta,
    Quinta,
    Sexta,
    Sabado
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
</head>

<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView"></div>

    <form class="form">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <br>
    <br>

    <div id='negociacoesView'></div>

    <script src="lib/jquery.min.js"></script>

    <!-- biblioteca para importação de  módulos TypeScript/javaScript -->
    <!-- é o modelo de importação do ecmascript 2015 -->
    <script src="lib/system.js"></script>
    <script>
        System.defaultJSExtensions = true;
        System.import('js/app.js').catch(err => console.error(err));
    </script>        

</body>
</html>
4 respostas

Acho que é alguma coisa relacionada com o system.js, pois se eu carrego os arquivos ts explicitamente na index e removo os namespaces + exports, a aplicação funciona sem problemas, Alguém poderia ajudar com o que pode estar errado no loader do system.js?

Você está importando o arquivo 'js/app.js'.

Não deveria ser o arquivo com extensão .ts?

Testei com o .ts mas tbm não rolou, deu o mesmo erro...

pelo que entendi, eu uso o js/app.js mesmo pois o compilador gera o código js a partir do typescript (arquivos .ts)

Os arquivos js deveriam está na pasta js do projeto e o endereço que ele deveria procurar seria assim: http://localhost:3000/js/controllers/NegociacaoController.js

Ver se o arquivo tsconfig.json está com esta configuração:

        "outDir": "app/js",

e a configuração do meu package.json eu também coloquei assim:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "tsc",
    "watch": "tsc -w",
    "server": "lite-server --baseDir=app",
    "start": "concurrently \"npm run watch\" \"npm run server\""
  }