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

Problema Interceptador

Referente ao curso MEAN Stack: criando aplicações completas com Javascript

por KELVIN STANG OENNING
| 112.4k xp | 33 posts
Desenvolvedor

Ao adicionar a linha no sistema do Angular para adicionar o interceptador, da o seguinte erro:

angular.min.js:6 Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=tokenInterceptorProvid…terceptor%20%3C-%20%24http%20%3C-%20%24templateRequest%20%3C-%20%24compile

Código do token-interceptor.js

angular.modele('alurapic')
    .factory('tokenInterceptor',function($window){
        var interceptor = {};

        interceptor.response = function(response){
            var token = response.headers('x-access-token');
            if(token){
                console.log('Armazenando token recebido.');
                $window.sessionStorage.token = token;
            }
            return response;
        };

        return interceptor;
    });

Código do main:

angular.module('alurapic', ['minhasDiretivas','ngAnimate', 'ngRoute', 'ngResource', 'meusServicos'])
    .config(function($routeProvider, $locationProvider, $httpProvider) {

        $httpProvider.interceptors.push('tokenInterceptor');

        $routeProvider.when('/fotos', {
            templateUrl: 'partials/principal.html',
            controller: 'FotosController'
        });

        $routeProvider.when('/fotos/new', {
            templateUrl: 'partials/foto.html',
            controller: 'FotoController'
        });

        $routeProvider.when('/fotos/edit/:fotoId', {
            templateUrl: 'partials/foto.html',
            controller: 'FotoController'
        });

        $routeProvider.when('/login', {
            templateUrl: 'partials/login.html',
            controller: 'LoginController'
        });

        $routeProvider.otherwise({redirectTo: '/fotos'});

    });

Em seguida, ao tentar entrar em qualquer página, nem passa a tentar o 404, da aquele erro mencionado no inicio.

5 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Você importou corretamente o token-interceptor? Esse erro acontece quando Angular tenta usar um artefato que não existe. Fique tranquilo, vários alunos passaram dessa parte sem qualquer problema.

Aguardo seu retorno.

por KELVIN STANG OENNING
| 112.4k xp | 33 posts
Desenvolvedor

Meu arquivo token-interceptor.js, está na pasta services, junto com "meus-servicos.js", e o código de importação na index está assim.

<!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">
        <link rel="stylesheet" href="css/efeitos.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/lib/angular-animate.min.js"></script>
        <script src="js/lib/angular-route.min.js"></script>
        <script src="js/lib/angular-resource.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/controllers/foto-controller.js"></script>
        <script src="js/controllers/login-controller.js"></script>
        <script src="js/controllers/grupos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
        <script src="js/services/meus-servicos.js"></script>
        <script src="js/services/token-interceptor.js"></script>
    </head>
    <body>
        <div class="container">

            <ng-view></ng-view>

        </div> <!-- fim container -->        
    </body>
</html>

Dentro do arquivo "token-interceptor.js", tenho implementado assim:

angular.modele('alurapic')
    .factory('tokenInterceptor',function($window){
        var interceptor = {};

        interceptor.response = function(response){
            var token = response.headers('x-access-token');
            if(token){
                console.log('Armazenando token recebido.');
                $window.sessionStorage.token = token;
            }
            return response;
        };

        return interceptor;
    });

E no a importação com o mesmo nome do interceptador "tokenInterceptor", está assim na main:

angular.module('alurapic', ['minhasDiretivas','ngAnimate', 'ngRoute', 'ngResource', 'meusServicos'])
    .config(function($routeProvider, $locationProvider, $httpProvider) {

        $httpProvider.interceptors.push('tokenInterceptor');

        $routeProvider.when('/fotos', {
            templateUrl: 'partials/principal.html',
            controller: 'FotosController'
        });

        $routeProvider.when('/fotos/new', {
            templateUrl: 'partials/foto.html',
            controller: 'FotoController'
        });

        $routeProvider.when('/fotos/edit/:fotoId', {
            templateUrl: 'partials/foto.html',
            controller: 'FotoController'
        });

        $routeProvider.when('/login', {
            templateUrl: 'partials/login.html',
            controller: 'LoginController'
        });

        $routeProvider.otherwise({redirectTo: '/fotos'});

    });
solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Veja que no seu código você escreve:

angular.modele('alurapic')

O correto é angular.module

Belezinha?

por KELVIN STANG OENNING
| 112.4k xp | 33 posts
Desenvolvedor

Opa, e eu aqui procurando alguma coisa que fiz errado na questão da configuração.

Tudo certo agora!

Obrigado professor.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Tranquilo! Sucesso e bom estudo Kelvin!

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