The 'app' module is missing! Perhaps you mistyped the module name or overlooked loading it

Currently, I am in the process of developing an application using TypeScript along with AngularJS. However, I have encountered the following error:

Error: [$injector:nomod] Module 'app' is not available! It seems that either there is a typo in the module name or it has not been loaded properly. When registering a module, ensure that you specify the dependencies as the second argument.

The content of app.ts is shown below:

import * as angular from 'angular';
import IModule  = ng.IModule;

export class App{
    public static bootstrap():void{

    const app : IModule = angular.module('app',).component('sachin',{
        template:'<div>sdafdsfa</div>',
        controller:[function(){

        }],
        controllerAs:'vm'
    })

    angular.bootstrap(document, ["app"], {
        "strictDi": true,
    });
}

}

The content of index.html is as follows:

<!DOCTYPE html>
<html lang="en" ng-app="app" >

<head>
    <title>My AngularJS App with ts</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <sachin></sachin>
    <script src="vendors.js"></script>
    <script src="bundle.js"></script>
</body>

</html>

Answer №1

Include the angular.js file in your HTML document

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

Why is ui-view failing to display the associated template in angular-ui-tab?

Can someone help me troubleshoot why ui-view is not working for ui-tab in my code? Here is what I am experiencing: On the customers page, I have a link that redirects to the update customer page when clicked. The link looks like this: http://localhost:300 ...

Obtaining the value from a TypeScript hashmap: Using a getter function or setting a

Looking to create a simple getter for retrieving a value from an object with string keys, or returning a default value of the same type when necessary. This situation arises frequently when working with Maps in Typescript. The main focus is on accessing to ...

Automatic browser refresh with the `bun dev` command

Currently experimenting with the latest bun platform (v0.1.6) in conjunction with Hono. Here are the steps I followed: bun create hono test-api cd test-api bun dev After running the server, the following message appears: $ bun dev [1.00ms] bun!! v0.1.6 ...

What is the best way to implement a shared header using HTML, CSS, and JavaScript?

Embarking on a new project at my workplace, I find myself tasked with the creation of a Universal Header. This endeavor involves ensuring that across all our domains and servers, customer-created sites, and third-party platforms, we have a seamless method ...

When working on one of my subdomains, I require the ability to distribute cookies between the two

Currently, I am involved in a project that utilizes a sub-domain under a parent domain called "my-project.parent.com", which unfortunately I do not have access to. Additionally, there is another project operating under the main domain "parent.com" with t ...

Is there a way to navigate to a different page in AngularJS without the need to refresh the current page?

I am searching for a method to redirect to a different page without reloading the current one. Let me describe my scenario. I have a user login requirement. If a user is not logged in and tries to access the URL directly (e.g. "localhost/sample.html") th ...

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

Repeating every other item in a list using ng-repeat in AngularJS

Using AngularJS version 1.5.3 In my view, I have a list of items that I want to display. After every two items, I would like to show a new div below the first one. <div class="col text-center" ng-repeat="event in weekDay.events"> &nbsp;& ...

The functionality of the String prototype is operational in web browsers, but it encounters issues

Version: 8.1.0 The prototype I am working with is as follows: String.prototype.toSlug = function () { return (<string>this) .trim() .toLowerCase() .replace(/\s+/g, '-') .replace(/[^\w\-]+/g, '') ...

"AngularJS is encountering an issue where the API response from a $http GET

I seem to be encountering some issues where I am receiving the data in the callback, but an error "response is not defined" is appearing in the Get XMLHttpRequest method. ReferenceError: response is not defined at eval (eval at getApproval (https://loc ...

Understanding how to handle prop types in a React application using Typescript

My current task involves using the react-google-maps library to integrate Google Maps API into my project. The documentation specifies a certain way to set up the maps component: const GoogleMapComponent: React.ComponentClass<{}> = compose( with ...

NextJS Typescript Player

Encountering an issue during the build process, specifically with the error in audioRef.current.play(). The error message indicates that there is no play function available. I attempted to use an interface but it seems to not accept boolean values. Could ...

Eslint in VS Code encounters issues resolving paths within a monorepo

I'm currently working on a project with the following structure: modules │ ├── client │ ├── .eslintrc.json │ └── backend │ ├── .eslintrc.json ... One issue I've run into is that when I access the p ...

Is there an implicit transformation or action involved when the promise chain is resolved or rejected in $q?

Is there an intrinsic digest/apply included when the promise chain is resolved/rejected in $q? I recently switched from using $q to q in my code and it seems like a digest is no longer happening, leading to different outcomes. What could be causing this c ...

In TypeScript, when 'this' does not have a specified type annotation, it will implicitly be of type 'any'

I'm facing challenges with redirecting in React using TypeScript. I know it's possible to configure the TS settings to avoid using implicit "this" keyword, but I don't think that's the right approach to truly "fix" it, just a workaround ...

Guide to incorporating parameters in the filter function in AngularJS

Is there a way to use parameters in a filter when iterating through arrays with ng-repeat? For example: Here is the HTML part: <tr ng-repeat="user in users | filter:isActive"> And here is the JavaScript part: $scope.isActive = function(user) { ...

Converting the 'require' call to an import may be a more efficient method when importing package.json in a typescript file

In my current project, I am creating a class where I am directly accessing the package version number like this: const pkg = require('../package.json') export class MyClass() { constructor() { // Set the base version from package.jso ...

Restricting Method Arguments in TypeScript to a Specific Type

I am looking to restrict the calling party from inputting arbitrary strings as parameters to a method: // A class that provides string values (urls) class BackendUrls { static USERS_ID = (id: string) => `/users/${id}`; static CONSTANTS ...

Eliminate repeated elements from an array using Typescript

I am a novice when it comes to TypeScript, and I have been encountering challenges applying my JavaScript skills. Specifically, could someone assist me in converting the JavaScript code provided below into TypeScript? If direct conversion is not feasible, ...

Sending an array of functions to the onClick event of a button

Having difficulty with TypeScript/JavaScript Currently working with an array of functions like this private listeners: ((name: string) => void)[] = []; Successfully adding functions to the array within another function. Now looking to trigger those ...