Error message "Angular build with --prod causes Uncaught TypeError: e is not a constructor when running ng serve"

I am encountering an issue while deploying my Angular application to production. The application functions correctly in development and had previously worked on production as well.

To build the application, I am using:

ng build --prod --base-href="/site/"

The application is successfully built, but with the following warnings:

WARNING in ./src/app/eco-header/eco-header.component.ngfactory.js 138:299-319 "export 'MAT_ICON_LOCATION' (imported as 'i9') was not found in '@angular/material/icon'

WARNING in ./node_modules/@angular/material/dialog/typings/index.ngfactory.js 20:1247-1265 "export 'ScrollingModule' (imported as 'i7') was not found in '@angular/cdk/scrolling'

WARNING in ./node_modules/@angular/material/dialog/typings/index.ngfactory.js 20:1267-1285 "export 'ScrollingModule' (imported as 'i7') was not found in '@angular/cdk/scrolling'

WARNING in ./node_modules/@angular/material/icon/typings/index.ngfactory.js 20:327-347 "export 'MAT_ICON_LOCATION' (imported as 'i1') was not found in '@angular/material/icon'

Upon attempting to load the page, I encounter the following error:

Uncaught TypeError: e is not a constructor
    at main.1ebe20842d3713f62535.js:1
    at Wl (main.1ebe20842d3713f62535.js:1)
    at main.1ebe20842d3713f62535.js:1
    at new t (main.1ebe20842d3713f62535.js:1)
    at Object.dr [as createNgModuleRef] (main.1ebe20842d3713f62535.js:1)
    at e.create (main.1ebe20842d3713f62535.js:1)
    at main.1ebe20842d3713f62535.js:1
    at e.invoke (polyfills.c72d3210425a88b28b6d.js:1)
    at Object.onInvoke (main.1ebe20842d3713f62535.js:1)
    at e.invoke (polyfills.c72d3210425a88b28b6d.js:1)

My tsconfig:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true,
        "sourceMap": true
    }
}

My package.json:

{   "name": "idea-ecomanager-frontend",   "version": "0.0.0",   "scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"   },   "private": true,   "dependencies": {
"@angular/animations": "^7.0.1",
"@angular/cdk": "^7.0.2",
"@angular/common": "^7.0.1",
"@angular/compiler": "^7.0.1",
"@angular/core": "^7.0.1",
"@angular/forms": "^7.0.1",
"@angular/http": "^7.0.1",
"@angular/material": "^7.0.2",
"@angular/platform-browser": "^7.0.1",
"@angular/platform-browser-dynamic": "^7.0.1",
"@angular/router": "^7.0.1",
"angularcli": "^6.0.1",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"ngx-loading": "^3.0.1",
"ngx-toastr": "^9.1.1",
"rxjs": "^6.3.3",
"zone.js": "^0.8.26"   },   "devDependencies": {
"@angular-devkit/build-angular": "~0.6.0",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "^7.0.1",
"@angular/language-service": "^7.0.1",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~3.1.3"   } }

Any insights into why this issue is occurring?

angulartypescriptangular-cli

Answer №1

After experimenting for a while, I finally uncovered a lingering issue within the angular cli.

View the bug report here

When running ng build --prod --base-href="/site/" --aot=false --build-optimizer=false

Temporarily, using 

--aot=false --build-optimizer=false
seems to resolve the issue.

I will continue to update this post with any official information or solutions provided by the Angular team.

Answer №2

Recently, we encountered a similar problem that required us to remove all node modules and install them one by one. We found that after installing each node module, running 'ng build --prod' helped resolve the issue. This was particularly helpful in a project where we faced errors with the ngx password toggle node module.

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

Exploring Angular 4: Embracing the Power of Observables

I am currently working on a project that involves loading and selecting clients (not users, but more like customers). However, I have encountered an issue where I am unable to subscribe to the Observables being loaded in my component. Despite trying vario ...

javascriptangulartypescript

When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon

Despite adding an apple-touch-icon link to my index.html with a 150x150 PNG image, when I try to add my Angular web app as a shortcut to my iOS home screen from Safari, it only appears as a screenshot of the app page. Below is my HTML code: <!doctype ...

htmlcssiosangular

Troubleshooting: Prettier Extension Compatibility Issue in VS Code with Create-React-App and Typescript Template

I'm currently in the process of setting up my application using the Create-React-App startup package with the TypeScript template. Everything goes smoothly during the initial installation. However, when I attempt to use the Prettier Code Formatter ext ...

typescriptvisual-studio-codecreate-react-appprettier

The Angular material checkbox has a mind of its own, deciding to uncheck

I am having an issue with a list displayed as checkboxes using angular-material (Angular 7). Below, I will provide the code snippets for both the .html and .ts files. Every time I click on a checkbox, it gets checked but then immediately becomes unchecked ...

htmlangulartypescriptangular-material

Reusing methods in Javascript to create child instances without causing circular dependencies

abstract class Fruit { private children: Fruit[] = []; addChild(child: Fruit) { this.children.push(child); } } // Separate files for each subclass // apple.ts class Apple extends Fruit { } // banana.ts class Banana extends Fruit { } ...

javascriptnode.jstypescript

Utilizing a d.ts Typescript Definition file for enhanced javascript intellisene within projects not using Typescript

I am currently working on a TypeScript project where I have set "declaration": true in tsconfig.json to generate a d.ts file. The generated d.ts file looks like this: /// <reference types="jquery" /> declare class KatApp implements IKatApp ...

javascripttypescriptintellisensevisual-studio-2022javascript-intellisense

TypeScript test framework for testing API calls in VS Code extensions

My VS Code extension in TypeScript uses the Axios library for API calls. I have written tests using the Mocha framework, which are run locally and through Github Actions. Recently, I integrated code coverage reporting with `c8` and I am looking to enhanc ...

typescriptvisual-studio-codemocha.jsvscode-extensions

The appearance of the Angular app undergoes a change following deployment using ng build

I have been working with Angular for several years now, but only recently delved into using Angular Material components in my latest project. I was pleased with how my layout turned out and ready to push it to production. However, after deployment, the com ...

angulardeploymentbuildangular-material

What is the alternative method for applying a CSS class in the click event in Angular 7 without relying on ng-Class or ng-Style?

Is there a way to dynamically add or remove CSS classes to HTML elements in Angular7 without relying on Ng-Style and Ng-Class directives? I'd like to achieve this functionality when clicking on the elements. Appreciate any insights you can provide. T ...

typescriptangular7

Error message in Angular states that it is not possible to bind to 'formGroup' because it is not recognized as a property of 'form' within Angular

When trying to extract data from a form using formcontrol, everything seems to be working fine except for the [formcontrol] = "userForm" in the HTML. If I remove this part, the project runs smoothly. I have tried multiple tutorials but none of them seem ...

angulartypescriptangular-forms

Error: Unable to connect to 'ngbTypeahead' as it is not recognized as a valid attribute of 'input' in the template

Having trouble with ngbTypeahead. The console is displaying the following error message: Error: Template parse errors: Can't bind to 'ngbTypeahead' since it isn't a known property of 'input'. (" <inpu ...

angular

Typescript challenge: Implementing a route render attribute in React with TypeScript

My component has props named project which are passed through a Link to a Route. Here's how it looks (the project object goes in the state extended property): <Link to={{ pathname: path, state: { project, }, }} key={project. ...

typescriptreact-routerreact-router-dom

Unit test: Using subjects instead of observables to mock a service and test the change of values over time results in TypeScript throwing error TS2339

I have a unique scenario where I have implemented a service that accesses ngrx selectors and a component that utilizes this service by injecting it and adjusting properties based on the values retrieved. For unit testing purposes, I am creating mock versi ...

angulartypescriptunit-testingobservablebehaviorsubject

How to implement a distinct click event for input elements containing a pipe character in Angular

I have developed an innovative Elevator application that features a unique elevator component displaying the current floor value in a box. You can see how it looks here: https://i.stack.imgur.com/h3JW5.png In order to replace the numerical floor values w ...

angular

Using Vue in conjunction with TypeScript and CSS modules

I am facing an issue with my SFC (single file vue component) that utilizes TypeScript, render functions, and CSS modules. <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ props: { mode: { type: String, ...

typescriptvue.jscss-modules

What is the alternative method for establishing a child formGroup within a parent formGroup without using the initializer function?

Can anyone help me with dynamically setting a property in my formGroup to another formGroup, essentially creating a child formGroup? // Example 1 var parent = this._formBuilder.group({ id: [''], child: this._formBuilder.group({ na ...

angularformgroups

Best Practices for Variable Initialization in Stencil.js

Having just started working with Stencil, I find myself curious about the best practice for initializing variables. In my assessment, there seem to be three potential approaches: 1) @State() private page: Boolean = true; 2) constructor() { this.p ...

javascripttypescriptstenciljs

The error message "No provider found for MatSidenavContainer within mat-sidenav-content" is being

app.component.html <mat-side-nav-container> <mat-sidenav #sidenav> <mat-nav-list> <a mat-list-item [routerLink]="'/accounts'"> Accounts </a> <a mat-list-item [routerLink]="&ap ...

angularangular-material

Can a constant be utilized as the property name within routerLink when specifying queryParams?

I am currently trying to update the current page by modifying or adding the query parameter "categoryId". When I attempt: <a [routerLink]="" [queryParams]="{ categoryId: category!.id }" queryParamsHandling="mer ...

angulartypescriptquery-stringangular-routerlinkangular12

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Currently, I am attempting to dynamically alter the src of an iframe using Angular 2. Here is what I have tried: HTML <iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe> COMPONE ...

javascriptangulartypescriptiframe