Error: Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced

Question

I'm facing a problem here and I don't know what to do> When I type ng serve, the following error shows up

ERROR in Error: Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 175:22 in the original .ts file), resolving symbol NgModule in /Users/Frontend/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol CoreModule in /Users/Frontend/src/app/core/core.module.ts, resolving symbol CoreModule in /Users/Frontend/src/app/core/core.module.ts at positionalError (/Users/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25273:35) at simplifyInContext (/Users/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25116:27) at StaticReflector.simplify (/Users/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:25130:13) at StaticReflector.annotations (/Users/Frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:24558:41) at _getNgModuleMetadata (/Users/Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31) at _extractLazyRoutesFromStaticModule (/Users/Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26) at /Users/Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (/Users/Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10) at Object.listLazyRoutesOfModule (/Users/Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/Frontend/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (/Users/Frontend/node_modules/@ngtools/webpack/src/plugin.js:207:44) at _donePromise.Promise.resolve.then.then.then.then.then (/Users/Frontend/node_modules/@ngtools/webpack/src/plugin.js:443:24) at process._tickCallback (internal/process/next_tick.js:109:7)

webpack: Failed to compile.

and here is my CoreModule

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core/src/metadata/ng_module';
import {SkipSelf, Optional} from '@angular/core';
import {HttpErrorHandler} from './services/http-error-handler';
import {AuthService} from './services/auth.service';
import {PrivatePageGuard} from './services/private-page.guard';
import {PublicPageGuard} from './services/public-page.guard';
import {XHRBackend, Http, RequestOptions, HttpModule} from '@angular/http';
import {JsonHttp} from './services';

export function createJsonHttp(xhrBackend: XHRBackend, requestOptions: 
RequestOptions) {
    const ngHttp = new Http(xhrBackend, requestOptions);
    return new JsonHttp(ngHttp);
}

@NgModule({
     imports: [
        CommonModule,
        HttpModule
     ],
     exports: [],
     providers: [
       {
        provide: JsonHttp,
        useFactory: createJsonHttp,
        deps: [XHRBackend, RequestOptions]
       },
       HttpErrorHandler,
       AuthService,
       PrivatePageGuard,
       PublicPageGuard,
     ]
 })
 export class CoreModule {

   constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
       if (parentModule) {
            throw new Error(
               'CoreModule is already loaded. Import it in the AppModule only');
          }
       }

   }

and here is my app.module.ts where i use coremodule

    import {NgModule, ApplicationRef} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {RouterModule, PreloadAllModules} from "@angular/router";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {ENV_PROVIDERS} from "./environment";
import {ROUTES} from "./app.routes";
import {AppComponent} from "./app.component";
import {CoreModule} from "./core";
import {HomeModule} from "./pages/home/home.module";
import {AuthModule} from "./pages/auth/auth.module";
import {HeaderModule} from "./components/header/header.module";
import {removeNgStyles, createInputTransfer, createNewHosts} from "@angularclass/hmr";
import {TransactionsModule} from "./pages/transactions/transactions.module";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(ROUTES, {
            preloadingStrategy: PreloadAllModules
        }),
        FormsModule,
        ReactiveFormsModule,

        CoreModule,
        HomeModule,
        AuthModule,
        HeaderModule,
        TransactionsModule
    ],
    providers: [
        ENV_PROVIDERS,
    ]
})
export class AppModule {
    constructor(public appRef: ApplicationRef) {
    }

    hmrOnInit(store) {
        if (!store || !store.state) return;
        console.log('HMR store', store);
        console.log('store.state.data:', store.state.data);
        // inject AppStore here and update it
        // this.AppStore.update(store.state)
        if ('restoreInputValues' in store) {
            store.restoreInputValues();
        }
        // change detection
        this.appRef.tick();
        delete store.state;
        delete store.restoreInputValues;
    }

    hmrOnDestroy(store) {
        const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
        // recreate elements
        store.disposeOldHosts = createNewHosts(cmpLocation);
        // inject your AppStore and grab state then set it on store
        // var appState = this.AppStore.get()
        store.state = {data: 'yolo'};
        // store.state = Object.assign({}, appState)
        // save input values
        store.restoreInputValues = createInputTransfer();
        // remove styles
        removeNgStyles();
    }

    hmrAfterDestroy(store) {
        // display new elements
        store.disposeOldHosts();
        delete store.disposeOldHosts;
        // anything you need done the component is removed
    }

}

as for my app.routes.ts :

import {Routes} from "@angular/router";
import {HomeComponent} from "./pages/home/home.component";
import {AuthComponent} from "./pages/auth/auth.component";
import {PrivatePageGuard} from "./core/services/private-page.guard";
import {PublicPageGuard} from "./core/services/public-page.guard";
import {TransactionsComponent} from "./pages/transactions/transactions.component";

export const ROUTES: Routes = [
    {
        path: 'home',
        component: HomeComponent,
        canActivate: [PrivatePageGuard]
    },
    {
        path: 'transactions',
        component: TransactionsComponent,
        canActivate: [PrivatePageGuard]
    },
    {
        path: 'login',
        component: AuthComponent,
        canActivate: [PublicPageGuard]
    },

];

Answer 1

You have wrong import:

import {NgModule} from '@angular/core/src/metadata/ng_module';

It should be:

import {NgModule} from '@angular/core';