Unable to resolve parameters for ApplicationModule: (?) in Angular 7 Just-in-Time compilation

I am currently experiencing an issue that seems to occur randomly, despite everything working perfectly in my setup.

I have several Angular applications compiled with webpack. They all work fine in AOT mode but crash in JIT mode. This is because the compiler is unable to understand annotations.

compiler.js:2700 Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
    at syntaxError (compiler.js:2700)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:19254)

I am using "core-js": "^2.6.5" (I have also tried with version 3.0.1)

In my polyfill.ts, I have included reflections as follows:

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

My webpack configuration includes the following rules:

[
    {
        loader: 'babel-loader',
        options: babelOptions
    },
    {
        loader: 'ts-loader',
        options: {
            transpileOnly: true
        }
    },
    {
        loader: 'angular2-template-loader'
    }
]

And here is how my Babel configuration looks:

presets: [
    [
        '@babel/preset-env',
        {
            modules: false,
            loose: true,
            targets: {
                browsers: [
                    "last 2 versions",
                    "not ie <= 10"
                ]
            },
            useBuiltIns: 'usage',
            corejs: "2",
            debug: false
        }
    ]
]

What I have tried so far:

  • Upgrading and downgrading core-js.
  • Upgrading and downgrading Angular 7.

You can check out a minimal demonstration of the issue on this Github repository

javascriptangulartypescriptwebpacksingle-page-application

Answer №1

After transitioning my Angular Application from version 5 to version 9, I encountered an issue where simply adding import 'core-js/es7/reflect'; at the top of boot.ts or polyfill.ts did not resolve the problem.

However, by loading reflect-metadata as the very first line of code, all the issues were resolved.

import 'reflect-metadata';
import 'core-js/es7/reflect';

Answer №2

It is recommended to only utilize the following import statement:

import 'core-js/es7/reflect';

This choice has been supported due to documented issues on GitHub, which can be found here and here

You can view the functional repository at this link

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

Ways to retrieve element(s) and delete a specific class located in the DOM structure

This is my first time using stackoverflow and posting a question here! :] Can someone guide me on the best way to write JQuery code for this particular task? Task: My goal is to remove the 'active' CLASS from a nav element when it is active: ...

javascriptjqueryhtmlcssdom

Is there a way for me to retrieve the callback parameters?

Can the parameters of the callback function be accessed within the 'outer' function? function f(callback: (par1: string)=>void): void { // Is it possible to access 'par1' here? } ...

typescript

CSS - Activating hover effects through keyframes

I'm looking to create an image effect that pulsates like a heartbeat. The idea is for the image to pulse for 3 seconds, then automatically flip for 1 second before resuming the pulsating effect indefinitely. I've managed to make the image pulse, ...

javascripthtmlcss

It is not possible for the root segment to contain matrix parameters in Ionic 4

Has anyone figured out how to resolve this issue? .ts this.router.navigate(["", { clientId: data.id }]) Error message { path: "", component: HomePage, }, An unhandled error occurred: Root segme ...

angulartypescriptionic-frameworkionic4

What is the best method for incorporating jQuery code into a separate file within a WordPress theme?

I'm fairly new to working with Javascript/jQuery, so please be patient with me. Currently, I'm in the process of creating a custom WordPress theme where I've been using jQuery to modify the main navigation menu generated in my header file ( ...

javascriptjquerywordpress

JavaScript facing issues with relative file paths

In an effort to optimize page loading speed, I am using in-line CSS for above the fold code. This method is effective for pages within the root directory, but I encounter challenges when it comes to loading the rest of the CSS file at the end of pages loca ...

javascriptphpcritical-css

What could be causing the table to display empty when we are passing data to the usetable function?

Visit Codesandbox to view Table While the header appears correctly, I noticed something strange. When I console log the data props, it shows all the necessary data. However, when I try to console.log row, there doesn't seem to be any single object re ...

reactjstypescriptreact-table

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4

Enabling cross-origin requests using Express JS and the power of HTML5's fetch()

How do I enable cross domain requests using ExpressJS server and Javascript's fetch? It seems like there might be an issue with the client-side fetch() function because the response headers include Access-Control-Allow-Origin: *. I attempted to resol ...

javascriptexpress

Implement a transition effect for the onClick event of a div element

I am looking to create a smoother transition effect when clicking on the section, causing it to expand and display the text underneath. I want to make this transition slower and more seamless. My current attempt at adding a transition to the "active" clas ...

javascripthtmlbootstrap-4css-transitions

What could be causing errors in converting Vue.js code into a single HTML file?

I discovered a Vue.js sample project on this website and now I want to execute this code in a single HTML file using Vue.js. I attempted: <!DOCTYPE html> <html> <head> <title>My first Vue app</tite> <script type="te ...

javascriptvue.jsvuejs2

Retrieving User's Theme Preference from Local Storage in Next.js Instantly

As mentioned in various other responses, such as this one, Next.js operates on both the client and server side, requiring a guard to properly fetch from localStorage: if (typeof localStorage !== "undefined") { return localStorage.getItem("theme") } else ...

reactjstypescriptnext.jslocal-storage

What is the best way to handle promises within the context of updating state in React

Recently, I've been working on a React code snippet focused on creating a text input field. onChangeDestination(url, index) { this.setState(prevState => { const rules = [...prevState.rules]; rules[index] = { ...rules[index], url}; ...

javascriptreactjs

Using a proxy with Selenium is a simple process

While looking through the documentation, I came across a code snippet for using a proxy when building a driver: var driver = new webdriver.Builder() .withCapabilities(webdriver.Capabilities.chrome()) .setProxy(proxy.manual({http: 'host:1234&a ...

javascriptselenium

Having trouble changing the title of a highchart using @input?

In my StreamsComponent, I set up my Highcharts like this: export class StreamsComponent implements OnInit { @Input() platform: string = ""; @Input() title: string = ""; series: any[] = []; Highcharts: typeof Highcharts = Highc ...

angularhighcharts

Ensuring validation for a single checked checkbox in AngularJS

I'm currently experiencing a challenge with checkboxes in my Angular project. Due to the requirements of the backend, each checkbox must have a unique name, but at least one of them needs to be checked before the form can be submitted. To address thi ...

javascriptangularjsvalidation

Deciphering the outcome of the splice method in CoffeeScript

Recently, I have been utilizing CoffeeScript in conjunction with the JS splice function. From my understanding, the JS splice function should return the objects that were spliced out and modify the original array. While this concept works smoothly with sim ...

javascriptcoffeescriptsplicearray-splice

Save the newly added items on the server using socket.io

// Creating a function to convert element to string function elemToString(elem){ return elem.outerHTML } // Create a new child div element with text content and class name let child = document.createElement("div") child.textContent = "bar" child.class ...

javascriptnode.jssocket.io

What is preventing $scope.$watch from functioning in AngularJS?

I'm struggling to get a $watch function to monitor changes in $scope.data. Here's the code I've been working with: [http://jsbin.com/biqesojaqu/1/edit?html,js,console,output][1] app.html <!DOCTYPE html> <html> <head> < ...

javascriptangularjsangularjs-scopeangularjs-watch

A guide to eliminating TextRow and inserting a string into JSON using NodeJs

To remove TextRow and add the string true to JSON in NodeJs, I have included the following code: NodeJs Code: function groupBy(objectArray, property) { return objectArray.reduce(function (acc, obj) { let key = obj[property] if (!acc[key]) { ...

javascriptnode.jsarraysjson