Having an issue with my Typescript code that is throwing a "Uncaught ReferenceError: angular is not defined" error

I am currently in the early stages of learning typescript with angularjs through online video tutorials. I have encountered an issue while attempting to include the angular module in my "app.ts" file, which serves as the main file in the backend. Below is a snippet of my app.js code:

/// <reference path="Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="Scripts/typings/angularjs/angular.d.ts" />



console.log("This is a TS file"); 


angular.module('classProjectApp', ['ngRoute'])
    .config(function ($routeProvider) {
        console.log("in Config()");
    });

In order to address this issue, I added the angularjs file in my index.html file as shown below:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

Unfortunately, despite these efforts, I continue to encounter the error message:

Uncaught ReferenceError: angular is not defined

This error persists, even though the identical example provided in the video tutorial functions properly.

P.S. It's worth noting that when adding references for angular in the index.html file, I had to utilize a relative path (Scripts/.../.../angular.js), while the tutorial simply referenced it using "angular.js".

Thank you for your assistance.

Answer №1

  • Make sure to prioritize the angularjs reference at the top of your code.
  • The app.js file should be included below that.
  • Don't forget to specify ng-app="classProjectApp" on the html tag.

Here is an alternative code snippet for you to try:

<html ng-app="classProjectApp" lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
     <script src="Scripts/angular.js"></script>
     <script src="Scripts/angular-route.min.js"></script>
     <script src="app.js"></script>

</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

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

What does the main attribute in npm stand for?

The command npm init generates a file called package.json. The contents typically look like this: { "name": "webpack-tut", "version": "1.0.0", "description": "", "main": "index.js", .... } I came across this information in the official documen ...

Order comments based on their category using vue.js

I have a component form with select filter: <template> <div class="form-group"> <select name="" v-model="filterRev" @change="filterReviews(filterRev)" class="form-control" id=""> <option ...

Simplified File Paths and Default Files

Currently, I am working with Next.js and TypeScript, setting up path aliases in my project without any issues. However, I'm facing a small difficulty when it comes to dealing with index.ts files within folders. My goal is to achieve something similar ...

Troubleshooting an ENOTFOUND issue in my express.js application created with nodejs

I always seem to encounter an issue when trying to redirect to another webpage (such as google.com) using my nodejs express server. The error message that consistently appears is: throw er; // Unhandled stream error in pipe. ^ Error: getaddrinfo ...

The Next.js build failed due to the absence of the required "slug" parameter being passed as a string

I'm currently working on setting up a blog using Next.js and TypeScript, and I've encountered an issue with [slug].tsx. The error message I'm receiving is: Build error occurred Error: A required parameter (slug) was not provided as a strin ...

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

Unique validation feature implemented in Parsley.js runs through validation loop twice

I've spent the entire afternoon trying to figure this out, but I just can't seem to debug it. The issue arises when I do a hard refresh of the page and my custom async validator runs twice, yet only sends one request to the server. window.Parsle ...

extracting information from an object's property

I have implemented the following JavaScript code: var hours = $(".input_hr"); var minutes = $(".input_min"); var categories = $(".input_cat"); for(var i=0;i<categories.length;i++){ if (categories[i].value === "Entertainment") { ...

Utilizing Jade to access and iterate through arrays nested in JSON data

Take a look at this JSON data: { "Meals": { "title": "All the meals", "lunch": ["Turkey Sandwich", "Chicken Quesadilla", "Hamburger and Fries"] } } I want to pass the array from this JSON into a jade view so that I can iterate over each item in ...

NextJS and Context API throwing a Typescript error

I've been working on my _app.tsx file and here's the code snippet I have: import React from 'react' import type { AppProps } from 'next/app' /* Import Styles */ import '@themes/index.scss' /* Import Template */ imp ...

Decoding JavaScript elements embedded in an HTML website

My current HTML site includes the following code: <script type="text/javascript"> jwplayer('player_container').setup( { 'width': '640', ...

Leveraging findOne and findOneAndUpdate with an HTTP request in mongoose

I am currently developing an API Rest where I need to make HTTP requests using Postman. Specifically, I am trying to search for or update a MongoDB document by an ID that is not the default doc_id provided by Mongo. Models Schema 'use strict' ...

Is it possible to apply filters to individual columns in a dynamic mat table using Angular?

Does anyone know how to add a filter for each dynamic column in an Angular Material table? I've only found solutions for static headers, but my table headers are constantly changing. I'm looking for something similar to this example: https://i.st ...

Identification of absence of file selected in input file control

Imagine a scenario where I need to select an image to display on the screen from a select control. If the desired image is not available, I want to be able to choose it from the disk and add this option to the select control while automatically selecting i ...

Tips for streamlining distinct states and generalized state in UI Router

I've set up the following configuration in my JS app under the $stateProvider section using angular ui-router: .state('login', { url: '/login', templateUrl: 'app/login/login.tmpl.html', controller: &apo ...

Debugging a node.js application remotely using SAP Cloud Foundry

Having successfully deployed multiple node.js express services on SAP Cloud Foundry, we have encountered a roadblock in the form of remote debugging. Recognizing that others may be facing similar challenges, we are putting forth a direct inquiry: What is ...

Trouble with invoking a function within a function in Ionic2/Angular2

Currently, I am using the Cordova Facebook Plugin to retrieve user information such as name and email, which is functioning correctly. My next step is to insert this data into my own database. Testing the code for posting to the database by creating a func ...

Display of environment variables in the production build

In a nutshell, I somehow "downloaded" my app (Ctrl+S or right click+save as) and discovered that my environment variables are not hidden but stored in a file named main.xxxx.js (where xxx is the build hash). I came across a secret key for a service in tha ...

Inserting a cell into a duplicated table while keeping the original table intact

I am looking to insert a new TD into a cloned table so that it exists only in the cloned version and not in the original one. This way, users won't accidentally remove the original table leaving nothing to be cloned :) Currently represented as follow ...

Ways to manage the duration of the message pop-up window's display

Whenever the disk format is in progress, I utilize this.$toast() to notify the user. However, the message only displays for 1 second. I want the message to persist until the formatting is completed. How can I achieve this? ...