使用Gulp时AngularJS组件配置错误

AngularJS component misconfiguration when using Gulp

本文关键字：配置 错误 组件 AngularJS Gulp 使用      更新时间：2023-09-26

我正在尝试使用Gulp作为构建工具建立一个AngularJS web项目，同时遵循John Papa的固执己见的风格指南。然而，当我加载我的页面时，我收到以下错误:

Uncaught Error: Cannot find module 'function e(t,n,r){function s(o,u){if(!n[o]){if(! n[o]){var a=typeof require=="function"&&require;if(!u&& &a)return a(o，!0);if(i)return i(o，!0)}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=to[e];return s(n?n:e)}，f,f.exports,e,t,n,r)}return n[o]。{var i=typeof require=="function"&&require;for(var o=0

错误:[ng:areq]参数'WelcomeController'不是一个函数，得到未定义的http://errors.angularjs.org/1.4.5/ng/areq?p0=WelcomeController&p1=not%20a%20function%2C%20got%20undefined在REGEX_STRING_REGEXP (angular.js:68)(angular.js:1795)at assertArgFn (angular.js:1805)在angular.js: 9069at setupControllers (angular.js:8133)在nodeLinkFn (angular.js:8173)在复合链接fn (angular.js:7637)在复合链接fn (angular.js:7641)(angular.js:7512)在angular.js: 1660

文件结构如下:

应用模块(main.js):

(function() {
  'use strict';
  angular.module('cbCommApp', []);
})();
控制器组件(WelcomeCtrl.js): 
(function() {
  'use strict';
  angular
      .module('cbCommApp')
      .controller('WelcomeController', WelcomeController);
  /* If depdencies are required - use the $inject option */
  WelcomeController.$inject = ['$scope'];

  function WelcomeController($scope) {
    /*jshint validthis: true */
    var wc = this;
    wc.testVar = 'We are up and running from a required module!';
  }
})();
HTML文档:

<!doctype html>
<html lang="en" ng-app="cbCommApp">
<head>
  <title>My App Title</title>
</head>
<body ng-controller='WelcomeController as welCtrl'>
  <h1>Hello World</h1>
  <p>{{welCtrl.testVar}}</p>
  <script src="/assets/javascript/jquery.min.js"></script>
  <script src="/assets/javascript/angular.js"></script>
  <script src="/assets/javascript/bundle.js"></script>
</body>
</html>

杯任务:

// Browserify task
gulp.task('browserify', function() {
  gulp.src(['source/javascript/**/*.js'])
  .pipe(browserify({
    insertGlobals: true,
    debug: true
  }))
  // Bundle to a single file
  .pipe(concat('bundle.js'))
  // Output it to our dist folder
  .pipe(gulp.dest(config.jsAssets));
});

我已经验证了Angular库正在正确加载，并且它引导了cbCommApp。它似乎就是找不到Controller组件。有人知道哪里出了问题吗?

似乎无论是Browserify或concat命令丑化JS，以便函数名称被重命名为单个字母(您可以在输出中看到:function e(t,n,r){...)。你不应该丑化代码，或者直接用匿名函数如.controller('WelcomeController', function($scope) {...})来定义你的控制器等。如果你做了丑化，你还需要使用ngAnnotate，否则Angular的依赖注入会因为单字母的参数名而中断(也许ngAnnotate甚至解决了你最初的问题——我不确定)。

您必须确保main.js在您的连接版本中出现在JavaScript的其余部分之前。否则，您将尝试将WelcomeCtrl分配给不存在的模块，而将被静默忽略。您可以这样指定源:

["source/javascript/main.js", "source/javascript/**/*.js"]
相关文章：