Gulp.js does not recognize Angular

I keep encountering an Angular error that says 'Angular is not defined'. I'm almost certain it has something to do with incorrect path configurations, but I'm at a loss. Here's my current folder structure:


bower_components/
node_modules/
app/
   components/
              home/
                   controller/
                              homeCtrl.js
                   css/
                         home.css
                   home.html

    shared/
           css/
           directives/
           filters/
           directives/
           sass/
           services/
assets/
    audio/
    debug/
    dist/
         app.min.js
         vendor.min.js
    lib/
    etc...

gulp/
   paths.js

gulpfile.js
index.html
etc....

Despite my best efforts, the error persists stating that angular is not defined.

Gulpfile.js:

//Require Gulp
var gulp = require("gulp");
var ngAnnotate = require("gulp-ng-annotate");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var sourceMaps = require("gulp-sourcemaps");
var util = require('gulp-util');
var coffee = require("gulp-coffee")
var clean = require("gulp-clean");
var expect = require('gulp-expect-file');
var sass = require('gulp-sass');
var es = require('event-stream');
var ng_annotate = require('gulp-ng-annotate')


var base = 'app';
// var minifyCss = require('gulp-minify-css');

var paths = require("./gulp/paths");

//remove temporary directories like dist
gulp.task('clean', function() {
    return gulp.src('assets/dist', {read: false})
    .pipe(clean());
});

// combines all js files into one and create sourcemaps for them
gulp.task('scripts', function(done) {
    gulp.src(paths.js)
    .pipe(sourceMaps.init())
    .pipe(concat('app.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify().on('error', util.log))
    .pipe(sourceMaps.write('.'))
    .pipe(gulp.dest(paths.dest))
    .on('error', util.log)
    .on('end', done);
});



gulp.task('copy', function() {
  var files = ['bower_components/angular/angular.min.js'];
  return gulp.src(files)
    .pipe(expect(files))
});

gulp.task('watch', function() {
    gulp.watch(paths.js, ['scripts'])
});

gulp.task('scripts:vendor', function() {
   return gulp.src(paths.vendor_js)
        //  .pipe(concat(paths.vendor_js[0]))
         .pipe(concat('vendor.min.js'))
         .pipe(uglify().on('error', util.log))
         .pipe(gulp.dest(paths.dest));
});


gulp.task('serve', function() {

})


gulp.task('default', function() {
    console.log("running gulp");
});

gulp/Paths.js:

module.exports = {
    dest: 'assets/dist',
    js: [
        'app/app.module.js',
        'app/app.run.js',
        'app/shared/**/*.module.js',
        'app/shared/**/*.js',
        'app/components/**/*.js',
        'app/components/**/*.module.js'
    ],
    sass: ['app/shared/**/*.sass'],
    vendor_js: [
         'bower_components/jquery/dist/jquery.js',
         'bower_components/angular/angular.min.js',
         'bower_components/**/*.min.js',
         'assets/lib/svg-assets-cache/svg-assets-cache.js',
         'assets/lib/alertifyjs/build/alertify.min.js',
         'assets/lib/Recaptcha/googleRecaptchaAPI.js',
         'assets/lib/angular-screenfull/angular-screenfull.min.js',
         'assets/lib/screenfull/screenfull.min.js',
         'assets/lib/angular-selectize/angular-selectize.js'
    ],
    vendor_styles: [
        'bower_components/selectize/dist/css/selectize.css',
        'bower_components/font-awesome/css/font-awesome.min.css',
        'assets/lib/alertifyjs/build/css/alertify.css',
        'assets/lib/alertifyjs/build/css/themes/semantic.min.css',
        'bower_components/vex/css/vex.css',
        'bower_components/vex/css/vex-theme-flat-attack.css',
        'assets/lib/material-charts/material-charts.min.css'
    ]
};

index.html:

<!DOCTYPE html>
<html lang="en" class="html_container">

<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <meta name="viewport" content="width=1200">
    <title>Ng-Forum</title>

    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/lib/alertifyjs/build/css/alertify.css" />
    <link rel="stylesheet" href="assets/lib/alertifyjs/build/css/themes/semantic.min.css" />
    <link rel="stylesheet" href="bower_components/vex/css/vex.css" />
    <link rel="stylesheet" href="bower_components/vex/css/vex-theme-flat-attack.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/amanuel2/MathGame/master/chartjs/material-charts.min.css" type="text/css" />
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
    <link rel="icon" href="favicon.ico">

</head>

<body ng-app="ForumApp">
    <div ui-view></div>
    <!--<script type="text/javascript" src="https://code.angularjs.org/1.4.9/angular.js"></script>-->
    <script type="text/javscript" src="assets/dist/vendor.min.js"></script>
    <script type="text/javascript" src="assets/dist/app.min.js"></script>
</body>

</html>

Any help in resolving this issue would be greatly appreciated! By the way, I am working on Cloud9IDE so fixing it there would be quick and fantastic! https://ide.c9.io/amanuel2/ng-forum

javascriptangularjsgulp

Answer №1

The reason behind the error was a typo in my code where I mistakenly wrote "javscript" instead of "javascript":

<script type="text/javscript" src="assets/dist/vendor.min.js"></script>

It was quite challenging to identify the mistake as such a small error could cause significant confusion!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery - Issue with setTimeout Function on Mouseleave Event

I am currently facing an issue with the script below. The goal is to display a div instantly when hovering over a specific area, and then make it disappear after a certain amount of time when leaving that area. Everything works perfectly, except if the mou ...

javascriptjquerysettimeoutmouseleave

Refresh the angular list filter by clicking on it

I'm struggling with updating an Angular list after the filter is changed. Below is the HTML code I am using: <li ng-repeat="items in list | filter:filterList" style="list-style-type:none"> {{items}} </li> Additionally, here is the o ...

javascriptjqueryangularjs

Unable to modify text or utilize any of the buttons within CKEDITOR

My goal is to have a div that, when clicked, will trigger the opening of CKEDITOR. The contents of the div should then be loaded into the editor. When I click outside of the editor, I want the contents of the editor to be displayed back in the div. Below ...

javascriptjqueryckeditor

Form a JavaScript object using a string

Is there a way to access a user control using a predefined name, similar to how DevExpress components work? For example: "<dx:MyUserControl runat="server" ID="My" ClientInstanceName="MyClient"></>" In my main page, I want to be able to call a ...

javascriptjqueryasp.netdevexpress

What is the purpose of having several script tags following the creation of NextJS?

After running next build and next start, my application is still generating many JS files instead of a single entry point. I'm unsure if I missed a step as the documentation suggests this should be all that's required. https://i.stack.imgur.com/7 ...

javascriptnext.js

Convert a list into a hierarchical structure of nested objects

Working with angular, I aim to display a nested tree structure of folders in an HTML format like below: <div id="tree"> <ul> <li ng-repeat='folder in folderList' ng-include="'/templates/tree-renderer.html'" ...

javascriptangularjstreetreeview

Executing a directive function from an AngularJS controller

I am facing a challenge with integrating my controller and directive. In my controller, I have the following code snippet: .controller('MyCtrl', ['$scope', '$rootScope', 'restService', function ($scope, $rootSc ...

angularjsangularjs-directive

Displaying images within a table using innerHTML (Javascript / Html)

Let's start off with some important details: I have a dynamic table that is being generated. The structure of the table is as follows: |item__ | price | category | category | category | category | picture | |chicken| $20 | _______ |_ ______ ...

javascript

Altering the appearance of a different element with React

I'm new to using react and struggling to make a Component appear when I click on a button. Here's an example of the code I have so far: <Button>GO</Button> <CalendarIcon id="calendar visibility="hidden"/> and th ...

javascriptreactjsnext.js

Searching for JSON arrays in JavaScript or jQuery using grep

Consider this scenario: var exampleArray = [{ "fname": "gali", "lname": "doe" }, { "fname": "john", "lname": "danny" }, { &q ...

javascriptjqueryjson

Tips for updating a value in a React TextField using handleChange function

After clicking a button, I need to dynamically set a value in this textfield: <TextField fullWidth inputProps={{ maxLength: 75 }} key="nomeSocial" id="outlined-basic" label="Nome Social" name="nomeSocial&qu ...

javascriptreactjsmaterial-uiuitextfieldreact-hook-form

A Guide on Using Puppeteer to Extract the Value from an Invisible Input Element

import puppeteer from 'puppeteer' async function fetchSteamID(url) { try { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(url); const element = await page.wait ...

javascriptnode.jspuppeteersteam

Link to the Vue Bootstrap Toast Message

I have integrated vue-bootstrap-toasts (demo) into my website to display Toasts. However, I am facing an issue with adding a link to the toast that should redirect to another page. this.$toast.success('Test is created', { href: "www.googl ...

javascriptvue.jsbootstrap-4toast

Can someone tell me what comes after my nextElementSibling in this specific scenario?

I am puzzled by the usage of nextElementSibling in this code. Can someone provide an explanation on what exactly it is and where it should be used? Thank you in advance! Also, my code seems to be malfunctioning as I keep receiving an error message that s ...

javascriptfor-loopstylesaddeventlistenersiblings

Creating custom functions within views using Sencha Touch 2

I'm having trouble creating my own function in Sencha Touch 2 and I keep receiving an error: Uncaught ReferenceError: function22 is not defined The issue seems to be coming from my Position.js file located in the View directory. Ext.define(' ...

javascriptmodel-view-controllergoogle-maps-api-3sencha-touchsencha-touch-2

Is there a way to use JSON.stringify() to post multiple arrays at once?

Trying to send multiple arrays to the controller using Ajax post. Initially, there is a model structured like this: public class EnrollmentOptionsVM { public virtual string OptionID{ set;get;} public virtual string UserChoice { set;get;} p ...

javascriptajaxasp.net-mvc-3

"Creating Interactive Slider Bullets: A Guide to Linking them to Their Respective

I can't seem to figure out how to connect my slider bullets to my slider slides. I want bullet 1 to correspond to slide 1, bullet 2 to slide 2, and so on. It should be a simple task, but I'm struggling to make it work. I have set up a basic reset ...

javascripthtmlcss

Javascript favorite star toggling

An excellent illustration is the star icon located on the left side of this post. You have the ability to click on it to save this message as a favorite and click again to remove the flag. I have already set up a page /favorites/add/{post_id}/, but I am ...

javascriptajaxratingfavorites

Manipulate JSON data using a string path in JavaScript

Suppose I have the following JSON data, which can easily be converted into a JavaScript object: { "foo": { "bar": "Common substitute word", "baz": "Another common substitute word", "questionWords": { "wat": "Inadequ ...

javascriptjson

Protractor functions perfectly on localhost, but encounters a Timeout error when used remotely - the asynchronous callback was not executed within the specified timeout period

Running protractor protractor.conf.js --baseUrl=http://localhost:4200/ executes successfully by filling data, validating elements, etc. However, when attempting to test the same website through a remote URL protractor protractor.conf.js --baseUrl=http://t ...

javascriptangularjasmineprotractore2e-testing