删除包裹的警告"未在您的文件中注入"什么时候使用Grunt?

时间:2015-05-06 12:21:01

标签: angularjs gruntjs bower

我有" angular-i18n"安装为凉亭依赖。

当我运行@grunt serve时,我收到了警告:

  

angular-i18n未在您的文件中注入。请去看看   " / $ APP_ROOT / bower_components /角-I18N"那么你需要的文件   手动将其包含在您的文件中。

如何删除此邮件?

让grunt将此文件插入我的index.html会删除此警告吗?

2 个答案:

答案 0 :(得分:12)

<强>背景

您的Grunt任务似乎正在使用wiredep查看您的Bower依赖项并注入标记以加载其相关文件(link for CSS,{{ 1)}用于JS,等等)到你的HTML中。

script通过查看项目中的wiredep文件来确定您需要的内容,然后查看每个依赖项的bower.json文件以确定它们需要的内容,等等。开发了依赖关系树后,bower.json使用main property in the bower.json文件来确定每个所需包中的哪些文件应链接到HTML中。

如果包没有适当的bower配置(缺少wiredep或缺少/不正当bower.json属性),main会警告您该问题,以便您知道它不能自动添加您需要的内容。换句话说,它告诉您并非所有资产都已添加到您构建的HTML中,并且您需要手动干预以添加缺少的内容。

一般解决方案

通常,您无法在自己的代码中执行任何操作来纠正此问题。手动链接HTML中的文件(wiredep标记区域之外,以避免覆盖它)将确保您的项目正常工作。但是,wiredep会在运行时始终发出警告,因为程序包本身仍有问题。您需要向问题包的所有者开放一个问题,以便让他们更正其包装元信息。

您遇到问题的项目

searched bower for the angular-i18n package并发现该项目位于https://github.com/angular/bower-angular-i18n。如果您查看angular-i18n's bower.json,就可以看到它遗漏了wiredep属性。这就是发出警告的原因。

但事实证明,这个项目似乎不提供main属性。 documentation for angular-i18n表示您应该main,然后手动链接到适合所需区域设置的文件。这个软件包列出一个bower install文件是不合适的,因为它提供了许多文件,这些文件都不应该由软件包决定 - 这是开发人员的选择。

此案例的可能解决方案

如果警告确实困扰您,或者您不喜欢手动链接到该文件,您可以将此包分叉到您自己的GitHub帐户并修改main文件以指向bower.json到您要加载的文件。然后,您将删除main作为项目的依赖项,并将fork的repo添加为依赖项。

注意事项:

  1. 如果您不熟悉维护Git回购/分叉,这可能会导致问题不断更新。
  2. 仅当angular-i18n被列为您自己项目的显式依赖项并且作为另一个项目的依赖项加载时,此方法才有效。如果另一个项目正在加载此包,则必须从树中开始分支项目,以便您可以覆盖每个项目的配置。
  3. 总而言之,在这种情况下,最好手动链接到您想要的文件并忽略警告。

答案 1 :(得分:0)

我在yeoman项目中使用angular-i18n收到此错误消息。 wiredep grunt任务发出此错误消息。有两种解决方案:

<强> 1。排除angular-i18n并在index.html中手动包含该文件

Gruntfile.js

wiredep: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /\.\.\//,
    exclude: [
      'bower_components/angular-i18n'
    ]
  }
}

的index.html

<script src="bower_components/angular-i18n/angular-locale_de-de.js"></script>

或:

<强> 2。覆盖/设置bower_components / angular-i18n / bower.json的主要属性

Gruntfile.js

wiredep: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /\.\.\//,
    overrides: {
      'angular-i18n': {
        'main': 'angular-locale_de-de.js'
      }
    }
  }
}

我选择使用第二个选项覆盖主要属性。这种方式在index.html中,angular-i18n库仍然会被grunt任务自动注入。