3
respostas

Erro 404 (Not Found)

Insira aqui a descrição dessa imagem para ajudar na acessibilidade
Pelo que percebi, MUITA gente teve problemas com a mesma coisa e eu estou aqui porque comigo não está sendo diferente.

Aparece este erro "Failed to load resource: the server responded with a status of 404 (Not Found)"

Seguem meus códigos:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.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>
    <script type="module" src="js/app.js"></script>
</body>
</html>

APP.JS

import { Negociacao } from './models/negociacao.js';

const negociacao = new Negociacao(new Date(), 10, 100);
console.log(negociacao);

negociacao.quantidade = 1000;
console.log(negociacao);
export class Negociacao {
    #data;
    #quantidade;
    #valor;

    constructor (data, quantidade, valor) {
        this.#data = data;
        this.#quantidade = quantidade;
        this.#valor = valor;
    }
}

Já mexi em tudo o que eu pude, mas o problema está em algo relacionado a pasta... alguém me ajude por favor.

3 respostas

Olá Anderson .
Tudo bem?
Vou lhe passar algumas sugestões aqui que você pode testar para lhe ajudar com seu problema.
E fique tranquilo que isso acontece com todos varias e varias vezes...
Resolver problemas é parte importante no trabalho de um Dev.
Vamos lá:
O erro 404 (Not Found) significa que o arquivo não está sendo encontrado no caminho informado pelo seu HTML ou pelo seu import.
E, olhando sua estrutura de pastas pela imagem que você enviou, o problema está claramente no caminho do import dentro do seu app.js.
No seu app.js você tem:

import { Negociacao } from './models/negociacao.js';

Mas sua estrutura de pastas (na imagem) está assim:

dist
 └─ js
     ├─ app.js
     └─ negociacao.js    (não está dentro de uma pasta models)

Ou seja:
Você importou como se houvesse uma pasta models dentro de js, mas essa pasta não existe.
Existem duas opções:
OPÇÃO A : Ajustar o import
Como o arquivo está na mesma pasta de app.js, basta trocar para:

import { Negociacao } from './negociacao.js';

OPÇÃO B :Criar a pasta models
Se você quiser seguir a organização do curso, mova negociacao.js para:

dist/js/models/negociacao.js

E então seu import estará correto.
3. NÃO ESQUECER: caminho no HTML também importa
Você chamou:

<script type="module" src="js/app.js"></script>

E pela imagem, o caminho real é:

dist/js/app.js

Ou seja, o HTML precisa estar dentro da pasta dist para esse caminho funcionar.
Se o index.html está fora (como na imagem), mude para:

    <script type="module" src="./dist/js/app.js"></script>

Confere ai, ajusta o código e teste novamente.
Me envie um feedback com os resultados.
Aguardo...
Bons estudos.

Ronaldo, eu havia feito igual o professor ensinou.
Aliás eu nem sei como se cria uma pasta como ele criou js/models.

Mas enfim, eu arrastei o negociacao.js para models e deu certo.

Obrigado pela ajuda.

Olá amigo.
Fico feliz que deu certo.
Se puder encerrar este tópico te agradeço.
Qualquer duvida pergunta ai.
Bons estudos.