Import NativeScriptHttpClientModule failed after upgrade to Nativescript 7 / Angular 10

[tr1et]

Environment

• CLI: 7.0.10
• Cross-platform modules:
  • "@nativescript/core": "7.0.11"
• Android Runtime:
  • "@nativescript/android": "7.0.0"
• iOS Runtime:
  • "@nativescript/ios": "7.0.2-rc1"
• Plugin(s):
  • "nativescript-accordion": "6.0.0-beta.2"
  • "nativescript-background-http": "4.2.1"
  • "nativescript-camera": "4.5.0"
  • "nativescript-carousel": "7.0.1"
  • "nativescript-clipboard": "2.0.0"
  • "nativescript-contacts": "1.6.2"
  • "nativescript-email": "1.6.0"
  • "nativescript-filterable-listpicker": "2.2.6"
  • "nativescript-google-analytics": "0.4.4"
  • "nativescript-image-cache": "1.1.6"
  • "nativescript-imagecropper": "4.0.1"
  • "nativescript-imagepicker": "7.1.0"
  • "nativescript-modal-datetimepicker": "1.2.4"
  • "nativescript-ngx-shadow": "6.5.0"
  • "nativescript-onesignal": "1.0.7"
  • "nativescript-open-app": "0.3.0"
  • "nativescript-permissions": "1.3.11"
  • "nativescript-phone": "2.0.0"
  • "nativescript-social-share": "1.6.0"
  • "nativescript-theme-core": "1.0.6"
  • "nativescript-ui-chart": "8.0.2"
  • "nativescript-ui-listview": "9.0.2"
  • "nativescript-ui-sidedrawer": "9.0.3"
  • "nativescript-websockets": "1.5.5"
  • "nativescript-windowed-modal": "7.0.0"
  • "nativescript-worker-loader": "0.12.1"
• NativeScript-Angular:
  • "@nativescript/angular": "10.1.7"
• Angular:
  • "@angular/animations": "10.1.6",
  • "@angular/cdk": "10.2.5",
  • "@angular/common": "10.1.6",
  • "@angular/compiler": "10.1.6",
  • "@angular/core": "10.1.6",
  • "@angular/forms": "10.1.6",
  • "@angular/material": "10.2.5",
  • "@angular/platform-browser": "10.1.6",
  • "@angular/platform-browser-dynamic": "10.1.6",
  • "@angular/pwa": "0.1001.7",
  • "@angular/router": "10.1.6",
  • "@angular/service-worker": "10.1.6",

Describe the bug

• Context:

  • Upgrading a Nx Angular Web/Nativescript project from Angular 9/Nativescript 6 to Angular 10/Nativescript 7
  • Both the web and mobile app are working fine in the previous version.
  • After upgrade, the web is working.

• Issues:

  • After upgrade, when build the Nativescript app, the build fail, got error:

  ERROR in Unexpected value 'NativeScriptHttpClientModule in
  /home/abc/workspace/xxx/apps/nativescript-app/node_modules/@nativescript/angular/nativescript-angular.d.ts'
  imported by the module 'XXXCoreModule in
  /home/abc/workspace/xxx/xplat/nativescript/core/core.module.ts'.
  Please add a @NgModule annotation.
  

To Reproduce

• After upgrade the project follows these guides:
  • https://nativescript.org/blog/nativescript-7-announcement/
  • https://nativescript.org/blog/upgrading-tips-for-angular-10/
  • https://nativescript.org/blog/angular-10-support/
• Run tns clean
• Run tns platform add android
• Run tns prepare android
• tns prepare android failed, got an error:

...
added 1194 packages from 606 contributors in 40.084s

29 packages are looking for funding
  run `npm fund` for details

Preparing project...
Hash: 67966b2d019e1133274a
Version: webpack 4.44.2
Time: 25515ms
Built at: 10/17/2020 2:52:39 PM
 16 assets
Entrypoint bundle = runtime.js vendor.js bundle.js
[./app.scss] 61.8 KiB {bundle} [built]
[./main.ts] 1.13 KiB {bundle} [built]
[~/package.json] external "~/package.json" 42 bytes {bundle} [optional] [built]
    + 326 hidden modules

ERROR in Unexpected value 'NativeScriptHttpClientModule in
/home/abc/workspace/xxx/apps/nativescript-app/node_modules/@nativescript/angular/nativescript-angular.d.ts'
imported by the module 'XXXCoreModule in
/home/abc/workspace/xxx/xplat/nativescript/core/core.module.ts'.
Please add a @NgModule annotation.

Executing webpack failed with exit code 2.

Expected behavior

• tns prepare android success
• Can start Android app with tns run android

Sample project

N/A

Additional context

• xplat/nativescript/core/core.module.ts

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

import { NativeScriptHttpClientModule, NativeScriptModule } from '@nativescript/angular';
import { Device } from '@nativescript/core/platform';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { CoreModule } from '@xxx/core';
import { PlatformLanguageToken, PlatformWindowToken } from '@xxx/core/services/tokens';
import { throwIfAlreadyLoaded } from '@xxx/utils';

import { PROVIDERS } from './services';
import { TNSTranslateLoader } from './services/tns-translate.loader';
import { TNSWindowPlatformService } from './services/tns-window.service';

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

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

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptHttpClientModule,
    CoreModule.forRoot([
      {
        provide: PlatformLanguageToken,
        useFactory: platformLangFactory,
      },
      {
        provide: PlatformWindowToken,
        useClass: TNSWindowPlatformService,
      },
    ]),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
      },
    }),
  ],
  providers: [...PROVIDERS],
})
export class XXXCoreModule {
  constructor(
    @Optional()
    @SkipSelf()
    parentModule: XXXCoreModule
  ) {
    throwIfAlreadyLoaded(parentModule, 'XXXCoreModule');
  }
}

• apps/nativescript-app/tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitHelpers": true,
    "noEmitOnError": true,
    "removeComments": true,
    "downlevelIteration": true,
    "skipLibCheck": true,
    "lib": ["es2017", "dom", "webworker", "es6"],
    "typeRoots": ["./node_modules/@types"],
    "baseUrl": ".",
    "paths": {
      "@xxx/core/*": ["../../libs/core/*"],
      "@xxx/core": ["../../libs/core/index.ts"],
      "@xxx/features/*": ["../../libs/features/*"],
      "@xxx/features": ["../../libs/features/index.ts"],
      "@xxx/utils/*": ["../../libs/utils/*"],
      "@xxx/utils": ["../../libs/utils/index.ts"],
      "@xxx/nativescript": ["../../xplat/nativescript/index.ts"],
      "@xxx/nativescript/*": ["../../xplat/nativescript/*"],
      "*": ["./node_modules/*"]
    }
  },
  "angularCompilerOptions": {
    "enableIvy": false
  },
  "includes": ["./references.d.ts"]
}

[timdoege]

Not a solution, but just an observation: I get the same error in a similar environment but only when actively opting out of Ivy

Toggling

  "angularCompilerOptions": {
    "enableIvy": false
  },

to true results in a successful compile for me.

[tr1et]

@timdoege , sadly some libraries the project is using don't support Ivy yet so I can't enable Ivy now (nativescript-accordion, nativescript-ngx-shadow)

[Heena-Vora]

I am having similar issue as below with NativeScriptRouterModule.

ERROR in Unexpected value 'NativeScriptRouterModule in /Users/heena/projects/mobile-app/node_modules/@nativescript/angular/nativescript-angular.d.ts' imported by the module 'AppModule in /Users/heena/projects/mobile-app/src/app/app.module.ts'. Please add a @NgModule annotation.

and same as above I can't set enableIvy to true as used nativescript-ui-charts and such other plugins in project. I tried setting it as true then code sharing stops working.

Class is using Angular features but is not decorated. Please add an explicit Angular decorator. Executing webpack failed with exit code 2.

[radu2501]

I am having the same issue regarding the NativeScriptHttpClientModule:

Compiling TypeScript sources through NGC
ERROR: Unexpected value 'NativeScriptHttpClientModule in /Users/radu_nicoara/workspace/smartcomponent-library-nativescript/node_modules/@nativescript/angular/nativescript-angular.d.ts' imported by the module 'SmartComponentsCoreModule in /Users/radu_nicoara/workspace/smartcomponent-library-nativescript/src/core/smart-components.core.module.ts'. Please add a @NgModule annotation.

An unhandled exception occurred: Unexpected value 'NativeScriptHttpClientModule in /Users/radu_nicoara/workspace/smartcomponent-library-nativescript/node_modules/@nativescript/angular/nativescript-angular.d.ts' imported by the module 'SmartComponentsCoreModule in /Users/radu_nicoara/workspace/smartcomponent-library-nativescript/src/core/smart-components.core.module.ts'. Please add a @NgModule annotation.

I am also setting "enableIvy": false. This issue does not occur when I enable Ivy, however that is not an option because I am building a library. Enabling Ivy for library packages is in my case not possible, as it breaks the builds of consuming applications.

My Angular/NativeScript dependencies:

    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/compiler-cli": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.1.0",
    "@nativescript/theme": "~3.0.0",
    "@nativescript/types": "~7.0.0",
    "@nativescript/webpack": "~4.0.0",
    "nativescript-ui-autocomplete": "^7.0.2",
    "nativescript-ui-calendar": "^7.0.2",
    "nativescript-ui-dataform": "^7.0.4",
    "nativescript-ui-listview": "^9.1.0",

[NathanWalker]

@radu2501 Ivy cannot be disabled in latest angular. Try with these deps:

"@angular/animations": "~11.1.0",
    "@angular/common": "~11.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/compiler-cli": "~11.1.0",
    "@angular/core": "~11.1.0",
    "@angular/forms": "~11.1.0",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.10",
    "@angular/router": "~11.1.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.1.0",
    "@nativescript/theme": "~3.0.0",
    "@nativescript/types": "~7.1.0",
    "@nativescript/webpack": "~3.0.0",
    "nativescript-ui-autocomplete": "^7.0.2",
    "nativescript-ui-calendar": "^7.0.2",
    "nativescript-ui-dataform": "^7.0.4",
    "nativescript-ui-listview": "^9.1.0",

Also make sure no @nativescript/angular/deep-path imports exists... all should be using @nativescript/angular everywhere in your codebase only. Also make sure npm i -g nativescript - using latest cli. Also confirm Xcode 12.3 or 12.4 is in use. Then: ns clean

And give it a run.