Skip to content

Errors whilst attempting to upgrade to angular 9 #2185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tidusjar opened this issue Jun 26, 2020 · 4 comments
Open

Errors whilst attempting to upgrade to angular 9 #2185

tidusjar opened this issue Jun 26, 2020 · 4 comments

Comments

@tidusjar
Copy link

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
Copy link

smorcuend commented Jul 1, 2020

Same issues already mentioned here: #2174

@tidusjar
Copy link
Author

tidusjar commented Jul 1, 2020

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

@smorcuend
Copy link

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants