Compiling TypeScript on save disrupts AngularJS functionality in Visual Studio 2017

I am currently working on a project in Visual Studio Community 2017 (15.2) that involves AngularJS 1.6.5 and a NancyFX server.

You can find the code for this project here: https://github.com/GusBeare/NancyAngularTests

This project serves as a learning playground for me, where I test out various features that I plan to implement in a real project.

All of the AngularJS code is stored in Typescript files, and my tsconfig.json file instructs the compiler to bundle it into a single JS file called Content/js/bundle.js.

While everything works smoothly when I build and run the project, editing a .ts file while the application is running results in an error:

angular.min.js:7 Uncaught Error: [$injector:nomod] 
http://errors.angularjs.org/1.6.5/$injector/nomod?p0=mySPA

Although the compile-on-save feature successfully rebuilds Content/js/bundle.js upon saving changes, I still encounter the Angular error. Is there a mistake in my AngularJS code, or could this be related to Typescript/Visual Studio?

If I build and publish the project, it runs seamlessly under IIS without any issues.

javascriptangularjsvisual-studiotypescripttsc

Answer №1

After noticing that the order of files in my tsconfig.json was not being honored outside of Visual Studio when compiling TypeScript with tsc, I suspected a bug in the Visual Studio TypeScript tools.

I decided to visit https://www.microsoft.com/en-us/download/details.aspx?id=48593 and discovered that a new version (2.4.1) had just been released.

Upon installing this new version, I believed that the issue had been resolved as the ts compiler began reading the files in the specified order and bundling them correctly.

Update:

However, it turns out I was mistaken. The problem persisted even after building the project, causing it to fail to run due to the incorrect compilation order of files. In a strange workaround, manually editing the bundle and then further editing the .ts files resulted in correct rebuilding of the bundle.js. But upon closing and reopening the project, the issue resurfaced. It seems like there are still unresolved bugs within the system.

Update 2

To work around this issue, I converted app.js back to JavaScript and removed it from the TypeScript bundle. By ensuring that app.js is loaded before bundle.js, everything now functions correctly.

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

Issue with React router not functioning correctly when dealing with dynamically created anchor tags utilizing jquery

As a newcomer to React.js, I have incorporated jQuery into my project to handle mouse and click events for cloning navigation elements, specifically <li> tags within <a> tags. The cloned elements are displayed in a targeted div ID successfully. ...

javascriptjqueryhtmlreactjsreact-router

What is the best way to verify a numerical input in a React component?

When I use the return statement, I attempt to validate a number and if it's not valid, assign a value of 0. However, this approach doesn't seem to be working for me. Is there an alternative method to achieve this? return ( <Input col ...

reactjstypescriptvalidation

"Trouble arose when I tried to incorporate additional functions into my JavaScript code; my prompt feature is not

As a beginner in HTML and JS coding, I am working on creating a page that prompts user input for a name and then executes animations using radio buttons. However, after adding functions for radio button changes, my prompt is no longer functioning properly. ...

javascriptjqueryhtmlcss

Unable to locate additional elements following javascript append utilizing Chrome WebDriver

I have a simple HTML code generated from a C# dotnet core ASP application. I am working on a webdriver test to count the number of input boxes inside the colorList div. Initially, the count is two which is correct, but when I click the button labeled "+", ...

javascriptc#selenium-webdriverselenium-chromedriverxunit.net

The latest Google sign-in method features a blank white modal in popup mode

Here is the code that I am working with, where everything seems to be set up correctly: After clicking a button with an ID of 'buttonDiv', a popup appears. If no user account exists, I am prompted to login. However, upon logging in and choosing ...

javascriptreactjsgoogle-oauth

Limit image dimensions

How can I limit the height and width of an image within the <img> tag to a maximum size of 400x400 px? If the image is smaller than this, it should display at its original size, but if larger, it should be compressed to fit within these dimensions. ...

javascripthtmlimageimage-size

Issue with Node.js xml2js module: Sitemap attributes are not being recognized during creation

Currently, my project involves utilizing node.js and xml2js to generate an XML sitemap.xml. Everything seems to be in order, but when I try to define attributes like: '$': { 'xmlns': 'http://www.sitemaps.org/schemas/sitemap/0 ...

javascriptnode.jsxmlsitemapxml2js

Angular JS presents an exciting feature called Multiple Filters, which allows

I have a data representation application that displays information in table format with columns id, name, price, quantity The data is presented using ng-repeat. You can view it on this Plunker <body ng-controller="myController"> <h1>Data< ...

javascriptangularjsfiltering

Stopping CSS animations at a specific point along the path without using timing functions can be achieved by implementing a targeted

Is there a way to pause an animation at the 50% mark for 2 seconds and then resume? P.S. The setInterval method is not recommended! function pauseAnimation() { document.getElementById("0").style.animationPlayState = "paused"; }; var pauseInterval = set ...

javascripthtmlcsscss-animationskeyframe

Button-controlled automated presentation

I have devised a method to create an automatic slideshow using JavaScript. However, I am looking to incorporate manual control buttons as well. After adding manual control code, the slideshow seems to be malfunctioning. The provided code below is used for ...

javascripthtmlcssslideshow

Generating visual content from an application programming interface

<div class="row box"> <div class="col-md-4 pic"></div> <div id="temperature" class="col-md-4 change make_blue bigger_text"> Placeholder </div> <div class="col-md-4"> <button id="getChange" class="make_ ...

javascriptjqueryhtmlcss

Why is my jQuery $.ajax success function not providing any results?

When checking the Network tab in Chrome, I noticed that the correct data (action, username, password) is being sent, but the message is not returning to $('#return_login'). Can anyone spot what might be wrong with my code? Below is the jQuery co ...

javascriptphpjqueryajax

Learn how to retrieve the accurate file name and file type using CordovaFile and CordovaFileTransfer

I have a project where I need to dynamically load files from a website. When you click on a link in the browser, it loads the files with the correct names and extensions. How can I implement this functionality in an Ionic app? I am unsure of how to go ab ...

angularjsionic-frameworkcordova-pluginsngcordova

Is it possible to access the operating system's native emoji picker directly from a website?

While there are numerous javascript plugins and libraries available for allowing users to select emojis for text inputs, both Windows and Mac operating systems already have their own native emoji pickers accessible via ⊞ Win. or CTRL⌘Space. Is there a ...

javascripthtml

Having trouble with adding an event listener on scroll in React JS. Need assistance in resolving this issue

I'm having trouble adding an event listener for when a user scrolls in my web app. componentDidMount = () => { let scrollPosition = window.scrollY; let header = document.getElementById("topBar"); window.addEventListener(&ap ...

javascriptreactjs

Guide on how to combine the strings retrieved from an API

I'm having trouble concatenating multiple sentences together and highlighting specific words in each sentence. Although I can successfully highlight one sentence using the code below, I haven't been able to concatenate more than one sentence: th ...

javascriptreactjsfetch-api

How can I modify the value of a variable in Vue.js in order to display a Bootstrap alert based on a specific condition?

Apologies in advance if my question seems obvious. As a newcomer to Vue.js, I'm facing a roadblock and could really use some assistance. In my authentication system, I want to display a Bootstrap alert if a user tries to register without entering a u ...

javascripthtmltwitter-bootstrapauthenticationvue.js

Having trouble loading this JSON data into my table

So I have a little challenge on my hands: I've got a JSON file with information about various books, each including details like title, author, and year of publication. The goal is to select an option from the list and display the chosen property in ...

javascriptjsonajax

Guide on accessing JSON data within a script tag with jQuery through a bookmarklet

Currently, I am developing a bookmarklet that injects jQuery and attempts to retrieve specific data from a webpage that is built using AngularJS. The JSON data required can be found within a script tag when inspecting the page source in Chrome. <script ...

jqueryangularjsjsonbookmarklet

Create an object with identical keys as another object

I need to create a mapping between two objects. The first object can have keys of any string type and values of a generic type. I want to map the second object with the same keys, allowing different types for the values (ideally extracted from the generi ...

typescripttypescript-typings