search

NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

Import NativeScriptHttpClientModule failed after upgrade to Nativescript 7 / Angular 10 #2277

Open tr1et opened 3 years ago

tr1et commented 3 years ago

Environment

Describe the bug

To Reproduce

...
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

Sample project

N/A

Additional context

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');
  }
}
{
  "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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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.