Question

我是简单的离子应用程序，用打字稿（AMD）编写，并使用RequireJS进行加载，但如果我尝试运行应用程序离子抱怨：

未捕获错误：[$ injector：modulerr]无法实例化模块universityFinder，原因如下：错误：[$ injector：nomod]模块'universityFinder'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

index.html

<!DOCTYPE html>
<html ng-app="universityFinder">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <!-- compiled css output -->
    <link href="css/application.css" rel="stylesheet">

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- Javascript Loader -->
    <script data-main="js/loader" src="lib/requirejs/require.js" type="text/javascript"></script>
  </head>
  <body ng-cloak="">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">University Finder</h1>
      </ion-header-bar>
      <ion-content ng-controller="homeController">
      </ion-content>
    </ion-pane>
  </body>
</html>

// loader.ts

"use strict";
require.config({
  baseUrl: "js",
  paths: {
    "ionic": "../lib/ionic/js/ionic.bundle",
    "buildVars": "buildVars",
    "jquery": "../lib/jquery/dist/jquery",
    "lodash": "../lib/lodash/lodash"
  },
  shim: {
    ionic: {
      exports: "ionic"
    },
    buildVars: {
      exports: "buildVars"
    },
    jquery: {
      exports: "jquery"
    },
    lodash: {
      exports: "lodash"
    }
  }
});
require.onError = function(err) {
  console.log(err);
};
require(["ionic", "buildVars", "jquery", "lodash", "app"],
  (buildVars, jquery, lodash, app) => {
      // If I use following code to bootstrap angular module then applicaton module and controller start working but ionic error remains
      // angular.bootstrap(document, ["universityFinder"]);
  });



// app.ts

import {ApplicationConstants} from "./Constants/globalConstants";
import {RouteConfig} from "./routeConfig";
import {RunConfig} from "./runConfig";
import {HomeController} from "./Controllers/homeController";

"use strict";
let injects = ["ionic"];
export var universityFinder: ng.IModule = angular.module(ApplicationConstants.ApplicationName, injects);
universityFinder.run(RunConfig.setupRun);
universityFinder.config(RouteConfig.setupRoutes);

// Register Controllers
universityFinder.controller("homeController", HomeController);



// runConfig.ts

export class RunConfig {
  public static setupRun ($ionicPlatform: IPlatform) {
    this.$inject = ["$ionicPlatform"];
    $ionicPlatform.ready((): void => {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins.Keyboard) {
        window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        window.StatusBar.styleDefault();
      }
    });
  }
}



// routeConfig.ts
export class RouteConfig {
  public static setupRoutes($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider): void {
    this.$inject = ["$stateProvider", "$urlRouterProvider"];

    $stateProvider.state("app", {
      url: "/app",
      abstract: true,
      templateUrl: "templates/Root.html",
      controller: ""
    });

    $stateProvider.state("app.home", {
      url: "/home",
      views: {
        "root-view": {
          templateUrl: "templates/Home.html",
          controller: "homeController"
        }
      }
    });

    $urlRouterProvider.otherwise("/app/home");
  }
}



// applicationScope.ts
export interface ApplicationScope extends ng.IScope {
  viewModel: {

  };
}



// homeController.ts
export class HomeController {
  constructor(private $scope: ApplicationScope) {
    console.log("Application Loaded!");
    $scope.viewModel = this;
  }
}



// globalConstants.ts
export class ApplicationConstants {
  public static ApplicationName: string = "universityFinder";
}



// tsconfig.json
{
  "compilerOptions": {
    "module": "amd",
    "target": "es5",
    "sourceMap": true,
    "declaration": true,
    "removeComments": true,
    "outDir": "../www/js"
  },
  "atom": {
    "rewriteTsconfig": false
  },
  "exclude": [
    "node_modules"
  ],
  "filesGlob": [
    "../typings/**/*.d.ts",
    "*.ts",
    "Constants/**/*.ts",
    "Controllers/**/*.ts",
    "Directives/**/*.ts",
    "Filters/**/*.ts",
    "Interfaces/**/*.ts",
    "Models/**/*.ts",
    "Services/**/*.ts",
    "Typings/**/*.d.ts",
    "ViewModels/**/*.ts"
  ],
  "files":[
    "./app.ts",
    "./loader.ts"
  ]
}

Answer 1

试试这个：

垫片：{ ＆＃39; ionic＆＃39;：{ deps：[＆＃39; jquery＆＃39;] } }

参考〜https://market.ionic.io/starters/requirejs

ng-app无法用html写

参考〜http://www.sitepoint.com/using-requirejs-angularjs-applications/

使用typescript和requirejs

1 个答案: