Nativescript-angular: When NativeScript will support Angular 10 ?

[zhaoyouliang]

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]

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

[lamqson]

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]

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

[spencerfontein]

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

[betosalvador]

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]

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]

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

[NathanWalker]

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

[betosalvador]

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]

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

Hey man, thank you very much,

I'll test today!

[ceelian]

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

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

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]

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]

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

[Meyer-dev]

@sublime392 I'm having the same issue as well as many of the form :

ERROR in ./app/about/about.component.ts
Module not found: Error: Can't resolve '@nativescript/angular/common' in
'C:\Users\meyer.000\Pronto\src\app\about'
@ ./app/about/about.component.ts 4:0-51 54:22-43 54:45-73 54:75-97
@ ./app/about/about.module.ts
@ ./app/app-routing.module.ts
@ ./app/app.module.ts
@ ./main.ts

Have you managed to find a solution thus far?

On Fri, 17 Jul 2020 at 22:44, Andy Winter [e-mail] wrote:

I feel like I am close @NathanWalker https://github.com/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\//
  ]
},

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/2181#issuecomment-660329465,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHNDDIANRYZEDRWNJ7UWAELR4CZ27ANCNFSM4OGQGOLA
.

[NathanWalker]

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

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

Thanks @NathanWalker https://github.com/NathanWalker . I have tried
removing the deep imports. For some reason, no matter what I do, the same
error msgs appear. They all look like

ERROR in ./app/about/about.component.ts
Module not found: Error: Can't resolve '@nativescript/angular/common' in
'C:\Users\meyer.000\Pronto\src\app\about'
@ ./app/about/about.component.ts 4:0-51 54:22-43 54:45-73 54:75-97
@ ./app/about/about.module.ts
@ ./app/app-routing.module.ts
@ ./app/app.module.ts
@ ./main.ts

ERROR in ./app/addresSearch/addresSearch.component.ts
Module not found: Error: Can't resolve '@nativescript/angular/common' in
'C:\Users\meyer.000\Pronto\src\app\addresSearch'
@ ./app/addresSearch/addresSearch.component.ts 9:0-51 73:22-42
@ ./app/addresSearch/addresSearch.module.ts
@ ./app/storeselection/storeselection.module.ts
@ ./app/app-routing.module.ts
@ ./app/app.module.ts
@ ./main.ts

The weird thing is that those error msgs are displaying after I've cleaned
it and I don't have deep imports in my components.

I'm building with nsc build android --clean after manually deleting
platforms,node_modules,hooks and package.json lock as well as webpack. I've
also tried copying and pasting the webpack file from the blog post link.no
success.

My package.json file is as follows

{
"nativescript": {
"id": "org.nativescript.Pronto",
"profiling": "timeline",
"tns-ios": {
"version": "6.5.0"
},
"tns-android": {
"version": "6.5.3"
}
},
"android": {
"markingMode": "none"
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"repository": "",
"scripts": {
"lint": "tslint \"src/*/.ts\"",
"clean": "npx rimraf hooks node_modules package-lock.json platforms",
"ngcc": "ngcc --properties es2015 module main --first-only",
"postinstall": "npm run ngcc"
},
"dependencies": {
"@angular/animations": "~10.0.0",
"@angular/common": "~10.0.0",
"@angular/compiler": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/http": "8.0.0-beta.10",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"@nativescript/angular": "rc",
"@nativescript/core": "rc",
"@nativescript/theme": "~2.3.0",
"@nstudio/nativescript-cardview": "^1.0.0",
"android": "0.0.8",
"extension": "^0.2.0",
"nativescript-accordion": "^6.0.0-beta.2",
"nativescript-algolia": "^1.2.2",
"nativescript-google-maps-sdk": "^2.9.1",
"nativescript-google-places-autocomplete": "^1.0.3",
"nativescript-imagepicker": "^7.1.0",
"nativescript-lottie": "^4.0.1",
"nativescript-material-components": "^1.2.1",
"nativescript-material-dialogs": "2.3.24",
"nativescript-material-slider": "2.3.24",
"nativescript-material-textfield": "^2.3.24",
"nativescript-plugin-firebase": "10.5.2",
"nativescript-speech-recognition": "^1.5.0",
"nativescript-statusbar": "^5.0.0",
"nativescript-theme-core": "1.0.6",
"nativescript-ui-dataform": "6.0.0",
"nativescript-ui-listview": "rc",
"nativescript-ui-sidedrawer": "rc",
"platform": "^1.3.5",
"reflect-metadata": "0.1.13",
"rxjs": "^6.5.5",
"uglifyjs-webpack-plugin": "2.2.0",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@angular/compiler-cli": "~10.0.0",
"@nativescript/types": "rc",
"@nativescript/webpack": "rc",
"@ngtools/webpack": "~10.0.0",
"@phenomnomnominal/angular-lazy-routes-fix": "^0.1.5",
"codelyzer": "5.2.2",
"jscrambler-webpack-plugin": "5.5.0",
"node-sass": "^4.13.1",
"tslint": "^6.1.1",
"typescript": "~3.9.0"
},
"readme": "NativeScript Application"
}

On Sat, 18 Jul 2020 at 21:06, Nathan Walker [e-mail]
wrote:

@Meyer-dev https://github.com/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

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/2181#issuecomment-660527266,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHNDDIHULCAUJN3KWTRKFF3R4HXE5ANCNFSM4OGQGOLA
.

[NathanWalker]

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

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

@NathanWalker https://github.com/NathanWalker I managed to get it
working by running the project first. It built and then crashed with the
same issues on startup. I then simultaneously flattened all imports by
searching @nativescript/angular/common and replaced it
with @nativescript/angular in VS code; when it automatically restarted all
those errors disappeared. Don't know why that worked but glad it did. The
rc branch of modules mentioned in emails above also cleared a few more
errors. The errors I have now are related to nativescript-plugin-firebase
but I think we will need to wait for Eddy Verbruggen to update that first?
Thanks again for all your efforts.

On Mon, 20 Jul 2020 at 16:55, Andy Winter [e-mail] wrote:

@NathanWalker https://github.com/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?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/2181#issuecomment-661090676,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHNDDIFB4MWA267G37G47MDR4RLFBANCNFSM4OGQGOLA
.

[NathanWalker]

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

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

@NathanWalker @nativescript/firebase seems to do the trick. I actually
found it when I went to go look at PRs for updates, found your things. Feel
very comfortable about it being under @nativescript/firebase. What I
believe is my last obstacle is the Error:

ERROR in src/app/logout/logout.component.ts:56:47 - error TS2339: Property
'getRootView' does not exist on type 'typeof
import("C:/Users/meyer.000/Pronto/node_modules/tns-core-modules/application/index")'.

const sideDrawer = app.getRootView();

Is the API still the same as in template for sidedrawer on marketplace? I
have seen the drawer being accessed using:

// @ViewChild(RadSideDrawerComponent, { static: false }) public
drawerComponent: RadSideDrawerComponent;

// private drawer: RadSideDrawer;

// ngAfterViewInit() {
// this.drawer = this.drawerComponent.sideDrawer;
// }
is that the way to go?

im using the module : "nativescript-ui-sidedrawer": "rc",

On Mon, 20 Jul 2020 at 22:19, Nathan Walker [e-mail]
wrote:

@sublime392 https://github.com/sublime392 I'll look at compat lib but
I'll also look at that plugin and let ya know (hopefully by this evening)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/2181#issuecomment-661311908,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHNDDIHZNZTRFGZWMEOE3L3R4SRG3ANCNFSM4OGQGOLA
.

[NathanWalker]

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

[Meyer-dev]

@NathanWalker. Great, thanks a lot! Managed to get my project to build and
the sidedrawer seems to be working using the above suggestion.

On Tue, 21 Jul 2020, 8:47 am Nathan Walker [e-mail] wrote:

@Meyer-dev https://github.com/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.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/2181#issuecomment-661669039,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHNDDICH27S3R72LWOR6XWDR4U2YXANCNFSM4OGQGOLA
.

[NathanWalker]

ok great @Meyer-dev thanks for update - we found a few other issues with Angular 10 and pushing out some new rc's today so will ping back when those are out and you'll be able to just clean/rebuild your project to pull the new rc's down of it all and will be great to confirm towards eod how things are looking in your project when those new ones go out.

[NathanWalker]

ok @Meyer-dev new rc's are up for @nativescript/angular, nativescript-ui-listview and nativescript-ui-sidedrawer, assuming you have those set at rc in your project already, can just clean/rebuild - should work same and/or better in some cases so lemme know if you run into anything else and we're looking at making those official soon (next couple days)

[NathanWalker]

Oh also the new rc's of nativescript-ui-listview and nativescript-ui-sidedrawer are built with ng-packagr so you can also remove those from ngcc.config.js now completely as they are fully Ivy and Angular 10 compliant now 👍

[NathanWalker]

@sublime392 we're working on updating the nativescript-material-cardview and other material components now as well - best estimate would be tomorrow or thursday as we are working in ng-packagr into those which requires a slightly different folder structure to build it out ready for publishing. Will post back when rc's of those are posted out.

[Meyer-dev]

@NathanWalker. I updated to the latest modules and also ran
@nstudio/nativescript-cardview as 'rc' (that got rid of some errors) and
cleaned up ngcc.config.js file. Managed to get my project to build and it
run with no initial errors! Great work :) I have however noticed that the
ActionBar has some UI changes. The NavigationButton and ActionItem have
dropped and lie at the bottom of the ActionBar. It seems a lot snappier and
performance looks better on firebase testlab. Im also running codeCache
:true now and look forward to hearing the teams recommendations on that in
future :)

On Tue, 21 Jul 2020 at 21:40, Nathan Walker [e-mail]
wrote:

@sublime392 https://github.com/sublime392 we're working on updating the
nativescript-material-cardview and other material components now as well -
best estimate would be tomorrow or thursday as we are working in
ng-packagr into those which requires a slightly different folder
structure to build it out ready for publishing. Will post back when rc's of
those are posted out.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/2181#issuecomment-662067180,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHNDDIFD6TCCKBVGIXEZ7V3R4XVKRANCNFSM4OGQGOLA
.

[NathanWalker]

@Meyer-dev btw you should try switching your iOS runtime to the v8 beta for another extra perf boost (it also has much cleaner console log output in terminal):
Just set:

"tns-ios": "beta-v8"

We are actually already using that in app store deployments today with great success. Only reason it's still in beta is because we have one other change to make in the {N} cli to fully support scoped runtimes since that will be published as the first @nativescript/ios scoped runtime release but that's coming soon.

Perhaps a zoom session in next couple days to look at your actionbar issue, would be a good one to collab with you on 👍

[miguelarcan]

@NathanWalker , I love nativescript, very much.

I have to start a new project and I want to use NS, but my boss dont like the ideia of use RC version?

Do you have any idea when V10 + schematics10 final release will be available (any date you give me will help to convince him, since that date to be precisely).

thank you very much

hugs

[NathanWalker]

@miguelarcan i understand your boss :) we’ll officially release the major version bumps this week by Friday at latest- just updating several high use plugins to officially support ivy in angular 10 and updating nativescript/schematics and xplat as a lot of people use those to develop with the stack in general.

[miguelarcan]

@NathanWalker , thanks man.

Very good to know that. :)

[NathanWalker]

@sublime392 quick update, PR posted here to material plugin: https://github.com/Akylas/nativescript-material-components/pull/159
Should have it wrapped up with ng-packagr builds by tuesday afternoon with some rc's there as well to qualify. Once several rc updates across the board have checked out we'll publish the final major versions this week.

[NathanWalker]

@sublime392 @lamqson Ok material plugins have been published with Ivy support and Angular 10 as well as all the latest rc's mentioned in the Angular 10 blog post. To coincide the scoping with {N} 7.0 a number of community plugins will join this OSS scope as well to clearly identify what are {N} community plugins vs. {N} internal (managed by TSC [technical steering committee]). You can now try these if you're using material plugins with {N} and Angular 10:

https://www.npmjs.com/search?q=%40nativescript-community%2Fui-

For example if using material tabs, just switch dependencies to this:

"@nativescript-community/ui-material-tabs": "latest"

And can just update imports in your project to use it:

import { NativeScriptMaterialTabsModule } from "@nativescript-community/ui-material-tabs/angular";

Please let us know if this gets you going with all the material components in your Angular 10 updates 👍

[NathanWalker]

All ui pro suite plugins have now also been updated for latest rc's and Angular 10:

"nativescript-ui-autocomplete": "rc",
"nativescript-ui-calendar": "rc",
"nativescript-ui-chart": "rc",
"nativescript-ui-dataform": "rc",
"nativescript-ui-gauge": "rc",
"nativescript-ui-listview": "rc",
"nativescript-ui-sidedrawer": "rc"

Please help us qualify these against any of your projects updating to Angular 10 and let us know if any issues. We will publish final release versions this Friday given all checks out.

[Log3n]

@NathanWalker I just upgraded our project to ng 10 and noticed that the new default webpack.config might not support custom application classes for android via a custom webpack.config extension file anymore.

const entries = { bundle: entryPath };

overwrites changes made in the custom webconfig.
I also noticed that my custom application class is crashing with

System.err: Caused by: com.tns.NativeScriptException: Error calling module function
System.err: TypeError: Cannot read property 'setNative' of undefined.

Did you confirm that custom android application classes still work or did I miss some changes on how to create custom application classes? Thanks.

[funder7]

@NathanWalker I'm updating an angular based plugin to v10, it's registering a new element by following this procedure.
Everything seems ok, except for one error when building the application:

ERROR in Symbol CreditCardViewDirective declared in /<path>/node_modules/nativescript-stripe/angular/nativescript-stripe.directives.d.ts is not exported from nativescript-stripe/angular/nativescript-stripe.module (import into /<my-app>/src/app/home/home.component.ts)
Webpack compilation complete.

In case you need the plugin, you can clone the forked version

[NathanWalker]

@Log3n thanks for report, we're looking at that.

@funder7 thanks for fork, i believe this https://github.com/funder7/nativescript-stripe/blob/feature/nativescript-7-compat/src/angular/nativescript-stripe.module.ts#L11 require will be the main issue. In using ng-packagr to build angular bits of the plugin the angular source needs to be split out from the main plugin source and is built and then put alongside the rest of plugin. I'll add a PR to that fork to show you how it's done. The changeset I post there and have posted to several other plugins will be put into a blog post describing the procedure to add ng-packagr to make Ivy compatible {N} plugins.

[funder7]

is that require importing the whole parent folder? You're welcome for the PR, can you also take a look at the tsconfig please, and check if it's up to date? thank you

[NathanWalker]

@Log3n possible to share a project with us where you experience that (you can email privately to [email protected] as well) - We would like to take a look.

[NathanWalker]

@miguelarcan @nativescript/schematics ~10.0.0 has now been published alongside @nativescript/angular ~10.0.0

To generate a new project:

// install latest 6.8.0 cli release:
npm i -g nativescript 

// create new project with Angular 10 and NativeScript
nsc create myapp --template @nativescript/template-hello-world-ng

If pursuing @nativescript/schematics, you can see these options:
https://github.com/NativeScript/nativescript-schematics/pull/286#issuecomment-666116443

[ElecTreeFrying]

Awesome !! 🎉🎉🎉🎉

[funder7]

I think that deleting ngcc.config.js is necessary otherwise ngcc will return errors... I just noticed that in a freshly generated project is missing, in case someone else needs this info. ;)

[NathanWalker]

@funder7 ngcc.config.js is still necessary for plugins that haven't been published/distributed/built with ng-packagr yet.
The following plugins have been built with ng-packagr and thus do not need to be mentioned in ngcc.config.js:

"@nativescript/angular": "~10.0.0",
"nativescript-ui-autocomplete": "rc",
"nativescript-ui-calendar": "rc",
"nativescript-ui-chart": "rc",
"nativescript-ui-dataform": "rc",
"nativescript-ui-gauge": "rc",
"nativescript-ui-listview": "rc",
"nativescript-ui-sidedrawer": "rc"

And all the material components under @nativescript-community scope found here:
https://www.npmjs.com/search?q=%40nativescript-community%2Fui-

More and more plugins are adding ng-packagr and we'll publish a blog post next week with details on how to add it to plugin builds to bring Ivy support so other plugin authors can bring them up to compliance as time permits.

I'll be looking at your forked stripe plugin on friday 👍

[funder7]

Hi @NathanWalker, honestly it's the first time that I hear of ng-packagr!
It's good to hear about the upcoming post about these arguments. Do you think that it's possible to have a brief explanation on how to configure a new ngcc entry? by looking at this one for example:

 "nativescript-datetimepicker": {                       ←   1
            entryPoints: {
                ".": {                                  ←   2
                    override: {
                        main: "./index.js",             ←   3
                        typings: "./index.d.ts",        ←   4
                    },
                    ignoreMissingDependencies: true,
                },
                "angular": {                            ←   2
                    override: {
                        typings: "./index.d.ts",        ←   4
                    },
                    ignoreMissingDependencies: true,    ←   5
                }
            },
            ignorableDeepImportMatchers: [              ←   6
                /tns-core-modules\//,
                /@nativescript\/core\//,
                /@nativescript\/angular\//
            ]
        },

1) What must be added to ngcc.config.js, and when?
2) how identify an entry point?
2) main = entry point? how to find out which is the right file?
3) typings = entry point typings, or the same configuration of "types" in tsconfig.json, or.....?
4) What determines if the main entrypoint must be overridden, or just the typings file and nothing else?
5) ignoreMissingDependencies = true ← always true?
6) ignorableDeepImportMatchers = [ /tns-core-modules\//, /@nativescript\/core\//, /@nativescript\/angular\// ] ← always this?
7) the ngcc.config.js file must be included in the plugin project when it depends on other plugins, or it must be used only in the end project?
8) Is an updated plugin backwards compatible?

I'm also curious about the effects of ngcc --properties es2015 module main --first-only, I suppose that it's there that ng-packagr comes into play....

If the next article would include those informations, that would be very nice! Probably more than one argument is related to angular, and can be found in it's documentation, anyway in that case knowing when &/or how it intersects with {N} would not be bad.

In the meaning time that the article is published, what do you think about updating the nativescript-plugin-seed repository, in order to have an up to date - plugin build configuration? looks like it passed some time since the last update! ;)

..Somewhere on {N} website I read that everything must be considered as a plugin in nativescript, that made me think "ok, then in order to update a plugin, let's copy my actual project configuration".
But other questions came into my mind:

    "compilerOptions": {
        "target": "es5",         ← update to es2015 ?
        "module": "commonjs",    ← still required? 
        ....
}

I think that it's important to tell why the module is set to commonjs instead of the same of a project (old: es5; new: ESNext).
Now that we have Webpack that bundles everything, what's the best setup?

Sorry for this long series of questions, I'll wait for your update on the PR, thanks for that. I've done other attempts, but unfortunately nothing worked!
I can open a PR to include the required changes in the angular plugin doc, once it's working ;)

[lamqson]

GREAT WORK Team.

I am getting this error for "npm run ios":

                                           package.json  112 bytes                                                    [emitted]  
                                              runtime.js   13.9 KiB                                           runtime  [emitted]  runtime
     tns_modules/@nativescript/core/inspector_modules.js  710 bytes  tns_modules/@nativescript/core/inspector_modules  [emitted]  tns_modules/@nativescript/core/inspector_modules
                                               vendor.js   4.42 MiB                                            vendor  [emitted]  vendor
Entrypoint tns_modules/@nativescript/core/inspector_modules = runtime.js vendor.js tns_modules/@nativescript/core/inspector_modules.js
[./package.json] 104 bytes {tns_modules/@nativescript/core/inspector_modules} [optional] [built]
    + 249 hidden modules

ERROR in Entry module not found: Error: Can't resolve '@nativescript/webpack/moduleid-compat-loader' in '/Users/sonlam/workspaces/lamqson-gmail/spectarx-webapp/src'
Webpack compilation complete. Watching for file changes.
Webpack build done!
ENOENT: no such file or directory, open '/Users/sonlam/workspaces/lamqson-gmail/spectarx-webapp/platforms/ios/spectarxwebapp.xcodeproj/project.pbxproj'
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] ios: `tns run ios --no-hmr`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] ios script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Log file:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/sonlam/.nvm/versions/node/v14.5.0/bin/node',
1 verbose cli   '/Users/sonlam/.nvm/versions/node/v14.5.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'ios'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preios', 'ios', 'postios' ]
5 info lifecycle [email protected]~preios: [email protected]
6 info lifecycle [email protected]~ios: [email protected]
7 verbose lifecycle [email protected]~ios: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~ios: PATH: /Users/sonlam/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/sonlam/workspaces/lamqson-gmail/spectarx-webapp/node_modules/.bin:/Users/sonlam/Downloads/google-cloud-sdk/bin:/Users/sonlam/.nvm/versions/node/v14.5.0/bin:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Library/Apple/usr/bin:/Users/sonlam/Downloads/google-cloud-sdk/bin:/Users/sonlam/.nvm/versions/node/v14.5.0/bin:/opt/local/bin:/opt/local/sbin:/Users/sonlam/workspaces/bin:/opt/sonar-scanner-4.4.0.2170-macosx/bin:/Users/sonlam/workspaces/bin:/Users/sonlam/workspaces/bin:/opt/sonar-scanner-4.4.0.2170-macosx/bin
9 verbose lifecycle [email protected]~ios: CWD: /Users/sonlam/workspaces/lamqson-gmail/spectarx-webapp
10 silly lifecycle [email protected]~ios: Args: [ '-c', 'tns run ios --no-hmr' ]
11 info lifecycle [email protected]~ios: Failed to exec ios script
12 verbose stack Error: [email protected] ios: `tns run ios --no-hmr`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/Users/sonlam/.nvm/versions/node/v14.5.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at ChildProcess.emit (events.js:314:20)
12 verbose stack     at maybeClose (internal/child_process.js:1051:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
13 verbose pkgid [email protected]
14 verbose cwd /Users/sonlam/workspaces/lamqson-gmail/spectarx-webapp
15 verbose Darwin 19.6.0
16 verbose argv "/Users/sonlam/.nvm/versions/node/v14.5.0/bin/node" "/Users/sonlam/.nvm/versions/node/v14.5.0/bin/npm" "run" "ios"
17 verbose node v14.5.0
18 verbose npm  v6.14.5
19 error code ELIFECYCLE
20 error syscall spawn
21 error file sh
22 error errno ENOENT
23 error [email protected] ios: `tns run ios --no-hmr`
23 error spawn ENOENT
24 error Failed at the [email protected] ios script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

[NathanWalker]

@lamqson delete your webpack.config.js and then update your devDependencies to use this version:
@nativescript/webpack: ~2.1.1

Then clean your project:

npx rimraf node_modules hooks platforms package-lock.json webpack.config.js

We’re organizing some files in the webpack plugin and that’ll get you the latest and will regenerate you latest config file after cleaning your project.

[NathanWalker]

@funder7 probably best for me to put answers to some of that discussed in a blog post. All great questions. We have several posts we'll be working on in preparation for {N} 7.0, what all is in it (the whole es5 > es2017 and higher stuff), what it all means and why it matters and it can help touch on some of that. We want to also post an article just for plugin authors and how they can integrate ng-packagr into their plugins to bring Ivy support as well as take advantage of the new @NativeClass() decorator coming in {N} 7.

[lamqson]

Thanks

@lamqson delete your webpack.config.js and then update your devDependencies to use this version:
@nativescript/webpack: ~2.1.1

Then clean your project:

npx rimraf node_modules hooks platforms package-lock.json webpack.config.js

We’re organizing some files in the webpack plugin and that’ll get you the latest and will regenerate you latest config file after cleaning your project.

Thanks so much @NathanWalker, I have got my code working. Just another question on {N} 7.0.0 release date. Would you know the aprox. date? Sorry for being greedy! :-)

[NathanWalker]

@lamqson great to hear, please post back if you have any other issues. We’re planning on end of this month so likely that last week of August. We have a few more changes to make to the cli to support a few things on the 2020 roadmap which is part of the 7.0 plan and continually helping to update more community plugins to support es2017 and higher build targets as well as use the NativeClass decorator. All is on track and we greatly appreciate the community trying out all the latest rc’s as it has helped us find more good things and will make 7.0 that much better.

[NathanWalker]

We'll close this issue for now since Angular 10 support is out.

[juniorschen]

@NathanWalker
I was excited to test the angular 10, however when trying to create a test app with a RadList I'm having this problem, it always happens when I use RadList, here are some prints:

[NathanWalker]

@juniorschen can you post your view markup where the RLV is?

[juniorschen]

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

[NathanWalker]

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

[juniorschen]

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

[NathanWalker]

ok excellent this is helpful, will check it out.

[NathanWalker]

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

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

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

[juniorschen]

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

[juniorschen]

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

[NathanWalker]

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

@NathanWalker
when i add lazy routes and try to close the app using the smarthphone back button i have the following error:

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]

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

[NathanWalker]

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]

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

[NathanWalker]

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

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

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]

@NathanWalker
Testing support still not working?

[bastienlemaitre]

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

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

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

@NathanWalker, works. Thx !

[lonerzzz]

@NathanWalker You mentioned (https://github.com/NativeScript/nativescript-angular/issues/2181#issuecomment-661090676) 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]

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]

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]

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

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

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]

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

[24jr]

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]

@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