AngularJS和gulp - 在控制台中获得的错误比我想象的少

时间:2014-09-28 17:35:13

标签: angularjs angular-ui-router

我正在建立一个网站。首先,我让自己熟悉AngularJS并尝试了解所有新事物:grunt,livereload,angularjs ......我很快意识到我犯了一些错误,并开始从头开始构建一个新项目。

当我在grunt服务器上构建网站时。它向我展示了比现在更多的消息。我不确定为什么会这样?

例如,因为我将一些现有代码从我的“学习项目”转移到一个新的clean-start-gulp项目。我忘了添加一项服务:FlashService - 负责在我的网站上显示简单的消息。

我已经将其用作另一项服务的依赖项。但出于某种原因,我所呈现的是一个空白站点,控制台中没有消息。在我之前的项目中,我总是得到诸如“没有找到这样的提供者”或类似的消息。任何人都可以帮助我更轻松地进行调试吗?

其他一些事情也发生了变化。我更改了代码的常规文件夹结构,我正在尝试模块化我的新应用程序。目前,我无法想到任何可能与之遥相关的事情。

我当前的文件夹结构如下:

src/app
    app.js
    /services
        auth-service.js
        flash-service.js

我的代码中的一些重要部分:

app.js

angular.module('myapp', [

   ...
   'myapp.home'

]).config(function ($stateProvider) {

    $stateProvider.state('main', {
        'abstract': true,
        resolve: {
            promiseUser: ['AuthService', function (AuthService) { AuthService.promiseUser; }]
        },
        template: '<div ui-view></div>'
    });
})

AuthService

angular.module('myapp').service('AuthService', ['FlashService', function (FlashService){

    // As soon as I created the missing service 'FlashService' everything started working. 
    // Or when I simply removed the FlashService from dependencies. 
    // What I don't understand is why didn't I get any errors in the console?

}

由于我已经花了太多时间在错误的地方查找错误,我只能想象其他一些消息也可能无法进入控制台。这最终会使调整变得非常困难。

我在这里缺少什么?为什么我在控制台中没有出现任何错误?

修改 第一个项目是使用Yeoman生成的,第二个项目使用了gulp slush。不要以为这会有所帮助,但我认为可能值得一提。

EDIT2 发现如果我更改angular.js并在第一个minError函数中添加console.log(消息),我几乎得到了我想要的。

function minErr(module) {
    ...
    console.log(message);
    return new Error(message);
}

现在我只需要找出另一种方法来执行此操作或者与yeoman生成的应用程序有什么不同以及为什么我默认情况下没有收到这些消息:

[$injector:unpr] Unknown provider: aProvider <- a <- AuthService
http://errors.angularjs.org/1.2.25/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20AuthService 

2 个答案:

答案 0 :(得分:0)

如果您想要错误消息,请使用Angular加载模块,并尝试捕获。我猜测gulp slush在生成器时没有为加载模块生成try / catch场景。只要你试图捕捉错误,gulp和grunt之间的区别就不重要了。 gulp的事情是,所有过程都基于某些过程失败的过程,有时过程只会坐在那里或者只是停在一起。

免责声明:我从来没有制作过一个只有雪人的项目。

答案 1 :(得分:0)

好的,所以我会试着解释一下我的想法。

这与gulp和grunt无关。目录结构也完全不相关。

首先,让我们看看两个配置文件中一些最重要的部分。

当前

angular.module('myapp', [])

.config(function ($stateProvider) {

    $stateProvider.state('main', {
        'abstract': true,
        resolve: {
            promiseUser: ['AuthService', function (AuthService) { AuthService.promiseUser; }]
        },
        template: '<div ui-view></div>'
    });
})

...
之前

angular.module('myapp', [])

.config(function ($stateProvider) {

    $stateProvider.state('main', {
        'abstract': true,
        resolve: {
            promiseUser: ['AuthService', function (AuthService) { AuthService.promiseUser; }]
        },
        template: '<div ui-view></div>'
    });
})

...

.run(['AuthService', function (AuthService) { ... }]);

...

所以第一部分在两种情况下都是相同的。之前的不同之处在于我还在运行块中使用了AuthService。 我正在检查状态更改时,经过身份验证的用户有权访问新状态。

所以决心内部发生的事情仍然存在于决心之内!但是在运行块中发生的事情显示在控制台中。

通过修改代码的这些部分 - 两个项目都显示相同的错误并具有相同的行为。