Angular2 webpack example error: Cannot execute function 'call' because it is undefined

As I navigate through the Angular2 webpack sample app on https://angular.io/docs/ts/latest/guide/webpack.html, I've encountered an issue. After completing the "Development Configuration" section and attempting the "try it out" by copying the app code at the bottom of the page and running npm start, all I see is "loading" with a console error stating "Cannot read property 'call' of undefined" in polyfills.js.

I have double-checked all the files for typos by copy/pasting everything directly and adjusted the zone requires in polyfills.ts as advised in the tutorial. However, the issue persists. I would greatly appreciate any suggestions to resolve the problem or if someone else could try getting the app running at this stage (I skipped production and testing assuming the app should run smoothly by now).

You can view my progress on the site at https://github.com/Liam-Ryan/Angular2WebpackSite

angulartypescriptwebpack

Answer №1

My problem with Angular was resolved after seeking help on the angular gitter chat. Initially, it was believed that the issue stemmed from Webstorms typescript compiler generating unnecessary .js and maps files that were causing conflicts with webpack-dev-server. Even after removing the maps, the problem persisted. However, shortly after RC7 was released, an update to the package.json file of the documentation included these updated packages which ultimately resolved the issue.

Upon updating the package.json file, the error disappeared completely. I have made the revised code available at the github link provided above so that others facing a similar issue can easily access and use it. Simply clone or download the version in the repository to resolve any related issues.

Answer №2

When working in index.html, it is important to include the files in a specific order as shown below:

 <script type="text/javascript" src="inline.3ad0b6817eee19f5cfa7.bundle.js"></script>
 <script type="text/javascript" src="vendor.e20d1d1e0582bef2c46a.bundle.js"></script>
 <script type="text/javascript" src="main.65eaac6ecefe3725ca56.bundle.js"></script>

If the order is changed, it can lead to errors. I faced the same issue when I swapped the vendor and main bundle.js files. Hopefully this information will be helpful for you.

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

Can anyone suggest a more efficient method for validating checkbox selection in Angular?

I am working with an angular material stepper, where I need to validate user selections at each step before allowing them to proceed. The first step displays a list of 'deliveries' for the user to choose from, and I want to ensure that at least o ...

angulartypescriptangular-material

The clash between the definitions of identifiers in this file and another (@types/jasmine) is causing error TS6200

While trying to build my project with Angular CLI, I am encountering the following error message: ERROR in ../my-app/node_modules/@types/jasmine/index.d.ts(18,1): error TS6200: Definitions of the following identifiers conflict with those in another file: ...

angulartypescriptjasmine

Guide to routing within the same component in Angular?

In the scenario where I have multiple lists of users with IDs such as (1, 2, 3, 4, 5...), the desired functionality is that upon clicking a button, the details for each respective user should be displayed. For example, clicking on the first user's det ...

angular

What is the best way to invoke a TypeScript function within a jQuery function?

Is it possible to invoke a TypeScript function within a jQuery function? If so, what is the correct approach? Here is an example of my component.ts file: getCalendar(){ calendarOptions:Object = { height: 'parent', fixedWeekCount : ...

javascriptjqueryangulartypescript

What is the process for changing the src property to a URL that is outside of the project

Currently, I am developing a project using Ionic. My goal is to include a variable that holds the URL of an image in an image tag. <div *ngFor="let item of imagearr"> <img [src]="item.image.URL"> Unfortunately, when I attempted this method, i ...

angularionic-framework

What is the best way to import a data type from another file into a `.d.ts` file without converting it into a module?

Recently encountered a peculiar scenario involving d.ts files and namespaces. I have some d.ts files where I define and merge a namespace called PROJECT. Take a look at how it's declared and automatically merged (across multiple files) below: file1 ...

typescriptimportnamespacestypescript-typings

agm-polygon fails to refresh with new points added

I've recently switched from using Google maps to AgmMaps and wanted to create a simple demo for drawing polygons on the map. Here's what I added to my project: You can find the stackblitz link with the code here <agm-polygon [strokeColor]="& ...

angulargoogle-mapsagm

Having trouble retrieving a value from the img.onload event handler. A 'boolean' type error is being thrown, indicating it cannot be assigned to type '(this: GlobalEventHandlers, ev: Event) => any'

In my Angular application, I have implemented a method that verifies the size and dimensions of an image file and returns either false or true based on the validation result. Below is the code snippet for this function: checkFileValidity(file: any, multipl ...

angulartypescript

Step-by-step guide on crafting a harmonious row of a label and a responsive button group

One of my projects involves a form that contains a list of elements. I want this form to be responsive and suitable for all screen sizes. When I initially run the project on a larger screen, everything looks good. However, when I resize the screen to a sma ...

htmlangulartypescript

When HTMLElement focus is activated, it interrupts the flow of execution

(the code presented is in TypeScript and I'm working with Angular 5, but I don't think that's the issue, so prove me wrong!) I have a basic input field that triggers events in an Angular component. (EDIT: I've added the complete compo ...

angulartypescriptevent-handling

Error message: When trying to refresh a Next.js page, a ReferenceError occurs because the document

Currently, I am in the process of developing a straightforward UI library using React for Next.js 9.4. Here is a snippet of what I have implemented: // input.js in React UI Lib import React from "react"; import styled from "./input.module.scss"; const I ...

reactjswebpacknext.jsserver-side-rendering

Choosing specific information in Typescript response

I am encountering an issue with my HTML where it displays undefined(undefined). I have checked the data in the debugger and I suspect that there may be an error in how I am using the select data. Here is a snippet of the code: <div *ngIf="publishIt ...

javascriptangularasp.net-mvctypescript

Django is unable to establish sessionid Cookies due to Webpack's restrictions

After setting up my React application with Webpack and Django for Backend, I encountered an issue with session authorization. Whenever I attempt to make a request, I receive a 200 OK status Response, but the session-id is visible in the Set-Cookie header, ...

reactjsdjangoajaxwebpacksession-cookies

Determine the data type of an individual attribute within a collection of classes

I am working with a series of classes that have a body property defined within them. Here is an example: class Foo { body: {foo: string} constructor(body: Record<string, string>) { this.body = { foo: body.foo } } } class Bar { body: {ba ...

typescript

Is today within the current week? Utilizing Moment JS for time tracking

There is a problem that I am facing. Can you assist me in determining whether the day falls within the current week? I am currently developing a weather forecast service and need to validate if a given day is within the current week. The only clue I have ...

javascripttypescriptmomentjsis-same

What is the best approach for loading an image from a node_module in a Next.js project?

After integrating a new module into my project that includes an <img /> tag, I encountered an issue with Next.js not rendering the image correctly. The current display of the image in the module looks like this: <img src="[Object Object]" ...

reactjswebpacknext.jsnext.js13nextjs-image

Angular8 Chart.js customizes the Y axis tick labels

Is there a way to dynamically adjust the Y-axis ticks in a chart.js graph? I attempted to modify them using the following commands: this.chartOptions.scales.yAxes[0].ticks.min = 10; this.chartOptions.scales.yAxes[0].ticks.max = 18; ...

javascriptangularchart.js

The potential issue of undefined objects in TypeScript when utilizing computed properties in Vue3

I've attempted adding a ? after each word and also experimented with the following code: const totalNameLenght = computed(() => { if (userFirstnameLenght.value && userLastnameLenght.value){ return userFirstnameLenght.value + u ...

javascripttypescriptvue.jsvuejs3

Effortlessly collapsing cards using Angular 2 and Bootstrap

Recently delving into Angular 2 and Bootstrap 4, I set up an about page using the card class from Bootstrap. Clicking on a card causes it to expand, and clicking again collapses it. Now, I want to enhance this by ensuring that only one card is open at a ti ...

angulartypescriptbootstrap-4

Dealing with Angular 6 HTTP Interceptor and the frustrating net:: ERR_TIMED_OUT error

I have been puzzling over something recently that has left me scratching my head. Within my interceptor, there is code that deals with parsing and handling errors in specific ways based on factors such as status codes. While I haven't included this c ...

angularhttpxmlhttprequesttimeoutinterceptor