Nativescript-Angular Error encountered resolving symbol values statically


#1

For my nativescript angular project - to implement webpack I have followed the instructions here however when I use npm run build-ios-bundle I get the following error.

ERROR in 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 128:12 in the original .ts file), resolving symbol device in /Users/NRMac/Projects/newquest/questNewS/node_modules/tns-core-modules/platform/platform.d.ts, resolving symbol isTablet in /Users/NRMac/Projects/newquest/questNewS/app/shared/device-constant/device.constant.ts, resolving symbol AccountManagerComponent in /Users/NRMac/Projects/newquest/questNewS/app/login/account-manager.component.ts, resolving symbol AccountManagerComponent in /Users/NRMac/Projects/newquest/questNewS/app/login/account-manager.component.ts

ERROR in ./main.aot.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in '/Users/NRMac/Projects/newquest/questNewS/app'
 @ ./main.aot.ts 5:29-62
Child extract-text-webpack-plugin /Users/NRMac/Projects/newquest/questNewS/node_modules/extract-text-webpack-plugin/dist /Users/NRMac/Projects/newquest/questNewS/node_modules/resolve-url-loader/index.js??ref--1-1!/Users/NRMac/Projects/newquest/questNewS/node_modules/nativescript-css-loader/index.js??ref--1-2!/Users/NRMac/Projects/newquest/questNewS/node_modules/nativescript-dev-webpack/platform-css-loader.js!/Users/NRMac/Projects/newquest/questNewS/app/app.css:
       [1] ../node_modules/resolve-url-loader?{"silent":true,"absolute":false,"sourceMap":false,"fail":false,"keepQuery":false,"debug":false,"root":null,"includeRoot":false}!../node_modules/nativescript-css-loader?{"minimize":false}!../node_modules/nativescript-dev-webpack/platform-css-loader.js!./app.css 800 bytes {0} [built]
        + 2 hidden modules
Webpack Bundle Analyzer saved stats file to /Users/NRMac/Projects/newquest/questNewS/report/stats.json
Webpack Bundle Analyzer saved report to /Users/NRMac/Projects/newquest/questNewS/report/report.html
child process exited with code 2

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ns-bundle" "--ios" "--run-app"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ ns-bundle: `ns-bundle`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ ns-bundle script 'ns-bundle'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ns-bundle
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/NRMac/Projects/newquest/questNewS/npm-debug.log

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start-ios-bundle"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! @ start-ios-bundle: `npm run ns-bundle --ios --run-app`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ start-ios-bundle script 'npm run ns-bundle --ios --run-app'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run ns-bundle --ios --run-app
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/NRMac/Projects/newquest/questNewS/npm-debug.log

My project is using tns version 3.2.0 . The package.json is as follows


{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "myprojectid.....",
    "tns-android": {
      "version": "3.2.0"
    },
    "tns-ios": {
      "version": "3.2.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.1.0",
    "@angular/common": "~4.1.0",
    "@angular/compiler": "~4.1.0",
    "@angular/core": "~4.1.0",
    "@angular/forms": "~4.1.0",
    "@angular/http": "~4.1.0",
    "@angular/platform-browser": "~4.1.0",
    "@angular/platform-browser-dynamic": "~4.1.0",
    "@angular/router": "~4.1.0",
    "nativescript-algolia": "0.0.1",
    "nativescript-angular": "^3.1.2",
    "nativescript-email": "^1.5.1",
    "nativescript-fancyalert": "^1.1.2",
    "nativescript-geolocation": "^3.0.0",
    "nativescript-gif": "^1.0.9",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-loading-indicator": "^2.3.2",
    "nativescript-plugin-firebase": "3.11.2",
    "nativescript-telerik-ui": "~3.1.1",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-toast": "^1.4.5",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "^3.2.0"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.1.0",
    "@ngtools/webpack": "~1.6.0",
    "babel-traverse": "6.22.1",
    "babel-types": "6.22.0",
    "babylon": "6.15.0",
    "codelyzer": "3.1.2",
    "copy-webpack-plugin": "~4.0.1",
    "es6-promise-loader": "^1.0.2",
    "extract-text-webpack-plugin": "~3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "~0.5.0",
    "nativescript-dev-webpack": "^0.8.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "tslint": "^5.1.0",
    "typescript": "^2.4.2",
    "webpack": "~3.2.0",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1",
    "zone.js": "~0.8.2"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

The app.module.ts file is

import { NgModule, NO_ERRORS_SCHEMA, NgModuleFactoryLoader } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule, NSModuleFactoryLoader } from "nativescript-angular/router";
import { TabView, SelectedIndexChangedEventData } from "ui/tab-view";
import { NativeScriptUIListViewModule } from "nativescript-telerik-ui/listview/angular";
import { NativeScriptHttpModule } from "nativescript-angular/http";

import { AppComponent } from "./app.component";
import { routing, AppComponents } from "./app.routing";
import { SharedModule } from "./shared/shared.module";
import { AlphaCreateComponent } from "./feed/alphaCreate.component";
import { TestFeedComponent } from "./feed/testFeed.component";

import { AccountManagerComponent } from "./login/account-manager.component";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { FirebaseAuthService } from './services/firebase-auth.service';
import { BackendService } from './services/backend.service';
import { AuthGuard } from './services/auth-guard.service';
import { UserStatusService } from './services/userStatus.service';
import { SearchFromAlguService } from './services/searchfromalgu.service';
import { MyTestService } from './services/my-test.service';
import { ImageSearchService } from './services/image-search.service';
import { FirebaseCreateService } from './services/firebase-create.service';
import { SetMyTestService } from './services/set-my-test.service';
import { AndroidBAckButtonHandlerService } from './services/androidBackButtonHandler.service';
import { SearchStatusService } from "./services/search-status.service";
import { LoadingService } from "./services/loading.service";
import { FirebaseMessagingService } from "./services/firebase-messaging.service";

@NgModule({
    declarations: [AppComponent,
        ...AppComponents,
        // SearchBarComponent,
        // QuestionViewComponent,
        // ProfileComponent,
        AlphaCreateComponent,
        TestFeedComponent,
        AccountManagerComponent,
    ],
    entryComponents: [
        AccountManagerComponent,
    ],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptFormsModule,
        routing,
        NativeScriptUIListViewModule,
        SharedModule,
        NativeScriptHttpModule,
    ],
    schemas: [NO_ERRORS_SCHEMA],
    providers: [
        BackendService,
        FirebaseAuthService,
        AuthGuard,
        UserStatusService,
        SearchFromAlguService,
        MyTestService,
        ImageSearchService,
        FirebaseCreateService,
        SearchStatusService,
        AndroidBAckButtonHandlerService,
        LoadingService,
        FirebaseMessagingService,
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader },
    ],
})
export class AppModule { }

The app.routing file is as follows:

import { PreloadAllModules } from "@angular/router";
import { LoginComponent } from "./login/login.component";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { RegistrationComponent } from "./registration/registration.component";
import { MainComponent, MainTabComponent } from "./shared/maintab/maintab.component";
import { UserFeedExampleComponent } from "./feed/feed.component";
import { AlphaCreateComponent } from "./feed/alphaCreate.component";
import { TestFeedComponent } from "./feed/testFeed.component";

import { ProfileComponent } from "./profile/profile.component";

import { AuthGuard } from "./services/auth-guard.service";
import { ShowSearchResultComponent } from "./questionselect/showSearchResult.component";
import { ImageSearchComponent } from "./create-question/image-search/image-search.component";
import { MessagingComponent } from "./messaging/messaging.component";

const AppRoutes: any = [
    { path: "search-result", loadChildren: './questionselect/search-results.module#SearchResultsModule' },
    { path: "create-question", loadChildren: './create-question/create-question.module#CreateQuestionModule' },
    { path: "question-type", loadChildren: './question-type/question-type.module#QuestionTypeModule' },
    { path: "detailed-test", loadChildren: './detailed-test/detailed-test.module#DetailedTestModule' },
    { path: "registration", loadChildren: './registration/registration.module#RegistrationModule' },
    { path: "login", component: LoginComponent },
    {
        path: "main", component: MainComponent, canActivate: [AuthGuard],
        children: [
            { path: "tab/0", component: TestFeedComponent },
            { path: "tab/1", component: AlphaCreateComponent },
            { path: "tab/2", loadChildren: './messaging/messaging.module#MessagingModule' },
            { path: "tab/3", loadChildren: './profile/profile.module#ProfileModule' },
            { path: "", redirectTo: "tab/0", pathMatch: "full" },
        ],
    },
    { path: "", redirectTo: "login", pathMatch: "full" },
];

export const routing = NativeScriptRouterModule.forRoot(AppRoutes, { preloadingStrategy: PreloadAllModules });
export const AppComponents: any = [
    MainTabComponent,
    MainComponent,
    UserFeedExampleComponent,
    LoginComponent,
];