个人中心
gpt4 book ai didi

javascript - 使用 Gulp 时 AngularJS 组件配置错误

转载 作者：太空宇宙 更新时间：2023-11-04 02:22:39 25 4
gpt4 key购买 nike

我正在尝试使用 Gulp 作为构建工具来建立一个 AngularJS Web 项目，同时遵循 John Papa 的 opinionated style guide 。但是，当我加载页面时，我收到以下错误:

Uncaught Error: Cannot find module 'function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}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].exports}var i=typeof require=="function"&&require;for(var o=0;o

Error: [ng:areq] Argument 'WelcomeController' is not a function, got undefined http://errors.angularjs.org/1.4.5/ng/areq?p0=WelcomeController&p1=not%20a%20function%2C%20got%20undefined at REGEX_STRING_REGEXP (angular.js:68) at assertArg (angular.js:1795) at assertArgFn (angular.js:1805) at angular.js:9069 at setupControllers (angular.js:8133) at nodeLinkFn (angular.js:8173) at compositeLinkFn (angular.js:7637) at compositeLinkFn (angular.js:7641) at publicLinkFn (angular.js:7512) at angular.js:1660

我的文件结构如下:

应用程序模块(main.js):

(function() {
  'use strict';
  angular.module('cbCommApp', []);
})();

Controller 组件(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>

gulp 任务:

// 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 等，例如 .controller('WelcomeController', function($scope) {...})。如果你丑化，你还需要使用 ngAnnotate，因为否则 Angular 的依赖注入(inject)会破坏单字母参数名称(也许 ngAnnotate 甚至解决了你最初的问题 - 我不确定)。

关于javascript - 使用 Gulp 时 AngularJS 组件配置错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32339182/

25 4 0
文章推荐： 多核或单核上的多个 Node 实例上的 Node.js 集群模块
文章推荐： html - SVG 剪辑路径问题
文章推荐： html - 链接到具有相同名称的外部字体？
文章推荐： css - 如何使用 highcharts 实现此图
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com