Question

我正在使用angularjs 1.7，ruby 5.0，webpacker，babel和es6语法。我正在尝试使服务文件对我的api进行调用，但似乎无法正常运行。我收到以下错误。

未捕获的错误：[$ injector：modulerr]由于以下原因，无法实例化模块待办事项：错误：[$ injector：modulerr]由于以下原因，无法实例化模块函数TaskSvc（$ http）：错误：[$ injector：unpr]未知提供程序：$ http

我想念babel依赖吗？还是webpack依赖？还是仅仅是我的代码的语法？

application.js：

console.log('Hello World from Webpacker')
import angular from 'angular';
import uirouter from '@uirouter/angularjs';
import TodoComponent from './todo.component';
// import $resource from 'angular-resource';
import TaskSvc from './todo.service.js';

const todo = angular.module('todo', [uirouter, TaskSvc])
  .component('todoComponent', TodoComponent)
  .service('task', TaskSvc)
//   .factory('Task', ['$resource', function($resource) {
//   return $resource('/api/tasks/:id.json', { id: '@id' });
// }])

export default todo;

todo.component.js：

import TodoController from './todo.controller';
import template from './todo.html';
import './todo.scss';

const TodoComponent = {
  controller: TodoController,
  controllerAs: 'todo',
  template: template
}

export default TodoComponent;

todo.service.js：

class TaskSvc {
  constructor($http) {
    this.$http = $http;
  }

  getTasks() {
    return this.$http.get('api/tasks')
      .then(handleResponse())
      .catch(handleError())
  }

  getTask(id) {
    return this.$http.get('api/task/' + id)
      .then(handleResponse())
      .catch(handleError())
  }

  createTask(task) {
    let req = {
      method: 'POST',
      url: 'api/tasks',
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        task: task
      }
    }
    return this.$http(req)
    .catch(handleError())
  }

  handleResponse(response) {
    return response.data
  }

  handleError() {
    console.log(error);
  }
}

export default TaskSvc;

package.json

{
  "name": "todo",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-transform-classes": "^7.4.3",
    "@babel/plugin-transform-runtime": "^7.4.0",
    "@babel/polyfill": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/runtime": "^7.4.2",
    "@fortawesome/fontawesome-free": "^5.8.1",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@rails/webpacker": "^4.0.2",
    "@uirouter/angularjs": "^1.0.22",
    "angular": "^1.7.8",
    "angular-resource": "^1.7.8",
    "bootstrap": "^4.3.1",
    "core-js": "^3.0.0",
    "font-awesome": "^4.7.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "3",
    "nodemon": "^1.18.10",
    "popper.js": "^1.14.7",
    "raw-loader": "^2.0.0",
    "rxjs": "^6.4.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.4000",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.1.0",
    "webpack-cli": "^3.3.0",
    "zone.js": "^0.9.0"
  },
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-dev-server": "^3.2.1"
  },
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "version": "1.0.0",
  "main": "babel.config.js",
  "directories": {
    "test": "test"
  },

webpack.config.js：

var path    = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  devtool: 'source-map',
  entry: {},
  module: {
    loaders: [
       { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel', exclude: /node_modules/ },
       { test: /\.html$/, loader: 'raw' },
       { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
       { test: /\.css$/, loader: 'style!css' }
    ],  
  },

  plugins: [
    // Injects bundles in your index.html instead of wiring all manually.
    // It also adds hash to all injected assets so we don't have problems
    // with cache purging during deployment.
    new HtmlWebpackPlugin({
      template: './views/layouts/application.html.erb',
      inject: 'body',
      hash: true
    }),

    // Automatically move all modules defined outside of application directory to vendor bundle.
    // If you are using more complicated project structure, consider to specify common chunks manually.
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
      }
    })
  ]
};

为什么我的服务有一个未知的提供程序：$ http？

0 个答案: