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

The option value in mat-autocomplete is not displaying correctly on IOS devices

When I click on the first option in the dropdown menu, it does not display the selected option in the field. However, when I select the second option, then the value of the first option appears, and when I choose the third option, the value of the second o ...

Displaying decimal values in Angular as percentages

In my Angular application, I have a numeric textbox that displays a percentage value and allows users to update it. https://i.stack.imgur.com/eCOKe.png <label for="fees">Fees %</label> <div class="inpu ...

Error: The variable <something> has not been defined

Within my GitHub project, an error stating Uncaught ReferenceError: breakpoints is not defined is appearing in the Chrome console. This issue should be resolved by including breakpoints.min.js, but it seems that webpack is somehow causing interference. I ...

Angular configuration files fail to be exchanged promptly

I am utilizing Angular 9 with the View Engine compiler. I have two separate files where I hold environment variables: environment.ts: export const environment: any = { production: false, }; environment.prod.ts: export const environment: any = { ...

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

I am struggling with this TypeScript code that contains comments and seems a bit messy: function getPlacesToStopExchange(): { our: { i: number; val: number; }[]; enemy: { i: number; val: number; }[]; //[party in 'our' | 'enemy' ]: ...

In Vue 3, the v-model feature is utilized as parameter passing instead of using :prop and @emit

I've been trying to implement two-way binding using v-model in Vue.js based on this article. The idea is to pass values from a parent component to a child component with automatic event emission when the value changes in the child component. However, ...

Guide to simulating a function using .then within a hook

I am using a function that is called from a hook within my component. Here is my component: ... const handleCompleteContent = (contentId: string) => { postCompleteContent(contentId, playerId).then(data => { if (data === 201) { ... The caller ...

Having Trouble Retrieving Data from Observable in Angular 2 and Typescript

I've encountered a promise error when trying to access a variable that receives data from an observable. Here's an example: Within my component, I have defined the Stat class: export class Stats { name: string; percentage: number; constru ...

Using ag-Grid's cellEditor with object values for selection

Looking to choose a user from a list of users: User.ts export class User { constructor (public id: number, public userName : string){} } The column definition appears as follows: this.columns = [ {headerName: "Assigned", field:"user ...

When utilizing typescript to develop a node module and importing it as a dependency, an issue may arise with a Duplicate identifier error (TS2300)

After creating a project called data_model with essential classes, I built a comprehensive gulpfile.js. This file not only compiles .ts to .js but also generates a unified .d.ts file named data_model.d.ts, which exports symbols and is placed at the root of ...

At first, Typescript generics make an inference but are ultimately specified

In my TypeScript code, I have defined a custom Logger class with specific options. The DefaultLevel type is created as a union of 'info' and 'error'. The LoggerOptions interface includes two generics, CustomLevels and Level, where Custo ...

Is it advisable to use a centralized webpack configuration for managing multiple projects efficiently?

TL:DR; What is the best approach to centralize a webpack 3.x build setup for multiple modules? Currently, we are in the process of restructuring our company's module library and preparing to publish them on npm. However, this has sparked discussion ...

When the input type is set to 'number', FormGroup.valueChanges will only trigger on 'change' and 'blur' events

Issue: To replicate the problem, visit this Stackblitz link: https://stackblitz.com/edit/angular-feu1az The event handler is behaving unexpectedly when the value of the last field (of type number) is changed. Unlike Text 1 and Text 2 fields where the eve ...

Get the most recent two files from a set

I am currently facing a challenge in retrieving the first 2 documents from a collection in google cloud firestore. My current approach involves using the timestamp of the latest document and then calculating the time range to fetch the desired documents. l ...

How to hide an item in Ionic 2 using navparams

Is there a way to dynamically hide or show a list item on page load depending on certain parameters? Here is an example of the code I am currently using: HTML <button ion-item (tap)="goToPage2()" [hidden]="shouldHide">Page 2</button> TS ex ...

How to Reload the Active Tab in Angular 5?

In my project, I have noticed that a listener in one of the tabs causes the entire tab to refresh, resulting in it displaying information from the first tab until I switch to another tab and then go back. 1) Is there a way to refresh only the current tab? ...

Issue with jQuery click event not activating on initial click but functioning properly on the subsequent click

I am currently implementing the jquery.ime editor in my project, which allows for multi-language editing capabilities. The library I am using can be found here. By default, the language JSON files are loaded on "change" events. However, I would like this f ...

How to troubleshoot the issue of "Error: (SystemJS) module is not defined" in Angular 2?

I am a beginner in the world of Angular2. It is known that in Angular2, there is a way to reference a file using a relative path by defining moduleId : module.id in the component meta data. However, I have tried doing it this way and keep encountering the ...

When typing declarations are used, they clarify whether the entity being referenced is an Object or

I am currently working on aligning the Dockerode run typings to match the actual implementation. The issue arises when I invoke run as TypeScript consistently identifies the return value as a Promise. It seems that TypeScript is having trouble distinguish ...

Encountered a problem while attempting to build with ng build --prod. No issues when using ng serve or excluding

My project was working smoothly with ng build --prod until I decided to update the TypeScript version from 2.72 to 2.92 in my package.json file. Now, after the update, an error message pops up: ERROR in Cannot read property 'Symbol(Symbol.iterator ...