Error: [$injector:modulerr] Failed to instantiate module ui.grid due to(Angularjs)

Question

我的 Angularjs 应用程序需要一个 table，因此尝试使用 http://ui-grid.info/docs/#!/tutorial/101_intro 中的 UI 网格，但出了点问题，控制台显示这样的错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module appModule due to: Error: [$injector:modulerr] Failed to instantiate module ui.grid due to: Error: [$injector:nomod] Module 'ui.grid' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

你能检查一下代码吗

 //index.html

<body>
  <app></app>
  <script src="dist/bundle.js"></script>
</body>

// app.html

<table-transaction></table-transaction>

//table-transaction.html

 <div ui-grid="{ data: GridController.transactions }" class="table-transaction-grid" ></div>

//index.scss

@import "~normalize.css";

@import "~angular-ui-grid/ui-grid.css";

@import "./components/table-transactions/table-transactions";

//table-transaction.scss

.table-transaction-grid {
  width: 100%;
  height: 250px;
}

//index.js

import "./index.scss";

import angular from "angular";
import { appModule } from "./components/app/app";

angular.bootstrap(document.body, [appModule]);

//app.js

import angular from "angular";
import template from "./app.html";

import { tableTransactionModule } from "../table-transactions/table-transactions";

export const appModule = angular
  .module("appModule", [tableTransactionModule, "ui.grid"])
  .component("app", {
    template
  }).name;

//table-transaction.js

import angular from "angular";
import template from "./table-transactions.html";

export class GridController {
  constructor() {
    this.transactions = [
      {
        date: "01.03.2018",
        amount: "-300 USD",
        description: "soccer playing",
        tags: hobby,
        account: XBank,
        debitcard
      },
      {
        date: "17.03.2018",
        amount: "+1500 USD",
        description: "%% deposit",
        tags: "YBank's services",
        account: deposit 
      }
    ];
  }
}

export const tableTransactionModule = angular
  .module("tableTransaction", [])
  .component("tableTransaction", {
    controller: GridController,
    template
  }).name;

Answer 1

看来你需要导入 ui-grid.js

Error: [$injector:modulerr] Failed to instantiate module ui.grid due to(Angularjs)

Error: [$injector:modulerr] Failed to instantiate module ui.grid due to(Angularjs)

angularjs

angular-ui-grid

ui-grid