Encountering Typescript errors while compiling an Angular module with AOT enabled

I am currently in the process of manually constructing an Angular module with Webpack, opting not to use the CLI.
While a normal build is functioning without any issues, encountering errors during an AOT build!

Here's how my tsconfig.aot.json file looks:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es5",
      "es2015",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "skipMetadataEmit": true,
    "genDir": "aot"
  }
}

The compilation errors primarily involve Typescript:

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:829:20 TS2304: Cannot find name 'PromiseConstructor'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:1486:36 TS2339: Property 'for' does not exist on type 'SymbolConstructor'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:1490:43 TS2339: Property 'hasInstance' does not exist on type 'SymbolConstructor'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:2305:36 TS2339: Property 'for' does not exist on type 'SymbolConstructor'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:2309:43 TS2339: Property 'hasInstance' does not exist on type 'SymbolConstructor'.

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:2313:50 TS2339: Property 'isConcatSpreadable' does not exist on type 'SymbolConstructor'.

ERROR in [at-loader] ./node_modules/rxjs/internal/Observable.d.ts:82:59 TS2693: 'Promise' only refers to a type, but is being used as a value here.

angulartypescript

Answer №1

The rationale behind the successful execution of the standard build lies in the fact that you have enabled the transpileOnly: true option on awesome-typescript-loader, which turns off all type error notifications. When I removed this option and synchronized the lib settings in both tsconfig.json and tsconfig.aot.json, I encountered similar errors when running both npm run build and npm run build:prod.

Starting from the provided zip file, one approach that worked for me was updating @types/core-js to the most recent version available at the time (2.5.0), which closely aligns with your existing core-js version 2.5.7 compared to the previous version @types/core-js 0.9.*. Additionally, switching the target to es6 (and eliminating any overriding lib options) in both tsconfig.json and tsconfig.aot.json. After making these adjustments, both npm run build and npm run build:prod ran smoothly without any errors.

Answer №2

To resolve the issue, add "@types/core-js": "0.9.35" to your package.json file and execute npm install.

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

Is it ideal for ad-hoc values to reside within the component as class properties, or is there a better approach

Imagine a scenario where a recipe website features a recipe-list component that displays cards of individual recipes: <ul class="recipe-list"> <li *ngFor="let recipe of recipes" (click)="displayRecipe(recipe)"> ...

angular

Employing a general-purpose function in a recursive manner

My function that removes properties from an object and returns a new one works fine, but it runs into issues when dealing with nested arrays of objects. How can I tackle this challenge? interface User { id: number; name: string; items?: User[]; } co ...

typescript

What is the best way to work with the INITIAL_STATE injection token when it has dependencies

I have a dynamic module that loads lazily and uses ngrx/store with the feature StoreModule.forFeature('tasks', tasksReducer). To initialize this module, I need to set some initial values that are obtained through dependency injection from another ...

angulardependency-injectionngrx

default folder location for core modules adjustment

While experimenting with module imports in TypeScript, I encountered an issue when trying to import a module using import { Component, OnInit } from '@angular/core';. The compiler was successfully finding the module in the node_modules folder. I ...

angularjstypescripttsconfig

Is there a way to access a specific argument in yargs using typescript?

The idea behind using yargs is quite appealing. const argv = yargs.options({ env: { alias: 'e', choices: ['dev', 'prod'] as const, demandOption: true, description: 'app environment&apos ...

typescriptyargs

The element 'router-outlet' in Angular 9.0 is not recognized within a lazily loaded module

My attempt at adding a new lazyloaded module to the app component is running into an issue. When I try to include child routes for the new module, an error stating that 'router-outlet' is not a known element:in lazy loaded module is thrown. In t ...

angular

What is the best way to protect an Angular/Spring application using Keycloak?

I am seeking to enhance the security of my Spring Boot (backend) and Angular (frontend) application by implementing Keycloak for authentication. Currently, I have a simple deployment setup where the executable jar created by Spring serves both the backend ...

javaangularspringkeycloakopenid-connect

What is the process for retrieving information from Sanity?

Having trouble with creating a schema and fetching data from sanity. The console log is showing undefined. Not sure where I went wrong but suspect it's related to the schema creation. Testimonials.tsx interface Props { testimonial: [Testimonial] ...

reactjstypescriptnext.jssanity

Identifying unique properties with specific keys in a Typescript object

Can a specific type be used with one property when using the key in of type? Playground. type ManyProps = 'name' | 'age' | 'height' type MyObj = {[key in ManyProps]: number, name?: string} ...

typescript

Is there a way to convert const files without using TranslocoService for importing?

Introduction Greetings! I am currently working on an Angular+Ionic project and utilizing Transloco for text translation. The issue at hand I have a constants file with strings that need to be translated, but I am facing a challenge in figuring out how to ...

angulartransloco

Storing a value in a variable using ngFor in Angular 4

Here is the code snippet I am working with: <ng-container *ngFor="let item of items"> <div>{{item.subArray[0].attr1}}</div> <div>{{item.subArray[0].attr2}}</div> </ng-container> I am wondering if it's possible to ...

angularngfor

How to avoid property name conflicts when extending interfaces in Typescript

Is it possible to achieve something like this using TypeScript, such as renaming a property? interface Person { name: string age: number } interface Pet { age: string } interface Zoo extends Pet, Person {} How can we prevent this error from ...

typescriptinheritance

Troubleshooting ReactJs in Chrome during page load: encountering issues with undefined properties when utilizing the console

When debugging React on initial page load, I encounter a problem. Upon hovering over this, I can see the content, but using the console shows that this is undefined. Interestingly, this issue only arises when I refresh the page; clicking around does not tr ...

javascriptgoogle-chromereactjstypescript

What is the most effective method for delivering a Promise after an asynchronous request?

Currently, I am working on creating an asynchronous function in TypeScript that utilizes axios to make an HTTP request and then returns a Promise for the requested data. export async function loadSingleArweaveAbstraction(absId : string) : Promise<Abstra ...

typescriptasynchronouspromiseaxios

Angular's promise is incompatible with the type ts2322 and cannot be assigned

Struggling to implement a login feature in Angular, encountering an error related to promises: "Type 'Promise<ApiResponse<UserLogged> | undefined>' is not assignable to type 'Promise<ApiResponse<UserLogged>>&apos ...

angulartypescript

Is there a way to retrieve the name of a document stored within a collection using Firebase Firestore and Firebase Storage

When fetching data from the 'users' collection in Firebase Firestore and mapping the response, I have a function that converts the array of domains and filters out any domains that do not meet certain criteria. Here's an example: Sample dom ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire2

Utilizing ControlValueAccessor in various components

I am currently working on a component that implements the ControlValueAccessor interface, and I am facing some difficulties in understanding how to properly utilize it: // Angular Imports import { Component, OnInit, forwardRef, Output, EventEmitter, OnC ...

javascriptangulartypescriptangular2-formscontrolvalueaccessor

Invoke index functions within a component

I have a widget/component written in Angular 4 within the index.html file. Before and after this angular app, there are various HTML elements due to the nature of it being an additional component for the website. The head section of the index file include ...

javascriptangulartypescriptbootstrap-4bootstrap-select

The date displayed in the table is incorrectly showing 04 instead of 03 when using the pipe

{{element.createdAt | date: 'MM/dd/yyyy h:mm'}} why are the dates in the database all showing as 23 but some values are displaying as 24? Please confirm. The first two values created in the db show a createdAt time of 3, but the table is showing ...

angularangular-materialmaterial-ui

Expanding one type by utilizing it as an extension of another type

I am looking to create a custom object with predefined "base" properties, as well as additional properties. It is important for me to be able to export the type of this new object using the typeof keyword. I want to avoid having to define an interface for ...

typescripttypes