Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Uncaught SyntaxError: Unexpected token '<'

Descompactei o projeto e na pasta alurapic fiz o comando npm install e em seguida npm start e não carrega a imagem apresentando o erro abaixo no console do navegador chrome. Uncaught SyntaxError: Unexpected token '<' main.js:1 Uncaught SyntaxError: Unexpected token '<' fotos-controller.js:1 Uncaught SyntaxError: Unexpected token '<' localhost/:7 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/alurapic/css/bootstrap.min.css". localhost/:8 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/alurapic/css/bootstrap-theme.min.css".

Segue o histórico do cmd: Microsoft Windows [versão 6.3.9600] (c) 2013 Microsoft Corporation. Todos os direitos reservados.

C:\Users\alysson\Documents\02-alurapic\alurapic>npm install npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN alurapic@1.0.0 No description npm WARN alurapic@1.0.0 No repository field.

added 59 packages from 47 contributors and audited 168 packages in 4.019s found 0 vulnerabilities

C:\Users\alysson\Documents\02-alurapic\alurapic>npm start

alurapic@1.0.0 start C:\Users\alysson\Documents\02-alurapic\alurapic node server.js

Banco data.db pronto para uso Servidor escutando na porta: 3000

*** OBS: Executando o index.html no diretório do OS C:\Users\alysson\Documents\02-alurapic\alurapic\public é executado com sucesso carregando o databind do angular.

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
    </head>
    <body ng-controller="FotosController">
        <div class="container">
            <h1 class="text-center">Alurapic</h1>
            <img class="img-responsive center-block" src="{{foto.url}}" 
                alt="{{foto.titulo}}">
        </div> <!-- fim container -->        
    </body>
</html>

angular.module('alurapic').controller('FotosController', function($scope) {

$scope.foto = {
    titulo : 'Leão',
    url : 'http://www.fundosanimais.com/Minis/leoes.jpg'
}; 

}); ``` angular.module('alurapic', []);

3 respostas

Olá Alys, tudo certo?

Acredito que o erro está nesse script:

<script src="js/main.js"></script>

Provavelmente um '<' a mais em alguma linha de código dele.

Dâ uma olhada nisso.

//main.js
angular.module('alurapic', []);

não tem o '<' no código dele. Na verdade eu apenas descompactei o projeto 02-alurapic.zip, com o cmd entrei na pasta C:\Users\alysson\OneDrive\projetos\02-alurapic\alurapic e emiti os comandos: npm install npm start

Segue o resultado abaixo; C:\Users\alysson\Documents\02-alurapic\alurapic>node -v v8.17.0

C:\Users\alysson\Documents\02-alurapic\alurapic>npm install npm WARN alurapic@1.0.0 No description npm WARN alurapic@1.0.0 No repository field.

up to date in 0.827s

C:\Users\alysson\Documents\02-alurapic\alurapic>npm start

alurapic@1.0.0 start C:\Users\alysson\Documents\02-alurapic\alurapic node server.js

Banco data.db pronto para uso Servidor escutando na porta: 3000

Pedi para um colega testar no pc dele e ao acessar http://localhost:3000/alurapic/ funcionou. O erro persiste! Enquanto isso estou efetuando as alterações e abrindo o index.html diretamente da pasta para praticar.

solução!

Baixei o projeto final após concluir todos os capítulos e voltei código no ponto do exercício do capitulo "Tornando nossa aplicação mais real" e funcionou.