Skip to content

When NativeScript will support Angular 10 ? #2181

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.

Sign up for GitHub

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

Jump to bottom
Closed
zhaoyouliang opened this issue Jun 24, 2020 · 88 comments · Fixed by #2189
Closed

When NativeScript will support Angular 10 ? #2181

zhaoyouliang opened this issue Jun 24, 2020 · 88 comments · Fixed by #2189
Assignees
@NathanWalker
Labels
in progress

Comments

@zhaoyouliang
Copy link

Hi, my question is when native script will support angular 10. The background is that we use Angular + NativeScript for cross platform development (Web IOS). Now we need to upgrade angular 10 and confirm whether native script supports it.
This is very important. Look forward to your reply. thanks
@NathanWalker
Copy link
Contributor

NathanWalker commented Jun 26, 2020 •
edited
Loading

We have a branch started and expect releasing support the week after July 4th.

@NathanWalker NathanWalker self-assigned this Jun 26, 2020
@NathanWalker NathanWalker mentioned this issue Jul 2, 2020
Merged
@lamqson
Copy link

lamqson commented Jul 7, 2020

Hello,

Would you have any update on this PR? Our team is anxiously waiting for it. We have just started with Angular 10 and it work amazingly fast. We would love to have our NativeScript part on Angular 10 as well.

Thanks so much.

@funder7
Copy link

funder7 commented Jul 10, 2020

v9 support is still on the way, I don't think that v10 will be supported soon

@spencerfontein
Copy link

It has been a week since the 4th, any update?

@betosalvador
Copy link

Hi @NathanWalker , man, I did see that you are working a lot to improve nativescript. I appreciate a lot what you guys at NSTUDIO are doing, thank you so much. I am very anxious to use NS with Angular V10. If you can, please, share with us a possible release date. God bless you!

@NathanWalker
Copy link
Contributor

We were doing some additional testing against some other project setups but planning to publish by end of tomorrow and a beta will be available by midday today that’d be great to have you try. Will post back when that tag is on npm - it will need some cli updates as well to support scoped packages.

@NathanWalker
Copy link
Contributor

@funder7 v9 support was published weeks ago at beginning of June.

@NathanWalker
Copy link
Contributor

Angular 10 support is fully working in the linked PR here.

@betosalvador
Copy link

Thanks for your response, @NathanWalker. Here in my company we are using Angular+NS Shared Code. We use @nativescrit/schematics to work. Do you know if @nativescript/schematics will be in the same stage for angular 10? Thanks man"

@NathanWalker
Copy link
Contributor

NathanWalker commented Jul 14, 2020 •
edited
Loading

@betosalvador @spencerfontein @lamqson @zhaoyouliang We're working on a blog post with update instructions but before we officially release (targeting eod tomorrow) you can try the following:

  • npm i -g nativescript@rc (cli updated required for new scoped packages)
  • Use this package.json (in part) as sample of correct dependencies and scripts that should be used to try it:
"scripts": {
  "clean": "npx rimraf hooks node_modules package-lock.json platforms && npm i",
  "postinstall": "npm run ngcc",
  "ngcc": "ngcc --properties es2015 module main --first-only"
},
"dependencies": {
        "@angular/animations": "~10.0.0",
        "@angular/common": "~10.0.0",
        "@angular/compiler": "~10.0.0",
        "@angular/core": "~10.0.0",
        "@angular/platform-browser": "~10.0.0",
        "@angular/platform-browser-dynamic": "~10.0.0",
        "@angular/router": "~10.0.0",
        "@nativescript/angular": "~10.0.0-alpha.0",
        "@nativescript/core": "~7.0.0-rc.12",
        "rxjs": "^6.6.0",
        "zone.js": "^0.10.3"
},
"devDependencies": {
        "@angular/cli": "~10.0.0",
        "@angular/compiler-cli": "~10.0.0",
        "@angular/language-service": "~10.0.0",
        "@nativescript/schematics": "~10.0.0-alpha.0",
        "@ngtools/webpack": "~10.0.0",
        "codelyzer": "~6.0.0",
        "@nativescript/webpack": "~2.0.0-alpha.3",
        "node-sass": "^4.14.1",
        "typescript": "~3.9.0"
    },

Then delete your webpack.config.js file and let the clean/install replace it. (You can view your git changeset to keep any custom sections you need.

Then: npm run clean and try running your app. Please let me know when get a chance.

@betosalvador
Copy link

Hey man, thank you very much,

I'll test today!

@ceelian
Copy link

ceelian commented Jul 15, 2020

@funder7 v9 support was published weeks ago at beginning of June.

Interesting, I only find the nativescript-angular release 8.21 on github releases and it is from February, same on npm. Do I look at the wrong place?

@james-criscuolo
Copy link

@ceelian, nativescript-angular was deprecated in favor of @nativescript/angular, its last update was 8.21.0. @nativescript/angular has the 9.0.0 update. The scoped and unscoped dependencies had been updated together for a while, so I'm not sure whether leaving the unscoped behind was intentional or not, but its a good idea to switch to the scoped if you can.

@NathanWalker
Copy link
Contributor

NathanWalker commented Jul 15, 2020 •
edited
Loading

That's correct all {N} packages are moving to @NativeScript npm scope and we're making a push to get as many there by 7.0 as possible. We're writing a blog post with further details on Angular 10 update instructions, etc.

@sublime392
Copy link

sublime392 commented Jul 17, 2020 •
edited
Loading

I feel like I am close @NathanWalker, but I am stuck at a point where I have a bunch of errors like this:
ERROR in ../node_modules/nativescript-ui-sidedrawer/angular/side-drawer-directives.js Module not found: Error: Can't resolve 'nativescript-angular/element-registry'

I am coming from a working Angular 9 version. This reminds me of the errors I had when upgrading to ng9 before I worked out the ngcc.config.js file. I have shotgunned all the entries I could think of into there, but no joy.

"nativescript-ui-sidedrawer": {
      entryPoints: {
        "angular": {
          override: {
            main: "./side-drawer-directives.js",
            typings: "./side-drawer-directives.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /nativescript-angular\//,
        /nativescript-angular\/element-registry\//,

        /@nativescript\/angular\/element-registry\//,
        /@nativescript\/angular\//
      ]
    },

@funder7
Copy link

funder7 commented Jul 18, 2020

@sublime392 are you using @nativescript/angular instead of nativescript-angular?

@Meyer-dev
Copy link

Meyer-dev commented Jul 18, 2020 via email

@NathanWalker
Copy link
Contributor

@sublime392 You can use "nativescript-ui-sidedrawer": "rc" then clean/rebuild - the rc of sidedrawer and listview have been updated in rc to work with all latest.

@NathanWalker
Copy link
Contributor

@Meyer-dev You don't need deep imports anymore...anywhere. Your app/about/about.component can just be updated to remove the import from @nativescript/angular/common to just @nativescript/angular

@Meyer-dev
Copy link

Meyer-dev commented Jul 18, 2020 via email

@NathanWalker
Copy link
Contributor

@Meyer-dev Definitely would like to run that project and see - possible to send email to [email protected] with a way to download the project by chance to keep it private?

@sublime392
Copy link

@NathanWalker thanks. Using the 'rc' branch cleared the errors for those two. Now I just have a bunch of libs throwing an error (because they are trying to do a deep import on @nativescript/angular?).
Example:

ERROR in ../node_modules/nativescript-material-cardview/angular/index.js
Module not found: Error: Can't resolve '@nativescript/angular/element-registry'

I don't imagine many of these will be updated anytime soon. Is there some sort of configuration magic that can be done?

@Meyer-dev
Copy link

Meyer-dev commented Jul 20, 2020 via email

@NathanWalker
Copy link
Contributor

NathanWalker commented Jul 20, 2020 •
edited
Loading

@Meyer-dev awesome good to hear. So yes you can actually switch that to "@nativescript/firebase": "rc" and can update you imports of nativescript-plugin-firebase to just @nativescript/firebase (can be flattened all to that if you had deep imports as well. Lemme know 👍

Clean/rebuild after that switch.

@NathanWalker
Copy link
Contributor

@sublime392 I'll look at compat lib but I'll also look at that plugin and let ya know (hopefully by this evening)

@Meyer-dev
Copy link

Meyer-dev commented Jul 20, 2020 via email

@NathanWalker
Copy link
Contributor

@Meyer-dev for this error error TS2339: Property 'getRootView' does not exist ..., just open your logout.component and modify to Application.getRootView().

For the const sideDrawer assignment, switch to this:

import { getViewById, Application } from '@nativescript/core';

let drawer: any = getViewById(Application.getRootView(), 'drawer');

And drop a id="drawer" on your RadSideDrawer.

@juniorschen
Copy link

@NathanWalker
Sorry I didn't understand what "RLV" meant
Its node_modules version?
image

@NathanWalker
Copy link
Contributor

@juniorschen oh sorry, RLV === RadListView = curious to see your view markup where you're using the RadListView.

@juniorschen
Copy link

@NathanWalker I created a repository where the problem happens, all I did was follow this document and finally add the radlist:
Git: https://github.com/juniorschen/RadList_Bug
Doc:
image

@NathanWalker
Copy link
Contributor

ok excellent this is helpful, will check it out.

@NathanWalker
Copy link
Contributor

@juniorschen We greatly appreciate you reporting that. There were 2 classes in RadListView for Android which needed NativeClass decorations. Please use nativescript-ui-listview: ~9.0.1, then clean/rebuild and you'll see it working just fine on Android again. Thanks again.

@juniorschen
Copy link

@NathanWalker
Thank you very much for the support, everything worked perfectly, there’s one more little thing I noticed, maybe it’s not a problem:

ts An async function or method in ES5 / ES3 requires the 'Promise' constructor

This happens when generating the project and using lazy routes, it is a tsconfig module configuration, but the default is to make lazy routes correct?
So shouldn't schematics configure this way?

@NathanWalker
Copy link
Contributor

@juniorschen We'll take a look, yes you're correct the schematics should be using the import(.. syntax on lazy module/routes.

@juniorschen
Copy link

@NathanWalker The same problem with RadList seems to be repeated with the use of Tabs such as:
https://docs.nativescript.org/angular/ui/ng-components/tabs
This is the problem:
image

@juniorschen
Copy link

@NathanWalker
I push the repo with this case:
https://github.com/juniorschen/RadList_Bug

@NathanWalker
Copy link
Contributor

NathanWalker commented Aug 10, 2020 •
edited
Loading

@juniorschen thank you once again for excellent reporting - indeed the PagerAdapter needed to be decorated. If you clean completely and re-run, the latest core rc now fixes that as well 👍 Specifically the fix is in 7.0.0-rc.49

@juniorschen
Copy link

@NathanWalker
when i add lazy routes and try to close the app using the smarthphone back button i have the following error:
image
I already in the latest versions of @nativescript-angular and core in the 7.0.0-rc.49.
I pushed from my branch this error:
https://github.com/juniorschen/RadList_Bug

@juniorschen
Copy link

@NathanWalker I also realized that in debug mode I have this message on screen, I really don't know very well what the lack of this function can cause in the final size of my app or functionality.
image

@NathanWalker
Copy link
Contributor

Are you using @nativescript/webpack 2.1.1? - If so curious if you deleted your webpack.config and let it regenerate you a new one with that latest version?

@juniorschen
Copy link

@NathanWalker I didn't know about this version, the newest shematics are still generating in version 2.0.0, when I upgraded to 2.1.1 and tried to update my webpack I had the following problem:
image

@NathanWalker
Copy link
Contributor

@juniorschen just delete your webpack.config.js entirely - vs. using the .bin script - We will probably update that bin script in the next week but confirming some other 7.0 details. When you clean/rerun your project it will auto add a webpack.config back to your project.

@juniorschen
Copy link

@NathanWalker
Ok I did the procedure and don't have any more problems closing the app when using the back button, but I still have this message that I don't understand what it can mean:
image

For being in the webpack this scares me, because the final size of the app is very important, but I don't understand enough about it yet.
Thank you very much for your support.

@juniorschen
Copy link

@NathanWalker
Testing support still not working?
image

@bastienlemaitre
Copy link

bastienlemaitre commented Aug 18, 2020 •
edited
Loading

@NathanWalker, is it possible to reopen the issue ?

I've tried to add this code in ngcc.json:

  "nativescript-ui-listview": {
      entryPoints: {
        "angular": {
          override: {
            main: "./listview-directives.js",
            typings: "./listview-directives.d.ts",
          },
          ignoreMissingDependencies: true,
        }
      },
      ignorableDeepImportMatchers: [
        /tns-core-modules\//,
        /@nativescript\/core\//,
        /@nativescript\/angular\//
      ]
    }

Got same error..

@NathanWalker
Copy link
Contributor

NathanWalker commented Aug 19, 2020 •
edited
Loading

@juniorschen testing support is in progress.

@bastienlemaitre remove nativescript-ui-listview from ngcc.config, not needed for Angular 10 and ensure you're using latest version "nativescript-ui-listview": "~9.0.1", then clean/rebuild.

@nabilzhafri
Copy link

nabilzhafri commented Aug 19, 2020 •
edited
Loading

@NathanWalker do you guys face any issue when running ios with release/production flag?

JavaScript error:
file:///app/vendor.js:107546:15: JS ERROR ReferenceError: Can't find variable: __metadata
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: ReferenceError: Can't find variable: __metadata
at
file:///app/vendor.js:107546:15
at __webpack_require__(file:///app/runtime.js:75:34)
at file:///app/vendor.js:98208:90
at file:///app/vendor.js:99056:34
at __webpack_require__(file:///app/runtime.js:75:34)

I received this error even when I created project from scratch, as described here: https://nativescript.org/blog/upgrading-tips-for-angular-10/

npm i -g @angular/cli // You could be needing to prefix sudo on GNU/Linux and other Unix-like OSes.
npm i -g nativescript // You could be needing to prefix sudo on GNU/Linux and other Unix-like OSes.
npm i -g @nativescript/schematics // You could be needing to prefix sudo on GNU/Linux and other Unix-like OSes.

ng new workspace
cd workspace
ng add @nativescript/schematics --skipAutoGeneratedComponent

// start apps:
npm run ios --> OK
npm run ios -- --release --> Causing error
npm run ios -- --env.production --> Causing error

@bastienlemaitre
Copy link

@NathanWalker, works. Thx !

@lonerzzz
Copy link

lonerzzz commented Sep 3, 2020

@NathanWalker You mentioned (#2181 (comment)) that you were looking into compat lib etc for these plugins. Is there a way to work around the deep linking? I have issues with nativescript-drop-down caused by the same element-registry deep linking.

@edusperoni
Copy link
Collaborator

Something that may help is creating a nscc (NativeScript Compatibility Compiler, similar to ngcc) that scans for plugins and converts their imports to the new format. Updating nativescript-angular to 7.0 and having it export the old files with the new imports may also help for plugins that didn't switch to @nativescript/angular.

@xuhcc
Copy link

xuhcc commented Sep 5, 2020

How to re-create webpack.config.js? I tried to upgrade to Angular 10 following this post https://nativescript.org/blog/upgrading-tips-for-angular-10/ but when I run the app it fails because webpack.config.js is missing.

Also, where's the source code for @nativescript/webpack? https://github.com/NativeScript/nativescript-dev-webpack is not up to date.

@NathanWalker
Copy link
Contributor

@xuhcc source is here:
https://github.com/NativeScript/NativeScript/tree/master/packages/webpack

We will probably archive that old repo soon. Run ‘ns clean’ to make sure node_modules is clear. Then ‘npm I’ and upon installation of dependencies it will add the webpack.config as a postinstall step.

@xuhcc
Copy link

xuhcc commented Sep 5, 2020

@NathanWalker I tried to ns clean and reinstall, but webpack config is not being created. This part of installation log seems relevant:

> @nativescript/[email protected] postinstall ./node_modules/@nativescript/webpack
> node postinstall.js

Skipping postinstall artifacts! We assumed the @nativescript/webpack is installing devDependencies

The same message appears with @nativescript/webpack 2.1 and 3.0. I'm using nativescript-cli v7.0.6 and @nativescript/core 6.5.17 (I can not fully migrate to @nativescript/core 7.0 yet because some plugins that I'm using are not compatible with it).

@rickwalking
Copy link

rickwalking commented Sep 5, 2020 •
edited
Loading

Hi @NathanWalker, Is it okay to use yarn instead of npm? Because I install all dependencies and then try to run tns run android --env.aot, but all dependencies are installed again using npm.

@rigor789
Copy link
Member

rigor789 commented Sep 5, 2020

@rickwalking ns package-manager set yarn to make it the default.

@24jr
Copy link

24jr commented Dec 15, 2020 •
edited
Loading

we aren't using angular but a package we are using that hasn't been updated is

ERROR in ../node_modules/nativescript-image-cache/ns-image-cache.js
Module not found: Error: Can't resolve 'nativescript-angular/element-registry'

Is there a way to fix this or a newer package similar to this package that we should use?

@juniorschen
Copy link

@24jr
No way to fix it unless you upgrade the plugin, but in your case you have a nativescript solution: https://docs.nativescript.org/ui/components/image-cache

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@NathanWalker NathanWalker

Labels
in progress
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(angular): support for v10 NativeScript/nativescript-angular