Error: No NgModule metadata found for 'AppModule'


#1

I’m using the groceries demo app ( from NS). – Android.

I must say that if I run : tns run android , - I do get it all OK :

The problem has started when i’ve installed nativescript-dev-webpack - Where if I run :
npm run start-android-bundle , I get an error :

JS: Timeline: Modules: onActivityResumed com.tns.gen.android.app.Application_ActivityLifecycleCallbacks@46bcb04  (346195420.913214ms. - 346195436.816214ms.)
System.err: java.lang.RuntimeException: Unable to resume activity {org.nativescript.Groceries/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onActivityResumed failed
System.err:
System.err: Error: No NgModule metadata found for 'AppModule'.
System.err: File: "file:///data/data/org.nativescript.Groceries/files/app/bundle.js, line: 14404, column: 16
System.err:
System.err: StackTrace:
System.err:     Frame: function:'ZoneAwareError', file:'file:///data/data/org.nativescript.Groceries/files/app/vendor.js', line: 58488, column: 33

complete log is here

Question:
I’m really frustrated for dealing with this for 3 hours
What am I doing wrong ?

I suspect maybe something with moduleid ??

Anyway - here are the core files :

main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { setStatusBarColors } from "./utils/status-bar-util";

import { AppModule } from "./app.module";
setStatusBarColors();

platformNativeScriptDynamic().bootstrapModule(AppModule);

app.module.ts

import {NgModule, NO_ERRORS_SCHEMA} from "@angular/core";
import {NativeScriptModule} from "nativescript-angular/nativescript.module";
import {NativeScriptFormsModule} from "nativescript-angular/forms";
import {AppComponent} from "./app.component";
import {NativeScriptHttpModule} from "nativescript-angular/http";
import {NativeScriptRouterModule} from "nativescript-angular/router";
import {routes, navigatableComponents} from "./app.routing";

@NgModule({
    imports: [NativeScriptModule, NativeScriptFormsModule, NativeScriptHttpModule, NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes)],
    declarations: [AppComponent, ...navigatableComponents],
    bootstrap: [AppComponent],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule
{
}

app.component.ts

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "main",
    template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {}

login.component.ts

import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import {User} from "../../shared/user/user";
import {UserService} from "../../shared/user/user.service";
import {Router} from "@angular/router";
import {RouterExtensions} from "nativescript-angular";
import {Page} from "ui/page";
import {View} from "ui/core/view"
import {Color} from "color";
import { setHintColor } from "../../utils/hint-util";
import { TextField } from "ui/text-field";
@Component({
    selector: "my-app",
    templateUrl: "./login.html",
    moduleId: module.id,
    styleUrls: ["./login-common.css", "./login.css"],
    providers: [UserService]
})
export class LoginComponent implements OnInit
{

list.component.ts

import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import {Grocery} from "../../shared/grocery/grocery";
import {GroceryListService} from "../../shared/grocery/grocery-list.service";
import {TextField} from "ui/text-field";
import * as SocialShare from "nativescript-social-share";
@Component({
    selector: "list",
    moduleId: module.id,
    providers: [GroceryListService],
    templateUrl: "./list.html",
    styleUrls: ["./list-common.css", "./list.css"]
})
export class ListComponent implements OnInit
{...

More files :

webpack.config.js: http://jsbin.com/yoyekutame/edit?html,output

Package.json : http://jsbin.com/roleliqefa/edit?html

tsconfig.json : http://jsbin.com/caxihereje/edit?html


#2

With webpack you typically need an main.aot.ts file, instead of main.ts because bootstrapping of your app is a bit different in a webpack context.

Nice sideeffect of needing a file specifically for aot, is you get to add production-related code here - for instance enabling prodmode for Angular. My main.aot.ts:

import { enableProdMode } from "@angular/core";
import { platformNativeScript } from "nativescript-angular/platform-static";
import { AppModuleNgFactory } from "./app.module.ngfactory";

enableProdMode();

// note that this line doesn't bootstrap AppModule, but AppModuleNgFactory!
platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

#3

I don’t understand. should I create the file ?

currently all i have is main.ts with :

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { setStatusBarColors } from "./utils/status-bar-util";

import { AppModule } from "./app.module";

setStatusBarColors();
platformNativeScriptDynamic().bootstrapModule(AppModule);

I don’t have main.aot.ts file