Error encountered resolving symbol values statically...

This one is racking my brains. I’ve searched and been through every solution on Google and GitHub, but to no avail.

Getting the following error when trying to run a new project which is consuming my library:

Error encountered resolving symbol values statically. Calling function ‘Co mmonModule’, function calls are not supported. Consider replacing the function o r lambda with a reference to an exported function, resolving symbol AppModule in C:/Development/AppTemplate/Application/WebClient/src/app.module.ts, resolving s ymbol AppModule in C:/Development/AppTemplate/Application/WebClient/src/app.modu le.ts

I believe my library is statically-analyzable for aot, and I also ran ngc --aot=false just to make sure, but I still get the error.

Here’s my library CommonLibraryModule - index.ts:

//Angular Components
import {NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, ErrorHandler}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {CommonModule} from "@angular/common";
import {HttpModule} from '@angular/http';
import {RouterModule } from '@angular/router';

//Common
import {NavComponent, PrioritySortPipe} from './components/site-components/nav/nav.component';
import {AppNameComponent} from './components/site-components/app-name/app-name.component';
import {ToastContainer} from './components/site-components/toast-container/toast.container';
import {ToastComponent} from './components/site-components/toast/toast.component';
import {NumberSpinnerComponent} from './components/site-components/number-spinner/number-spinner.component';
import {TableComponent} from './components/table/table.component';
import {TableComponentRowProcessor} from './components/table/table.component.processor';
import {TabbableComponent} from './components/site-components/tabbable/tabbable.component';
import {TabComponent} from './components/site-components/tab/tab.component';
import {DatePicker} from './components/site-components/datepicker/datepicker.component';
import {AutocompleteDirective} from './directives/autocomplete/autocomplete.directive';
import {CollapsibleComponent} from './components/site-components/collapsible/collapsible.component';
import {ChartComponent} from './components/chart/chart.component';
import {KnobComponent} from './components/knob/knob.component';
import {PaginatedTableComponent} from './components/data-components/paginated-table/paginated-table.component';
import {PopupComponent} from './components/site-components/popup/popup.component';
import {LoadingComponent} from './components/site-components/loading/loading.component';
import {SearchComponent} from './components/site-components/search/search.component';
import {TimelineContainerComponent} from './components/site-components/timeline-container/timeline-container.component';
import {PaginatorComponent} from './components/site-components/paginator/paginator.component';
import {SubtitleComponent} from './components/site-components/subtitle/subtitle.component';
import {PercentDiffComponent} from './components/helper-components/pct-diff.component';
import {LegendComponent} from './components/helper-components/legend.component';
import {UserMessageComponent} from './components/site-components/user-message/user-message.component';
import {AutocompleteList} from "./components/site-components/autocomplete-list/autocomplete-list.component";
import {DropDownComponent} from './components/site-components/dropdown/dropdown.component';
import {FilterPanelComponent} from './components/site-components/filter-panel/filter-panel.component';
import {UserComponent} from './components/site-components/user/user.component';
import {HourglassComponent} from './components/site-components/loading/hourglass/hourglass.component';
import {ButtonComponent} from './components/site-components/button/button.component';
import {DropDownItemComponent} from './components/site-components/dropdown-item/dropdown-item.component';
import {DrilldownComponent} from './components/data-components/drilldown/drilldown.component';
import {CurrentYearComponent} from './components/helper-components/current-year.component';
import {KeysPipe} from './pipes/keys.pipe';
import {CaseSplitPipe} from './pipes/case-split.pipe';
import {NumberPipe} from './pipes/number.pipe';
import {RelevantOpsPipe} from './pipes/relevantops.pipe';
import {TimeDiffPipe} from './pipes/time-diff.pipe';
import {OrderByPipe} from './pipes/orderby.pipe';
import {EllipsisPipe} from './pipes/ellipsis.pipe';

//Common Services
import {DashboardService} from './services/dashboard.service';
import {AccountService} from './services/account.service';
import {AnimatorService} from './services/animator.service';
import {CollapsibleManagementService} from './services/collapsible-mgmt.service';
import {ColourService} from './services/colour.service';
import {CredentialManagementService} from './services/credential-management.service';
import {IdService} from './services/id.service';
import {LoggingService} from './services/logging.service';
import {ParamSerialisationService} from './services/param-serialisation.service';
import {RouteService} from './services/route.service';
import {SlugService} from './services/slug.service';
import {ErrorService} from './services/data/error.service';
import {FilterService} from './services/data/filter.service';
import {HttpWrapperService} from './services/data/httpWrapperService';
import {ContextMenuService} from './services/ui/context-menu.service';
import {PagingService} from './services/ui/paging.service';
import {StateService} from './services/ui/state.service';
import {ToastService} from './services/ui/toast.service';

//Common Other
import {canActivateRoute} from './exports/can-activate-route.function';
import {DashboardModelFactory} from './factories/dashboard-model.factory';
import {DashboardRowModelFactory} from './factories/dashboard-row-model.factory';
import {DrilldownFactory} from './factories/drilldown.factory';
import {KnobFactory} from './factories/knob.factory';
import {TableFactory} from './factories/table.factory';

 
//Export All
export *  from './components/site-components/nav/nav.component';
export *  from './components/site-components/app-name/app-name.component';
export *  from './components/site-components/toast-container/toast.container';
export *  from './components/site-components/toast/toast.component';
export *  from './components/site-components/number-spinner/number-spinner.component';
export *  from './components/table/table.component';
export *  from './components/table/table.component.processor';
export *  from './components/site-components/tabbable/tabbable.component';
export *  from './components/site-components/tab/tab.component';
export *  from './components/site-components/datepicker/datepicker.component';
export *  from './directives/autocomplete/autocomplete.directive';
export *  from './components/site-components/collapsible/collapsible.component';
export *  from './components/chart/chart.component';
export *  from './components/knob/knob.component';
export *  from './components/data-components/paginated-table/paginated-table.component';
export *  from './components/site-components/popup/popup.component';
export *  from './components/site-components/loading/loading.component';
export *  from './components/site-components/search/search.component';
export *  from './components/site-components/timeline-container/timeline-container.component';
export *  from './components/site-components/paginator/paginator.component';
export *  from './components/site-components/subtitle/subtitle.component';
export *  from './components/helper-components/pct-diff.component';
export *  from './components/helper-components/legend.component';
export *  from './components/site-components/user-message/user-message.component';
export *  from "./components/site-components/autocomplete-list/autocomplete-list.component";
export *  from './components/site-components/dropdown/dropdown.component';
export *  from './components/site-components/filter-panel/filter-panel.component';
export *  from './components/site-components/user/user.component';
export *  from './components/site-components/loading/hourglass/hourglass.component';
export *  from './components/site-components/button/button.component';
export *  from './components/site-components/dropdown-item/dropdown-item.component';
export *  from './components/data-components/drilldown/drilldown.component';
export *  from './components/helper-components/current-year.component';
export *  from './pipes/keys.pipe';
export *  from './pipes/case-split.pipe';
export *  from './pipes/number.pipe';
export *  from './pipes/relevantops.pipe';
export *  from './pipes/time-diff.pipe';
export *  from './pipes/orderby.pipe';
export *  from './pipes/ellipsis.pipe';
export * from './services/dashboard.service';
export * from './services/account.service';
export * from './services/animator.service';
export * from './services/collapsible-mgmt.service';
export * from './services/colour.service';
export * from './services/credential-management.service';
export * from './services/id.service';
export * from './services/logging.service';
export * from './services/param-serialisation.service';
export * from './services/route.service';
export * from './services/slug.service';
export * from './services/data/error.service';
export * from './services/data/filter.service';
export * from './services/data/httpWrapperService';
export * from './services/ui/context-menu.service';
export * from './services/ui/paging.service';
export * from './services/ui/state.service';
export * from './services/ui/toast.service';
export * from './exports/can-activate-route.function';
export * from './factories/dashboard-model.factory';
export * from './factories/dashboard-row-model.factory';
export * from './factories/drilldown.factory';
export * from './factories/knob.factory';
export * from './factories/table.factory';

@NgModule({
  imports: [ 
	  BrowserModule, CommonModule, HttpModule, RouterModule, FormsModule, ReactiveFormsModule
   ],
   declarations: [ NavComponent, AppNameComponent, ToastContainer, NumberSpinnerComponent, 
	  TableComponent, TableComponentRowProcessor, TabbableComponent, TabComponent, DatePicker, AutocompleteDirective, CollapsibleComponent, 
	  ChartComponent, KnobComponent, PaginatedTableComponent, PopupComponent, LoadingComponent, 
	  SearchComponent, TimelineContainerComponent, PaginatorComponent, SubtitleComponent, 
	  ToastComponent, PercentDiffComponent, LegendComponent, UserMessageComponent, DropDownComponent, AutocompleteList, 
	  FilterPanelComponent, UserComponent, HourglassComponent, ButtonComponent, DropDownItemComponent,
	  DrilldownComponent, CurrentYearComponent,  
	  KeysPipe, CaseSplitPipe, NumberPipe, RelevantOpsPipe, TimeDiffPipe, PrioritySortPipe, 
	  OrderByPipe, EllipsisPipe, canActivateRoute,
	  DashboardModelFactory, DashboardRowModelFactory, DrilldownFactory, KnobFactory, TableFactory
	],   
  exports: [ 
	  NavComponent, AppNameComponent, ToastContainer, NumberSpinnerComponent, 
	  TableComponent, TableComponentRowProcessor, TabbableComponent, TabComponent, DatePicker, AutocompleteDirective, CollapsibleComponent, 
	  ChartComponent, KnobComponent, PaginatedTableComponent, PopupComponent, LoadingComponent, 
	  SearchComponent, TimelineContainerComponent, PaginatorComponent, SubtitleComponent, 
	  ToastComponent, PercentDiffComponent, LegendComponent, UserMessageComponent, DropDownComponent, AutocompleteList, 
	  FilterPanelComponent, UserComponent, HourglassComponent, ButtonComponent, DropDownItemComponent,
	  DrilldownComponent, CurrentYearComponent,  
	  KeysPipe, CaseSplitPipe, NumberPipe, RelevantOpsPipe, TimeDiffPipe, PrioritySortPipe, 
	  OrderByPipe, EllipsisPipe, canActivateRoute,
	  DashboardModelFactory, DashboardRowModelFactory, DrilldownFactory, KnobFactory, TableFactory
	]              
})
export class CommonLibraryModule {
    static forRoot():ModuleWithProviders {
        return {
            ngModule: CommonLibraryModule,
            providers: [
				DashboardService,
				AccountService,
				AnimatorService,
				CollapsibleManagementService,
				ColourService,
				CredentialManagementService,
				IdService,
				LoggingService,
				ParamSerialisationService,
				RouteService,
				SlugService,
				ErrorService,
				FilterService,
				HttpWrapperService,
				ContextMenuService,
				PagingService,
				StateService,
				ToastService
			]
        };
    }
}

And here’s my AppModule:

//Angular Components
import {NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, ErrorHandler}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {routing, appRoutingProviders} from './route.config';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {RouterModule } from '@angular/router';
import {CommonModule} from "@angular/common";

//Page Components
import {AppComponent} from './components/app/app.component';
import {DashboardComponent} from './components/page-components/dashboard/dashboard.component';
import {LoginComponent} from './components/page-components/login/login.component';
import {ErrorComponent} from './components/page-components/error/error.component';
import {AdminComponent} from './components/page-components/admin/admin.component';
import {UserProfileComponent} from './components/page-components/user-profile/user-profile.component';

//Common Library
import {CommonLibraryModule} from 'commonlibrary';

@NgModule({
  imports: [ 
    // module dependencies
    BrowserModule, CommonModule, 
    RouterModule.forRoot(routing, { useHash: Boolean(history.pushState) === false }), 
    FormsModule, ReactiveFormsModule, HttpModule, CommonLibraryModule.forRoot()
  ],       
  declarations: [ 
    // components and directives
    AppComponent, DashboardComponent, LoginComponent, ErrorComponent, AdminComponent, UserProfileComponent
  ],   
  bootstrap: [ AppComponent ],     // root component
  providers: [ appRoutingProviders ]                   // services
})
export class AppModule { }

I’m hoping I’ve missed something really obvious. I feel like I’m so close but falling at the last hurdle.

With the error stating “Calling function ‘CommonModule’”, does this mean that the error is within the CommonModule index.ts? Or could it be a probably within one of the components declared?

I know this is more of a problem with my code than the library generator, but any help would be massively appreciated.

[Davy-F]

I’ve resolved my issues by updating to angular-cli which seems to be working a lot better than the standalone Angular 4.0.0 build I had before.

[jvandemo]

@Davy-F — Thank you for the update! 👍