Closed zhaoyouliang closed 4 years ago
We have a branch started and expect releasing support the week after July 4th.
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.
v9 support is still on the way, I don't think that v10 will be supported soon
It has been a week since the 4th, any update?
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!
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.
@funder7 v9 support was published weeks ago at beginning of June.
Angular 10 support is fully working in the linked PR here.
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"
@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)"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.
Hey man, thank you very much,
I'll test today!
@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?
@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.
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.
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\//
]
},
@sublime392 are you using @nativescript/angular
instead of nativescript-angular
?
@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 notifications@github.com 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 .
@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.
@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
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
On Sat, 18 Jul 2020 at 21:06, Nathan Walker notifications@github.com 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 .
@Meyer-dev Definitely would like to run that project and see - possible to send email to support@nativescript.org with a way to download the project by chance to keep it private?
@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?
@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 notifications@github.com 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 .
@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.
@sublime392 I'll look at compat lib but I'll also look at that plugin and let ya know (hopefully by this evening)
@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 =
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 notifications@github.com 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 .
@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
.
@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 notifications@github.com 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 .
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.
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)
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 π
@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.
@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 notifications@github.com 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 .
@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 π
@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
@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.
@NathanWalker , thanks man.
Very good to know that. :)
@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.
@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 π
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.
@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.
@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
@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.
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
@Log3n possible to share a project with us where you experience that (you can email privately to support@nativescript.org as well) - We would like to take a look.
@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
Awesome !! ππππ
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. ;)
@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 π
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 ;)
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