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

Errors whilst attempting to upgrade to angular 9 #2185

Open tidusjar opened 4 years ago

tidusjar commented 4 years ago

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

√ Getting NativeScript components versions information...
√ Component nativescript has 6.7.6 version and is up to date.
√ Component tns-core-modules has 6.5.8 version and is up to date.
√ Component @nativescript/core has 6.5.8 version and is up to date.
√ Component tns-android has 6.5.1 version and is up to date.

Package.json

{
    "nativescript": {
        "id": "AppName",
        "tns-android": {
            "version": "6.5.1"
        }
    },
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "repository": "<fill-your-repository-here>",
    "scripts": {
        "lint": "tslint \"src/**/*.ts\"",
        "ngcc": "ngcc --properties es2015 module main --first-only",
        "postinstall": "npm run ngcc"
    },
    "dependencies": {
        "@angular/animations": "~9.1.0",
        "@angular/common": "~9.1.0",
        "@angular/compiler": "~9.1.0",
        "@angular/compiler-cli": "~9.1.0",
        "@angular/core": "~9.1.0",
        "@angular/forms": "~9.1.0",
        "@angular/platform-browser": "~9.1.0",
        "@angular/platform-browser-dynamic": "~9.1.0",
        "@angular/router": "~9.1.0",
        "@danvick/ngx-translate-nativescript-loader": "^2.0.0",
        "@nativescript/angular": "^9.0.0",
        "@nativescript/core": "~6.5.0",
        "@nativescript/theme": "^2.3.2",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "@nstudio/nativescript-cardview": "^1.0.0",
        "@nstudio/nativescript-loading-indicator": "^3.0.3",
        "@nstudio/nativescript-pulltorefresh": "^1.1.1",
        "nativescript": "^6.7.6",
        "nativescript-angular": "^8.21.0",
        "nativescript-barcodescanner": "^3.4.2",
        "nativescript-carousel": "^6.1.1",
        "nativescript-feedback": "^1.4.0",
        "nativescript-material-button": "^3.2.8",
        "nativescript-material-textfield": "^3.2.8",
        "nativescript-plugin-firebase": "^10.5.2",
        "nativescript-purchase": "^2.0.13",
        "nativescript-ui-autocomplete": "^6.0.1",
        "nativescript-ui-listview": "^8.0.1",
        "nativescript-ui-sidedrawer": "^8.0.0",
        "reflect-metadata": "~0.1.12",
        "rxjs": "~6.5.5",
        "tns-core-modules": "^6.5.8",
        "typescript": "~3.8.3",
        "zone.js": "^0.10.3"
    },
    "devDependencies": {
        "@angular/compiler-cli": "~9.1.0",
        "@ngtools/webpack": "~9.1.0",
        "nativescript-dev-webpack": "~1.5.0",
        "typescript": "~3.8.3",
        "codelyzer": "~4.5.0",
        "node-sass": "^4.7.1",
        "tslint": "~5.19.0"
    },
    "gitHead": "a6fec076a20f898feabb4466a2c411158c18a100",
    "readme": "NativeScript Application"
}

Describe the bug When running tns run android --env.aot I get a lot of errors complaining about the internal nativescript-angular modules, a subset of the errors are below


ERROR in node_modules/nativescript-angular/node_modules/@nativescript/angular/router/router.module.d.ts:13:22 - error NG6002: Appears in the NgModule.imports of LoginRoutingModule, but could not be resolved to an NgModule class.

This likely means that the library (nativescript-angular/router) which declares NativeScriptRouterModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

13 export declare class NativeScriptRouterModule {
                        ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/nativescript-angular/node_modules/@nativescript/angular/router/router.module.d.ts:13:22 - error NG6003: Appears in the NgModule.exports of LoginRoutingModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (nativescript-angular/router) which declares NativeScriptRouterModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

13 export declare class NativeScriptRouterModule {
                        ~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/nativescript-material-textfield/angular/index.d.ts:3:22 - error NG6003: Appears in the NgModule.exports of SharedModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.    

This likely means that the library (nativescript-material-textfield/angular) which declares NativeScriptMaterialTextFieldModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

To Reproduce Run tns run android --env.aot

Sample project Currently a private repo, can provide if needed.

Additional context I have also run a npm install, removed and re-added the android application. This application also was working fine before following the Angular 9 upgrade instructions: https://github.com/NativeScript/nativescript-angular/wiki/Updating-and-developing-for-@nativescript-angular-v9-with-Ivy-or-without#problem-2

smorcuend commented 4 years ago

Same issues already mentioned here: https://github.com/NativeScript/nativescript-angular/issues/2174

tidusjar commented 4 years ago

Just read through that, the actual issue from that thread seems quite different to what I am experiencing

smorcuend commented 4 years ago

For nativescript-angular Error you can change to new npm package @nativescript/angular": "~9.0.0 Anyway you need to play with ngcc.congif.js until vendor packages will be exported the right way

  packages: {
    '@nativescript/angular': {
      entryPoints: {
        '.': {
          override: {
            main: './index.js',
            typings: './index.d.ts',
          },
          ignoreMissingDependencies: true,
        },
      },
      ignorableDeepImportMatchers: [/zone.js\//, /tns-core-modules\//, /@nativescript\/core\//],
    },
    'nativescript-datetimepicker': {
      entryPoints: {
        '.': {
          override: {
            main: './index.js',
            typings: './index.d.ts',
          },
          ignoreMissingDependencies: true,
        },
        angular: {
          override: {
            main: './index.js',
            typings: './index.d.ts',
          },
          ignoreMissingDependencies: true,
        },
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//,
      ],
    },
    'nativescript-ui-sidedrawer': {
      entryPoints: {
        '.': {
          override: {
            main: './ui-sidedrawer.common.js',
            typings: './index.d.ts',
          },
          ignoreMissingDependencies: true,
        },
        angular: {
          override: {
            main: './side-drawer-directives.js',
            typings: './side-drawer-directives.d.ts',
          },
          ignoreMissingDependencies: true,
        },
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//,
      ],
    },
    'nativescript-material-bottomnavigationbar': {
      entryPoints: {
        angular: {
          override: {
            main: './index.js',
            typings: './index.d.ts',
          },
          ignoreMissingDependencies: true,
        },
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//,
      ],
    },
  },
};

You can take a look at the first block refered to nativescript/angular, this reference should remove your error. References to nativescript-angular into your code must be changed.

For nativescript-material-textfield the process follows the same pattern.

Greetings

NathanWalker commented 4 years ago

@tidusjar Also be careful with mix-matched dependencies - I see in your posted package.json you have this in there "nativescript-angular": "^8.21.0", alongside @nativescript/angular ~9.0.0 - You only need the ladder and should remove nativescript-angular entirely.