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

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

When working with TypeScript, it is important to note that an object literal can be assigned to a class typed variable as long as the object provides all properties and methods required by the class. class MyClass { a: number; b: string; } // The co ...

typescript

Calling an API twice in Angular Universal SSR - once from the frontend and the other from the backend

I am currently working on implementing SSR using Angular Universal, but I am encountering two issues: I am noticing two hits on my server in the server logs, one from the frontend and the other from the backend. When the universal server calls the AP ...

angularangular-universalangular-ssr

Discovering the power of angular async binding in your projects can greatly

Is there a way to achieve something similar to <span *ngIf="admins.includes(name) | async"> where the admins is declared as Observable<string[]> in the component class? I understand that this code may not work, but is there a workaround to make ...

angularrxjs5

The placeholder string is being accepted as the input value for the number

My issue is with a form input of type number. When the form is submitted without entering any number, it treats the placeholder text "rating" as the value. How can I stop this from happening? I need to make sure that the input number field is marked as in ...

htmlformsangularangular-forms

The correct assertion of types is not carried out during the initialization of generics through a constructor

I am encountering a minor issue with TypeScript, and I am uncertain whether it is due to a typo on my part or if TypeScript is unable to correctly infer the types. Let me provide all the necessary code to replicate the problem: interface IRawFoo { type: s ...

javascripttypescripttypescript-generics

In React Native, you can pass native component properties as props, while also defining custom ones using a TypeScript interface

I am working on a component called AppText where I need to utilize a Props interface and also be able to accept additional props that can be spread using the spread operator. However, I encountered this error: Type '{ children: string; accessible: tru ...

javascriptreactjstypescriptreact-native

Utilize Function type while preserving generics

Is there a way in Typescript to reference a function type with generics without instantiating them, but rather passing them to be instantiated when the function is called? For instance, consider the following type: type FetchPageData<T> = (client : ...

typescript

Adding ngrx action class to reducer registration

Looking to transition my ngrx actions from createAction to a class-based approach, but encountering an error in the declaration of the action within the associated reducer: export enum ActionTypes { LOAD_PRODUCTS_FROM_API = '[Products] Load Products ...

javascriptangulartypescriptngrxngrx-store

Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyo ...

htmlcssangularbootstrap-4border

The PrimeNG pie chart will sporadically appear and adjust its display when the resolution changes

I recently encountered an issue with a primeng pie chart that I am using, which pulls dynamic data from the back-end. Previously, when using static data, the pie chart functioned perfectly. However, after integrating dynamic data, the chart now seems to di ...

angularchartschart.jsprimeng

Error encountered while parsing an Ionic template involving Ionic select, npm, and different versions of Ionic

I keep encountering the error message: ion-select-option' is not a known element. Here's what works: <ion-item> <ion-label>Gender</ion-label> <ion-select placeholder="Select One"> <ion-option value="f" ...

angularionic-frameworknpmionic3

rxjs in Angular2 is missing the observable.interval function

Currently, I am attempting to utilize the interval method of an observable; however, I consistently encounter the following error message: Property 'interval' does not exist on type 'Observable<any>'. I have included the follow ...

typescriptangularrxjs

typescript set parameter conditionally within a function

For my upcoming app, I am working on an API that will utilize Firebase FCM Admin to send messages. Below is the code snippet: import type { NextApiRequest, NextApiResponse } from "next"; import { getMessaging } from "firebase-admin/messaging ...

typescriptnext.jsfirebase-cloud-messagingfirebase-admin

What sets apart 'export type' from 'export declare type' in TypeScript?

When using TypeScript, I had the impression that 'declare' indicates to the compiler that the item is defined elsewhere. How do these two seemingly similar "types" actually differ? Could it be that if the item is not found elsewhere, it defaults ...

typescripttypesdeclare

Start a new typescript project from scratch

Seeking assistance in setting up a blank TypeScript project with a package.json, TypeScript and HTML file. I am looking for something akin to the Stackblitz blank-typescript project. If anyone could provide me with a step-by-step guide on how to create su ...

node.jshtmltypescriptnpm

ngmodelchange activates when a mat-option is chosen in Angular Material

When a user initiates a search, an HTTP service is called to retrieve and display the response in a dropdown. The code below works well with this process. However, clicking on any option in the dropdown triggers the 'ngmodelchange' method to call ...

javascripthtmlangularangular-materialangular6

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

Using the API "https://jsonplaceholder.typicode.com/photos", I have access to 5 properties: albumId: 1 id: 1 thumbnailUrl: "https://via.placeholder.com/150/92c952" title: "accusamus beatae ad facilis cum similique qui sunt" url: "https://via.placeh ...

htmlcssangulartypescript

What Are the Possible Use Cases for Template Engine in Angular 2?

For the development of a large single page application (SPA) with Angular 2.0, I have decided to utilize a template engine like JADE/PUG in order to enhance clarity and clean up the code. My goal is to achieve optimal performance for the application. Th ...

javascriptangularjsangularpugtemplate-engine

Ways to initiate an HTTP request within switchMap upon emission of a BehaviorSubject value

As I delve into writing angular applications in a declarative style, I find myself pondering on the most effective approach for handling POST requests. Specifically, I am facing a dilemma with regards to calling these requests when dealing with a login for ...

angularrxjsobservablereactive-programmingdeclarative

Can the dragging functionality be turned off for a specific sub-element of cdkDrag?

Currently, I am utilizing Angular CDK drag-drop features from Angular Material. I have been exploring the documentation available here. One issue that has arisen is the inability to select text within an input field of a draggable element using the mouse. ...

angularangular-materialangular-cdk