Nativescript: Error: Unexpected value 'undefined' imported by the module 'AppModule'

[Taremeh]

Im trying to upgrade from Nativescript 2 to NS 3. Unfortunately I'm getting an error, while launching the app. (platform: android)

Nativescript Version:
3.0.3

Platform

Error:

Error: Unexpected value 'undefined' imported by the module 'AppModule'
File: "file:/// ... /files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js, line 14575, column: 12"

I tried to fix it by updating my app.module.ts:
old: import { NativeScriptModule } from "nativescript-angular/platform";
new: import { NativeScriptModule } from "nativescript-angular/nativescript.module";

However, that didn't help. I also noticed, that I'm getting the following warning/error when installing tns platform add android.

When installing android:

├── UNMET PEER DEPENDENCY [email protected] invalid
└── [email protected] 

This is my package.json:

...
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "nativescript-angular": "3.0.0",
    "nativescript-audio": "^3.4.2",
    "nativescript-plugin-firebase": "^3.12.0",
    "nativescript-sound": "^1.0.4",
    "nativescript-theme-core": "1.0.4",
    "nativescript-toast": "^1.4.5",
    "reflect-metadata": "~0.1.8",
    "rxjs": "5.2.0",
    "tns-core-modules": "^3.0.1"
  },
  "devDependencies": {
    "babel-traverse": "6.22.1",
    "babel-types": "6.22.0",
    "babylon": "6.15.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.4.2",
    "typescript": "^2.3.2",
    "zone.js": "~0.8.10"
  }
}

The error-screenshot:

[sis0k0]

You need to import NativeScriptModule from nativescript-angular/nativescript.module and not from nativescript-angular/platform. Check out https://github.com/NativeScript/nativescript-angular/blob/master/CHANGELOG.md#breaking-changes.

[Taremeh]

As I've already mentioned in the post, I did that:

I tried to fix it by updating my app.module.ts:
old: import { NativeScriptModule } from "nativescript-angular/platform";
new: import { NativeScriptModule } from "nativescript-angular/nativescript.module";

Do I need to update anything else? Couldn't find more breaking changes and there are no syntax errors found by the Nativescript Plugin for Visual Code...

Here the console log, when starting android (tns run android):

Transferring project files...
Successfully transferred all files.
Refreshing application...
Successfully synced application com.apphoven.apphovenAlpha on device SH44RWM06818.

JS: AssetExtraction: Can't remove previously installed assets in /data/user/0/com.apphoven.apphovenAlpha/files/app
JS: AssetExtraction: Can't remove previously installed assets in /data/user/0/com.apphoven.apphovenAlpha/files/internal
JS: AssetExtraction: Can't remove previously installed assets in /data/user/0/com.apphoven.apphovenAlpha/files/snapshots/armeabi-v7a
JS: firebase.init done
06-12 18:47:02.224 20146 20146 W System.err:    at com.tns.Runtime.callJSMethodNative(Native Method)
06-12 18:47:02.224 20146 20146 W System.err:    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1021)
06-12 18:47:02.224 20146 20146 W System.err:    at com.tns.Runtime.callJSMethodImpl(Runtime.java:903)
06-12 18:47:02.224 20146 20146 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:890)
06-12 18:47:02.224 20146 20146 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:874)
06-12 18:47:02.224 20146 20146 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:866)

[sis0k0]

Can yo please post your app.module?

[Taremeh]

What might be the problem:
As you could see in the console log (last post), it successfully initialises Firebase. So I changed the console.log command from console.log("firebase.init done") to console.log("firebase.init done test123") to see whether my changes were actually compiled. Unfortunately, it didn't update / compile the file (even after platform remove android & tns build android & removing the hooks folder).

Still:

JS: firebase.init done

That would mean, that my changes made to the app.module (import { NativeScriptModule } from "nativescript-angular/nativescript.module";) haven't been compiled? That would explain the reoccurring error I get. So how can I fix that?

app.module

// Imports
import { NgModule } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";

// Declarations
import { AppComponent } from "./app.component";
import { TempoTermPipe } from "./pages/metronome/tempo-term.pipe";
import { GraphLegendPipe } from "./pages/practice-session/graph-legend.pipe"
import { TimerPipe, MillisecondTransformerPipe } from "./shared";
import { routes, navigatableComponents } from "./app.routing";

// Providers
import { authProviders } from "./app.routing";
import { setStatusBarColors, BackendService, LoginService, PieceService, HttpService } from "./shared";
import { PerformanceTestService } from "./pages/metronome/performance-test.service";

// Modules
import { LoginModule } from "./pages/login/login.module";
import { SettingsModule } from "./pages/settings/settings.module";

@NgModule({
  providers: [
    BackendService,
    LoginService,
    authProviders,
    PerformanceTestService,
    HttpService,
    PieceService
  ],
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes),
    LoginModule,
    SettingsModule
  ],
  declarations: [
    AppComponent,
    ...navigatableComponents,
    TempoTermPipe,
    TimerPipe,
    GraphLegendPipe,
    MillisecondTransformerPipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

login.module

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NgModule } from "@angular/core";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule
  ]
})

export class LoginModule { }

settings.module

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NgModule } from "@angular/core";

@NgModule({
  imports: [
    NativeScriptModule
  ]
})
export class SettingsModule {}

[joelcdoyle]

I'm having this same issue after migrating a NativeScript 2 app to NativeScript 3. The app was previously working fine. The only change has been the migration.

Also had the unmet dependency message, but was able fix it by changing the version string in package.json file to use the tilde symbol ("~5.2.0"). This tells npm to get the closest valid version to 5.2.0.

I am also not seeing any of my console.log messages update. No syntax or TS errors in VS Code or Atom.

I do not use firebase.

import { NgModule } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptUIListViewModule } from "nativescript-telerik-ui/listview/angular";

import { AuthService } from "./shared/auth/auth.service";
import { SecurityQuestionService } from "./shared/auth/security-question.service";
import { UserService } from "./shared/user/user.service";
import { CustomerService } from "./shared/user/customer.service";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from "./app.routing";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptHttpModule,
    NativeScriptFormsModule,
    NativeScriptRouterModule,
    NativeScriptUIListViewModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  providers: [
    AuthService,
    SecurityQuestionService,
    UserService,
    CustomerService
  ],
  declarations: [AppComponent, ...navigatableComponents],
  bootstrap: [AppComponent]
})
export class AppModule {}

[NickIliev]

The latest versions of NativeScript, nativescript-angular are using different approach (migration guide here)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.