The AOT Compilation error occurs in Angular2 RC6 when trying to call the function RouterModule.forChild(ROUTES) which is not supported

Operating Environment: Windows 10, IntelliJ 2016.2, node

  • Angular Version: 2.0.0-rc.6

  • Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript ES6

  • Node (for Ahead of Time Compilation issues): node --version =
    Node 4.4.7, NPM 3.10.6

The AOT compiler is failing and giving an error related to a function call or lambda reference. The specific reference causing the issue is RouterModule.forChild(ROUTES). Interestingly, this previously worked without any problems. It seems essential for the app to function correctly.

// /**
//  * Angular 2 decorators and services
// */
// // import { BrowserModule } from '@angular/platform-browser'
//
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
//
import { ROUTES } from './detail.routes';

/*
 * Shared Utilities & Other Services
 */
import { Logging } from '../services/utility.service';

/**
 * Imported Components
 */
import { DetailComponent } from './detail.component';


@NgModule({
   declarations: [// Components / Directives/ Pipes
      DetailComponent],
   imports: [CommonModule, BrowserModule, FormsModule, RouterModule.forChild(ROUTES),]
})


export class DetailModule {

   constructor() {
      if (Logging.isEnabled.light) { console.log('%c Hello \"Detail\" component!', Logging.normal.lime); }
   }
}

The error message states:

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, when trying to resolve symbol DetailModule in C:/Source/POC/Microservice.Poc/src/app-components/+detail/index.ts
    at simplifyInContext (C:\Source\POC\Microservice.Poc\node_modules\@angular\compiler-cli\src\static_reflector.js:473:23)
    ...
Compilation failed

I'm puzzled as to why RouterModule.forChild(ROUTES) is causing compilation errors with AOT, when it works perfectly fine in another repository available at this link.

Answer №1

The issue was resolved by making a switch from using RC6 builds to the github builds:

Initially the package.json file looked like this:

  "@angular/compiler-cli": "github:angular/compiler-cli-builds",
  "@angular/common": "2.0.0-rc.6",
  "@angular/compiler": "2.0.0-rc.6",
  "@angular/core": "2.0.0-rc.6",
  "@angular/forms": "^2.0.0-rc.6",
  "@angular/http": "2.0.0-rc.6",
  "@angular/platform-browser": "2.0.0-rc.6",
  "@angular/platform-browser-dynamic": "2.0.0-rc.6",
  "@angular/platform-server": "2.0.0-rc.6",
  "@angular/router": "3.0.0-rc.2",

This configuration was updated to:

"@angular/common": "github:angular/common-builds",
  "@angular/compiler": "github:angular/compiler-builds",
  "@angular/compiler-cli": "github:angular/compiler-cli-builds",
  "@angular/core": "github:angular/core-builds",
  "@angular/forms": "github:angular/forms-builds",
  "@angular/http": "github:angular/http-builds",
  "@angular/platform-browser": "github:angular/platform-browser-builds",
  "@angular/platform-browser-dynamic": "github:angular/platform-browser-dynamic-builds",
  "@angular/platform-server": "github:angular/platform-server-builds",
  "@angular/router": "github:angular/router-builds",
  "@angular/tsc-wrapped": "github:angular/tsc-wrapped-builds",

After implementing this change, the code now compiles successfully.

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

Attempting to locate a method to update information post-editing or deletion in angular

Are there any methods similar to notifyDataSetChange() in Android Studio, or functions with similar capabilities? ...

Substitute the existing path with an alternative route

To move to a different route in Angular 2.0, we typically use route.navigate( [ 'routeName' ] ). However, this approach adds the current route to the browser's history. Is there a technique available to substitute the current route in the ...

Organizing Firebase functions: Managing multiple functions and dependencies

Objective I aim to gain a deeper understanding of how the firebase CLI manages the deployment process for multiple firebase functions, each stored in different files, and how it handles dependencies that are specific to certain functions. Situation If I ...

Error message "Could not locate module while constructing image in Docker."

I've encountered an issue while working on my nodeJS Typescript project. After successfully compiling the project locally, I attempted to create a docker image using commands like docker build or docker-compose up, but it failed with a 'Cannot fi ...

ng-module with tabbed content

I am facing a unique scenario where I have a UserProfileComponent with a tab structure and I want to add tabs from different modules. UserProfileComponent.html <ngb-tabset> <ngb-tab> <app-user-profile-history></app-user-prof ...

The AngularFireAuth.user observable does not trigger when combined with the withLatestFrom RxJS operator

When using the AngularFireAuth.user observable as the source observable, like in the example below: this.AngularFireAuth.user.subscribe((u) => console.log(u)) everything works fine. However, when I try to include it in the withLatestFrom operator, as s ...

Unable to view the refreshed DOM within the specifications after it has been altered

For my current project, I am working on writing a functional spec that involves using Mocha/JSDOM and making assertions with 'chai'. The specific use case I am tackling is related to the function called updateContent: When this function is exec ...

Using angular 1.X with webpack can be challenging and may cause compatibility issues

I am currently integrating webpack into my existing angularjs [1.4.7] application. I have a custom module that is being bundled using webpack and later added as a dependency in another module. While there are no errors during the bundling process, I encoun ...

Managing front-end with Angular2 and Spring Boot. What's the best approach?

I am using Spring Boot for my back-end and Angular2 for my front-end. I want to develop them separately and deploy them onto Heroku. I prefer that they have no common dependencies and should be in separate git repositories. From what I understand, there ...

Automatically generated bizarre URL parameters

Something strange is happening all of a sudden. I've noticed unusual URL parameters appearing on the site, and I'm not sure where they are coming from in my code. https://i.stack.imgur.com/g1xGG.png I am using Webpack 4 and Vue. This issue is ...

Creating a PDF file with Angular 7: A step-by-step guide

I need to create a PDF report using data provided by the user and save it in an object. I've encountered methods that involve creating an HTML page, taking a screenshot, and then converting it to PDF. However, I'm seeking a solution to generate a ...

Guide to utilizing the Angular Material 2 documentation without an internet connection

Is there a way to access the Angular Material 2 documentation offline? I would like to have it available without needing an internet connection. What alternatives or solutions are there for this? ...

Problem encountered in a simple Jest unit test - Unexpected identifier: _Object$defineProperty from babel-runtime

Struggling with a basic initial test in enzyme and Jest during unit testing. The "renders without crashing" test is failing, as depicted here: https://i.stack.imgur.com/5LvSG.png Tried various solutions like: "exclude": "/node_modules/" in tsconfig "t ...

New Requirement for Angular Service: Subclass Constructor Must Be Provided or Unable to Resolve all Parameters for ClassName (?)

During a recent project, I encountered an issue while working on several services that all extend a base Service class. The base class requires a constructor parameter of HttpClient. When setting up the subclass with autocomplete, I noticed that their con ...

Issue: (SystemJS) Unable to find solutions for all parameters in $WebSocket: ([object Object], [object Object], ?)

Upon running the code snippet below, an error is thrown: Error: (SystemJS) Can't resolve all parameters for $WebSocket: ([object Object], [object Object], ?). app.component.ts import { Component } from '@angular/core'; import {$WebSocket} ...

Issue with bootstrap modal new line character not functioning properly

Is there a correct way to insert a new line for content in a modal? I have this simple string: 'Please check the Apple and/or \nOrange Folder checkbox to start program.' I placed the '\n' newline character before "Orange," e ...

Creating an array of reusable components in Vue 3 with Typescript - How can I pass it into another component?

I have developed a customizable Button component that can be styled dynamically and accept values for text/icons, etc. Here is the code for my "ActionButton" in Vue 3. Although I am new to this framework, I am facing some difficulties understanding certai ...

Using TypeScript to Add Items to a Sorted Set in Redis

When attempting to insert a value into a sorted set in Redis using TypeScript with code like client.ZADD('test', 10, 'test'), an error is thrown Error: Argument of type '["test", 10, "test"]' is not assigna ...

Evolution of ReactJS state over time

When working with React, I wanted to increment a state variable called progressValue by 0.1 every 500 ms until it reaches 100. Here's what I initially tried: const [progressValue, setProgressValue] = React.useState<number>(0) const tick ...

Updating a label dynamically in Angular

QUESTION: Is there a way to dynamically change the text of a label based on a certain condition? Specifically, I want the label to be blank when I'm on a specific route in my App. CURRENT APPROACH: <RadSideDrawer allowEdgeSwipe=&quo ...