2
respostas

Projeto Alurabank não funciona após migrar para o Lite Server

Estou acompanhando o Curso TypeScript 2. Estou na Aula 1-6.

Ao migrar a aplicação alurabank para o lite server utilizando o loader System, a aplicação parou de funcionar.

Logo do cara, ao carregar a aplicação, o console do inspector exibe (em um link)

    <anonymous> http://localhost:3000/:49:55

Quando clico no link, o inspector me leva para o index.html ...

<script src="lib/jquery.min.js"></script>
    <script src="lib/system.js"></script>
    <script>
        System.defaultJSExtension = true;
    //Esta é a linha 49 (referenciada na mensagem de erro impressa no console )
        System.import("js/app.js").catch(exception => console.error(exception)); 
    </script>

Nada na aplicação funciona depois da migração. Não consigo inserir negociações na tabela.

Eis meu package.json ...

{
  "name": "alurabank",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "tsc",
    "tsc-watch": "tsc -w",
    "lite-server": "lite-server --baseDir=app"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^4.17.0",
    "lite-server": "^2.4.0",
    "tslint": "^5.9.1",
    "typescript": "^3.2.1"
  },
  "dependencies": {
    "@types/jquery": "^3.3.22"
  }
}

Este é meu tsconfig.json ...

{
    "compilerOptions": {
        "target": "es6",
        "outDir": "app/js",
        "noImplicitAny": true,
        "noEmitOnError": true,
        "removeComments": true,
        "module": "system"
    },
    "include": [
        "app/ts/**/*"
    ]
}

OBS: Estou ciente de que estou utilizando as versões mais recentes das dependências (typescript, lite-server, etc). Eu QUERO utilizar a versão atual.

2 respostas

Boa noite, Marcelo! Como vai?

Eu baixei o projeto do mestre Flávio, utilizei nele a sua configuração do package.json e tsconfig.json e tudo funcionou corretamente. O problema deve ser algum outro detalhe do seu projeto.

Vc poderia compartilhar todo o seu projeto pelo github, dropbox ou google drive? Daí é só mandar o link aqui que eu darei uma olhada melhor pra te ajudar!

Grande abraço e bons estudos!

Desde já informo que resolvi o problema. Mas estou insatisfeito com a solução que encontrei.

Para solucionar o problema, fui contra o que foi ensinado no curso.

No curso, foi ensinado a importar e exportar classes com os comandos ...

import { CLASSE } from "CAMINHO/NOME_DO_ARQUIVO_SEM_EXTENSÃO";

export { CLASSE } from "CAMINHO/NOME_DO_ARQUIVO_SEM_EXTENSÃO";

OBS: Por extensão. entada-se .js ou .ts

O problema foi resolvido quando eu tomei a iniciativa de colocar a extensão .js no nome dos arquivos em todos os comandos import e export da aplicação. Só aí o System.js funcionou e passou a carregar as classes.

Tomei essa iniciativa guiado pela experiências de anos com programação....

Entretanto não estou satisfeito. Estou trabalahndo com TypeScript. Porque preciso referenciar arquivos .js ?

Testei, também, utilizando a extensão .ts nos comando import e export, mas só funcionou quando utilizei a extensão .js ....

O projeto está compartilhado em um repositório público no github. Segue os endereços logo abaixo...

Enderço SSH: git@github.com:marcelobc548/curso-typescript.git

Enderço HTTPS: https://github.com/marcelobc548/curso-typescript.git

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software