When attempting to deploy an Angular 7 project for production, encountering the error message "Super expression must either be null or a

I am currently working on an older angular application that has been integrated with Okta authentication.

The application is built using Angular 7.2 and Okta versions:

   "@okta/okta-angular": "^5.1.0",
    "@okta/okta-auth-js": "^5.9.0",
    "@okta/okta-signin-widget": "^5.16.1",
    "@oktadev/schematics": "^5.2.0",

The app is set to use "target": "es2015". Compiling the app without the prod flag works fine, but enabling --prod=true flag leads to a crash with the error message:

Uncaught TypeError: Super expression must either be null or a function.

Toggling off optimizations in the angular.json file resolves the issue:

"optimization": false,

However, this results in a significant increase in the application size from 2mb to 9mb. Are there any alternative solutions to enable optimizations without facing this error?

angulartypescriptokta

Answer №1

After much trial and error, it became clear that the key was upgrading to angular 8.

To tackle this issue, I executed the following commands:
npm config set legacy-peer-deps true
cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@8 update @angular/cli@8 @angular/core@8"

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

Step-by-step guide to accessing a PDF file stored locally using Angular2 and HTML5

I am attempting to access a .pdf file in local storage using an iFrame. Here is the code I have tried: In HTML file <object [data]="sanitizer.bypassSecurityTrustResourceUrl(selectedItem.FilePath)" type="application/pdf"> <iframe [src]="sanitizer ...

javascripthtmlangulartypescriptiframe

The attribute 'map' is not found on the object of type 'List'

I am currently working on a project that involves lists, each with its own title. However, while using Map, I encountered the following error: Property 'map' does not exist on type 'List' Any suggestions on how to resolve this issue? ...

reactjstypescriptmaterial-ui

Issue with Angular Forms: Inability to type in field after using patchValue

I have a question regarding a form that I am toggling from a data-table. The issue is that when I use patchValue to pre-fill the form, it seems like I cannot edit the content of the field. Strangely enough, fields that are not filled with patchValue can be ...

angularangular2-formbuilder

What is the best way to display a loading screen while simultaneously making calls to multiple APIs?

I'm currently working with Angular 8 to develop an application that retrieves responses from various APIs for users. The application is designed to simultaneously call multiple APIs and I require a loading indicator that stops once each API delivers a ...

cssangulartypescripthttp

What is the best way to integrate Angular material into a Bazel-enabled project for a custom library development?

Is there a way to incorporate Angular material into a project enabled with Bazel in a custom library? Check out the code I am using: https://github.com/AkshayC1736/angular-bazel.git ...

angularangular-materialbazel

Learn how to send or submit data using the Form.io form builder

I am currently working on a dynamic drag and drop form builder, and I'm struggling to figure out how to log the data from the form. Below is the component.html file where I am implementing the drag and drop form: <div> <form-builder ...

javascriptangularforms

Encountering difficulties with Bootstrap toggle functionality in Angular 2.0 following the establishment of a MEAN stack

While setting up a MEAN stack app following a tutorial, everything was going smoothly until I decided to test some Bootstrap components from their site. After installing Bootstrap in the index.html file for Angular, I noticed that Bootstrap was being loade ...

node.jsangularexpresstwitter-bootstrap-3

Angular: Unable to access values of non-existent data (reading '0')

I'm encountering an error when trying to import an excel file using the following code Angular Ag Grid Excel Import Cannot read properties of undefined (reading '0') I'm attempting to import a file named Book.csv, and wondering if thi ...

javascriptangulartypescript

Dealing with Angular Unit Tests can be a hassle: they don't uncover issues until it's too late in the build or compile

It seems like every time I write tests for Angular, they fail at runtime instead of build time. Issues like 'No Provider found', 'Null', and 'etc NULL' keep popping up, and I end up constantly searching on Google for solutions ...

angulartypescriptkarma-jasmineangular10

Encountering a problem while attempting to update react-router from version 5 to version 6

I am encountering a typescript error after upgrading React-router-dom from v5 to v6. How can I resolve this issue? Below is the code snippet. Thank you in advance. export function withRouter(ui: React.ReactElement) { const history = useNavigate(); con ...

javascriptreactjstypescriptreact-router-dom

Creating an HTML template in an Angular service and utilizing it as an HTMLTemplateRef

I'm currently working on a major project that has a specific requirement. As part of this project, I am utilizing a library which allows me to open dialog (modal) popups. In order to do so, I need to configure some options for the modal opening proce ...

htmlangulartemplatesservice

Determining the appropriate version of the types package for your needs

It has come to my attention that certain npm packages do not come with types included. Because of this, the community often creates @types/packagename to provide those types. Given that both are packages, how does one determine which version of the types ...

javascripttypescriptnpm

It seems that an error has occurred: DOMException was thrown because the attempt to run 'importScripts' on 'WorkerGlobalScope' has failed. The script located at 'http://localhost:4200/BlinkCardWasmSDK.js' was unable to load properly

Recently, I attempted to integrate this credit card reader into my Angular application. Despite carefully following all the installation steps and obtaining a valid license key, I encountered the following error: Error during the initialization of the SDK! ...

angulartypescriptnpmangular11domexception

What is the best way to remove all attributes from one interface when comparing to another?

Consider the following two interfaces: interface A { a: number; b: string; } interface B { b: string; } I am interested in creating a new type that includes all the keys from interface A, but excludes any keys that are also present in interface B. ...

javascripttypescript

"Looking to access a model from a TypeScript file in Angular - here's how to

When my page loads, I am attempting to open a modal model. However, despite my efforts, the model does not open. I need to be able to trigger the click() event on the Launch demo modal button from ngInit() HTML <ng-template #content let-c="close&q ...

angulartypescriptangular-bootstrapngoninit

angular2 Formatting Dates in Material 2 Datepicker

I'm currently utilizing the Angular Material datepicker in my angular4 project. I am looking for a way to format the selected date in the input box with a shorter format such as "May 29, 2017" instead of the current display which is "29/05/2017". Can ...

angularangular-material

Compulsory selection and input fields in Angular forms

I need the select and input fields of the form to be required. I attempted to follow the angular website tutorial, but it didn't work for me or I might have made a mistake. How can I resolve this issue? Below is my HTML file: <form [formGroup]="a ...

angulartypescriptangular-cli

Design a model class containing two arrow functions stored in variables with a default value

I am looking to create a model class with two variables (label and key) that store functions. Each function should take data as an input object. If no specific functions are specified, default functions should be used. The default label function will retur ...

javascripttypescript

SystemJS is responsible for loading a multitude of files related to rxjs

After finding an example on the internet, I have created my own systemjs.config.js: (function (global) { System.config({ paths: { // paths serve as alias 'js:': 'js/', }, // map tells ...

angulartypescriptrxjssystemjsrxjs5

What is the procedure for cancelling a file upload in the FileUpload component of PrimeNG?

1. Issue Overview Looking to terminate file upload in PrimeNG's FileUpload component when certain filename patterns are detected. Using Angular 6.0.7 and PrimeNG 6.0.2. 2. Initial Strategy 2.1. HTML Code <p-fileUpload #fileUploader name="file" ...

angulartypescriptfile-uploaduploadprimeng