Question

我正在设置一个新的AngularJS项目（我第一次参与其中），我发现它非常敏感......最新的问题是让我们在index.html文件中正确配置内容。 / p>

如果我只是对googleapis进行硬编码，那么一切正常（例如在index.html文件中）。

如果我设置了bower并做了一个咕噜咕噜的bowerInstall，它会在我的index.html中添加看起来正确的行，但它们根本不起作用。我得到的错误如下：

Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8081/bower_components/angular/angular.js".

和 Uncaught SyntaxError: Unexpected token <用于角度文件。

到目前为止，凉亭一直是皇室的痛苦......任何想法在这里出了什么问题？谢谢！

顺便说一句，简单的应用程序按预期工作，我已经进行了一些基本的业力测试。

bower.json ：

{
  "name": "meanjs_book",
  "version": "0.1.0",
  "homepage": "https://github.com/JESii/xxx",
  "authors": [
    "Jon Seidel <jseidel@edpci.com>"
  ],
  "description": "Rudimentary app from MeanJS Book",
  "main": "server.js",
  "moduleType": [
    "node"
  ],
  "keywords": [
    "MongoDB",
    "Express",
    "AngularJS",
    "Node",
    "HighPlans"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests",
    "spec"
  ],
  "dependencies": {
    "angular-route": "~1.3.15",
    "angular": "~1.3.15",
    "angular-animate": "~1.3.15",
    "angular-mocks": "~1.3.15"
  }
}

Gruntfile

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },
    bowerInstall: {

      target: {

        // Point to the files that should be updated when 
        // you run `grunt bowerInstall` 
        src: ['public/app/views/index.html'],   // index.html support

          // Optional: 
          // --------- 
          cwd: '',
          dependencies: true,
          devDependencies: false,
          exclude: [],
          fileTypes: {},
          ignorePath: '',
          overrides: {}
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

  grunt.loadNpmTasks('grunt-bower-install');
};

的index.html ：

<!-- AngularJS -->
&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript" charset="utf-8">&lt;/script>
&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript" charset="utf-8">&lt;/script>
&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js" type="text/javascript" charset="utf-8">&lt;/script>
&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-mocks.js" type="text/javascript" charset="utf-8">&lt;/script>

<!-- bower:js -->
<!-- &lt;script src="../../../bower_components/angular/angular.js" type="text/javascript">&lt;/script> -->
<!-- &lt;script src="../../../bower_components/angular&#45;route/angular&#45;route.js" type="text/javascript">&lt;/script> -->
<!-- &lt;script src="../../../bower_components/angular&#45;animate/angular&#45;animate.js" type="text/javascript">&lt;/script> -->

＆LT; /脚本＆GT; - ＆GT;

Answer 1

我假设你在运行grunt serve时遇到了这个错误。您粘贴的控制台消息表明grunt不允许JS文件通过。如果不允许使用特定的文件类型，则将其替换为index.html，这就是使用MIME类型HTML传输的原因。你从哪里得到那个Gruntfile？

此外，我建议使用Yeoman来构建一个基本的Angular应用程序。请在此处查看：http://yeoman.io/codelab.html。它非常容易理解，使您可以更轻松地使用Grunt＆amp;亭子。

grunt bowerInstall无法正常工作

1 个答案: