[BUG] Nativescript apk build fails. Please add a @NgModule annotation.

Error building a fresh generated NativeScript application. Please add a @NgModule annotation.

When building a Nativescript application apk inside a Nx cli + Xplat worksapce, the build fails with the error:

- ERROR in Unexpected value 'MyOrgCoreModule in /home/user/dev/poc/myorg/xplat/nativescript/core/core.module.ts'
- imported by the module 'CoreModule in /home/user/dev/poc/myorg/apps/nativescript-myapp/src/core/core.module.ts'.
- Please add a @NgModule annotation.

- Executing webpack failed with exit code 2.

Similar issues happened with Ionic builds in #146 and #149. However, based on @chrene solution which worked for @Jason-Schroeder too, pointing the @angular/compiler-cli, @ngtools/webpack and nativescript-dev-webpack dev dependencies to the root node_modules is not working… the build still fails with the same error.

Reproduction steps:

$ npm install -g @nrwl/cli
$ npx create-nx-workspace myorg --preset empty --cli nx
$ cd myorg
$ npm install --save-dev @nstudio/xplat
$ nx generate @nstudio/xplat:init --platforms nativescript --framework angular --prefix MyOrg
$ nx generate @nstudio/xplat:application --name myapp --platforms nativescript --framework angular --useXplat
$ cd apps/nativescript-myapp
$ tns build android --env.aot --env.uglify --env.production

Copying template files...
Platform android successfully added. v6.3.1
Preparing project...
Hash: ae29f100872e47e1fcb8
Version: webpack 4.27.1
Time: 13387ms
Built at: 01/16/2020 4:31:18 PM
 4 assets
Entrypoint bundle = runtime.js vendor.js bundle.js
 [57] ./package.json 219 bytes {0} [optional] [built]
 [80] ./app.scss 19.8 KiB {0} [built]
[110] ./main.ts 1.17 KiB {0} [built]
    + 191 hidden modules

ERROR in Unexpected value 'MyOrgCoreModule in /home/user/dev/poc/myorg/xplat/nativescript/core/core.module.ts' imported by the module 'CoreModule in /home/user/dev/poc/myorg/apps/nativescript-myapp/src/core/core.module.ts'. Please add a @NgModule annotation.

Executing webpack failed with exit code 2.

Xplat dependencies:

  @nstudio/xplat : 8.1.1
  @nstudio/angular : 8.1.1
  @nstudio/nativescript-angular : 8.1.1
  @nstudio/nativescript : 8.1.1

Nx report:

$ nx report

>  NX  Report complete - copy this into the issue template

  @nrwl/angular : 8.8.3
  @nrwl/cli : 8.11.1
  @nrwl/cypress : 8.8.3
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 8.8.3
  @nrwl/linter : Not Found
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.11.1
  @nrwl/web : Not Found
  @nrwl/workspace : 8.11.1
  typescript : 3.5.3

Important files content:

root package.json content

{
"name": "myorg",
"version": "0.0.0",
"license": "MIT",
"scripts": {
  "nx": "nx",
  "start": "nx serve",
  "build": "nx build",
  "test": "nx test",
  "lint": "nx workspace-lint && nx lint",
  "e2e": "nx e2e",
  "affected:apps": "nx affected:apps",
  "affected:libs": "nx affected:libs",
  "affected:build": "nx affected:build",
  "affected:e2e": "nx affected:e2e",
  "affected:test": "nx affected:test",
  "affected:lint": "nx affected:lint",
  "affected:dep-graph": "nx affected:dep-graph",
  "affected": "nx affected",
  "format": "nx format:write",
  "format:write": "nx format:write",
  "format:check": "nx format:check",
  "workspace-schematic": "nx workspace-schematic",
  "dep-graph": "nx dep-graph",
  "help": "nx help",
  "clean": "npx rimraf -- hooks node_modules package-lock.json && npm i",
  "start.nativescript.myapp.ios": "cd apps/nativescript-myapp && tns run ios --emulator",
  "start.nativescript.myapp.android": "cd apps/nativescript-myapp && tns run android --emulator",
  "start.nativescript.myapp.preview": "cd apps/nativescript-myapp && tns preview",
  "clean.nativescript.myapp": "cd apps/nativescript-myapp && npx rimraf -- hooks node_modules platforms package-lock.json && npm i && npx rimraf -- package-lock.json"
},
"private": true,
"dependencies": {
  "nativescript-theme-core": "^1.0.4",
  "tns-core-modules": "~6.2.0",
  "nativescript-angular": "~8.20.0",
  "nativescript-ngx-fonticon": "^4.2.0",
  "@angular/animations": "^8.2.0",
  "@angular/common": "^8.2.0",
  "@angular/compiler": "^8.2.0",
  "@angular/core": "^8.2.0",
  "@angular/forms": "^8.2.0",
  "@angular/platform-browser": "^8.2.0",
  "@angular/platform-browser-dynamic": "^8.2.0",
  "@angular/router": "^8.2.0",
  "core-js": "^3.3.2",
  "rxjs": "~6.5.3",
  "zone.js": "~0.10.2",
  "@myorg/scss": "file:libs/scss",
  "@ngx-translate/core": "~11.0.0",
  "@ngx-translate/http-loader": "~4.0.0",
  "reflect-metadata": "^0.1.12"
},
"devDependencies": {
  "@nrwl/workspace": "8.11.1",
  "@nstudio/xplat": "8.1.1",
  "@types/node": "~8.9.4",
  "dotenv": "6.2.0",
  "eslint": "6.1.0",
  "prettier": "1.18.2",
  "ts-node": "~7.0.0",
  "tslint": "~5.11.0",
  "typescript": "~3.5.3",
  "@nstudio/angular": "8.1.1",
  "@nstudio/nativescript-angular": "8.1.1",
  "@nrwl/angular": "~8.8.0",
  "@nstudio/nativescript": "8.1.1",
  "node-sass": "^4.12.0",
  "terser-webpack-plugin": "~2.2.0",
  "tns-platform-declarations": "~6.2.0",
  "@angular/compiler-cli": "^8.2.0",
  "@angular/language-service": "^8.2.0",
  "@angular-devkit/build-angular": "^0.803.3",
  "codelyzer": "~5.1.0"
},
"xplat": {
  "prefix": "MyOrg",
  "framework": "angular"
}
}

apps/nativescript-myapp/package.json content

{
"name": "myapp",
"license": "SEE LICENSE IN <your-license-filename>",
"version": "0.0.0",
"nativescript": {
  "id": "org.nativescript.myapp",
  "tns-android": {
    "version": "6.3.1"
  }
},
"scripts": {
  "reset": "npx rimraf -- hooks node_modules platforms && npm run js.clean",
  "clean": "npm run js.clean",
  "js.clean": "npx rimraf -- app/**/*.js",
  "prepare.ios.release": "tns prepare ios --release",
  "prepare.android.release": "tns prepare android --release",
  "build.ios": "tns build ios --env.aot --env.uglify --env.production --release",
  "build.android": "tns build android --env.aot --env.uglify --env.production --release",
  "debug.ios": "tns debug ios",
  "debug.android": "tns debug android",
  "postinstall": "node ./tools/xplat-postinstall.js"
},
"dependencies": {
  "@angular/animations": "file:../../node_modules/@angular/animations",
  "@angular/common": "file:../../node_modules/@angular/common",
  "@angular/compiler": "file:../../node_modules/@angular/compiler",
  "@angular/core": "file:../../node_modules/@angular/core",
  "@angular/forms": "file:../../node_modules/@angular/forms",
  "@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
  "@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
  "@angular/router": "file:../../node_modules/@angular/router",
  "@ngx-translate/core": "file:../../node_modules/@ngx-translate/core",
  "@myorg/scss": "file:../../libs/scss",
  "@myorg/nativescript-scss": "file:../../xplat/nativescript/scss",
  "nativescript-angular": "file:../../node_modules/nativescript-angular",
  "nativescript-ngx-fonticon": "file:../../node_modules/nativescript-ngx-fonticon",
  "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core",
  "reflect-metadata": "file:../../node_modules/reflect-metadata",
  "rxjs": "file:../../node_modules/rxjs",
  "tns-core-modules": "file:../../node_modules/tns-core-modules",
  "zone.js": "file:../../node_modules/zone.js"
},
"devDependencies": {
  "@angular/compiler-cli": "~8.2.0",
  "@angular/language-service": "file:../../node_modules/@angular/language-service",
  "@ngtools/webpack": "~8.3.0",
  "codelyzer": "file:../../node_modules/codelyzer",
  "nativescript-dev-webpack": "~1.3.0",
  "terser-webpack-plugin": "file:../../node_modules/terser-webpack-plugin",
  "tns-platform-declarations": "file:../../node_modules/tns-platform-declarations",
  "typescript": "file:../../node_modules/typescript"
}
}

xplat/nativescript/core/core.module.ts -> MyOrgCoreModule content

import { NgModule, Optional, SkipSelf } from '@angular/core';

// nativescript
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
import { device } from 'tns-core-modules/platform';
import { TNSFontIconModule } from 'nativescript-ngx-fonticon';

// libs
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import {
CoreModule,
PlatformLanguageToken,
PlatformWindowToken
} from '@myorg/core';
import { throwIfAlreadyLoaded } from '@myorg/utils';

// app
import { CORE_PROVIDERS } from './services';
import { TNSWindowService } from './services/tns-window.service';
import { TNSTranslateLoader } from './services/tns-translate.loader';

// factories
export function platformLangFactory() {
return device.language;
}

export function createTranslateLoader() {
return new TNSTranslateLoader('/assets/i18n/');
}

@NgModule({
imports: [
  NativeScriptModule,
  NativeScriptHttpClientModule,
  TNSFontIconModule.forRoot({
    fa: './assets/fontawesome.min.css'
  }),
  CoreModule.forRoot([
    {
      provide: PlatformLanguageToken,
      useFactory: platformLangFactory
    },
    {
      provide: PlatformWindowToken,
      useClass: TNSWindowService
    }
  ]),
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: createTranslateLoader
    }
  })
],
providers: [...CORE_PROVIDERS]
})
export class MyOrgCoreModule {
constructor(
  @Optional()
  @SkipSelf()
  parentModule: MyOrgCoreModule
) {
  throwIfAlreadyLoaded(parentModule, 'MyOrgCoreModule');
}
}

apps/nativescript-myapp/src/core/core.module.ts -> CoreModule content

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

// libs
import { MyOrgCoreModule } from '@myorg/nativescript';

@NgModule({
imports: [MyOrgCoreModule]
})
export class CoreModule {}

[NathanWalker]

@sebastiandg7 Open apps/nativescript-myapp/tsconfig.json and in the paths section add this entry:

"*": [
  "./node_modules/*"
]

We’ll be releasing an update for new {N} apps which ensures this entry is there. Lemme know and feel free to close this issue if you find solves it for you 👍

[NathanWalker]

@sebastiandg7 thanks for this. I’m working on a {N} 6.3 migration (along with Electron 7 migration) and I’ll check your condition noted as well. We don’t see this on our internal projects at moment however it’s possible that on a clean build run with npm grabbing latest patch updates could be a small adjustment for AoT needed as usually the case with that type of error.