Rails + Angular 中的 heroku 部署错误。 ui-路由器

Question

Rails 后端。 Angular 前端。使用 angular-ui-路由器。在本地，它工作正常。但是当它部署到heroku上时，它给出了这个错误。所有依赖项似乎都已正确下载。我需要帮助查看此错误指示的内容。

application.js:

//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-ui-router/release/angular-ui-router

//= require bootstrap
//= require_self
//= require_tree .

angular
  .module('maphack', ['ui.router'])
  .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        component: 'homePage'
      })

    // default fall back route
    $urlRouterProvider.otherwise('/');

    // enable HTML5 Mode for SEO
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
});

控制台上的错误消息：

application-118d41a….js:4 Uncaught Error: [$injector:modulerr] Failed to 
instantiate module XXXXX due to:
Error: [$injector:unpr] Unknown provider: t
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=t

Answer 1

在我看来，罪魁祸首是 JavaScript 缩小。 Angular 以这种方式注入的模块通常会被 JavaScript 压缩器混淆。

一个可能的解决方案是在声明依赖项时使用另一种语法。改变这个：

.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

对此：

.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", function ($stateProvider, $urlRouterProvider, $locationProvider]) {

后者不容易受到 JS 缩小的影响，因为您在字符串中声明依赖关系，并且 Angular 足够聪明，可以选择这些并注入您的配置。

Ready to learn more?

Rails + Angular 中的 heroku 部署错误。 ui-路由器

Error on heroku deployment in Rails + Angular. ui-router

ruby-on-rails

heroku

angularjs

angular-ui-router

angularjs-injector