feat(angular): v9 with ivy support

[NathanWalker]

I took over from where @VladimirAmiorkov left off on this pr and got things working with Ivy enabled here.

Everyone who sees this does not need to wait until this PR is merged.
You can do the following to try the new v9 by doing the following:

Modify you package.json dependencies as follows:

"@nativescript/angular": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-9.0.0.tgz?raw=true",
"nativescript-angular": "https://github.com/nstudio/ns-ng/blob/master/nativescript-angular-compat.tgz?raw=true"

Then just make sure all your @angular dep's are updated to ~9.1.0, for example:

"@angular/core": "~9.1.0"

Make you are using at least 1.5.0 of nativescript-dev-webpack in devDependencies.

Add this to your package scripts:

"postinstall": "npm run ngcc",
"ngcc": "ngcc --properties es2015 module main --first-only"

Then clean you project completely:

rm -rf node_modules/ platforms/ package-lock.json hooks

Then run with the following:

tns run ios --emulator --env.aot --no-hmr

Best to always use AoT all the time since Ivy works with it by default and also good to disable hmr as seems there's some other things to get hmr working with ivy.

If you end up seeing an error like this:

ERROR in The target entry-point "nativescript-ngx-fonticon" has missing dependencies:
 - file-system

You can add a new file ngcc.config.js to the root of your project with contents like this which helps the ngcc compiler for Ivy:

module.exports = {
  "packages": {
      "@nativescript/angular": {
          ignorableDeepImportMatchers: [
              /tns-core-modules\//,
          ],
          "entryPoints": {
              ".": {
                  "override": {
                      "main": "./index.js",
                      "typings": "./index.d.ts",
                  },
                  "ignoreMissingDependencies": true,
              }
          }
      },
      "nativescript-ngx-fonticon": {
          "entryPoints": {
            ".": {
                "override": {
                  "main": "./nativescript-ngx-fonticon.js",
                  "typings": "./nativescript-ngx-fonticon.d.ts",
                },
                "ignoreMissingDependencies": true,
            }
          }
      },
      "@nota/nativescript-accessibility-ext": {
          "entryPoints": {
            ".": {
                "override": {
                  "main": "./index.js",
                  "typings": "./index.d.ts",
                },
                "ignoreMissingDependencies": true,
            }
          }
      }
  }
}

Then try cleaning project and rebuild/run again after adding the ngcc.config.js file.

Here's a sample project configured correctly for Angular 9 with Ivy enabled you can reference (the tns-ios and tns-android runtimes can be 6.4.0 - they are set to specific version just because those are what was installed globally but works fine with 6.4 as well):
https://github.com/vinckobb/nativescript-angular-demo

---

Lastly if you have a large number of plugins and are encountering too many Ivy/ngcc related issues surrounding various plugins which may not be compatible yet, you can simply set:
Modify your tsconfig.json to include this (parallel to compilerOptions):

"compilerOptions": {
  ...your various options, etc.
},
"angularCompilerOptions": {
    "enableIvy": false
}

in your tsconfig. then clean and rebuild.

That simply disables Ivy and allows you to still build and develop with Angular 9 and then once you have brought all other dependencies up to date with various complier issues, you can then reenable later 👍

[NathanWalker]

@VladimirAmiorkov can you approve again to kick jenkins build? I cleared the lint related issues.

[ElecTreeFrying]

+1

[SmailHammour]

@abcfoundry @SmailHammour totally valid concerns and understandable. I can't speak for the core team as I'm not on the core team but I don't blame them for any nonresponsiveness during this time as well as in the February time frame as much was still undergoing related to Ivy. I know many companies have encountered setbacks in past couple months with the global pandemic.

All I can do is contribute to a framework I myself personally use everyday in many active and ongoing projects. As far as unanswered or pending issue reports (some I have fixed myself in my own day to day operations, of which I plan to contribute PR's when I have the time). In meantime one thing you both could do to help as a fellow community peer of mine is perhaps take 5-10 mins and grab links to the issues from core modules repo and any {N} related repo and drop them here. I'd be curious which hit you the hardest, cause you most concern and myself and all those I work with always like to assist the community in ways we can. Look forward to seeing those when you have moment to share 🤗

@NathanWalker This one for example has been open since 2018 -> #1367

[cdmistman]

@NathanWalker This one hasn't been open for long but I'm curious if you have a patch ready NativeScript/NativeScript#8551

It was closed because the original wording of the issue was due to an issue in my own code, however I discovered another bug that's related.

[NathanWalker]

@SmailHammour thanks! yep definitely familiar with that one :) - In short there's a lot of angular router paradigms that are well suited for web scenarios which don't necessarily present 1-1 in mobile scenarios and believe a lot of issues like that can often be solved by taking a good look at the overall mobile route setup and often simplifying the approach. Additionally I've been considering writing an alternate angular router for {N} which would avoid a lot of the trouble that issue represents. It's definitely an ongoing debate however the Vue integration took a similar approach where integrating the vue-router didn't make sense 1-1 and instead introduced a much simpler and vastly more stable Navigation service to handle mobile scenarios better with vastly better results.

@cdmistman Have not seen that one - thanks for raising it here; I'll be interested to dig into that one in the coming weeks. If you have an immediate blocker due to that you may could email team@nstudio.io to see if more immediate assistance could be possible.

[crowmagnumb]

So I created a repo similar to the one @NathanWalker posted above for others who want to dabble in the move to Angular 9/Ivy. It's located here. In the master branch I was able to successfully make a simple app to display a dialog. But in the side-drawer branch I am trying to use the nativescript-ui-sidedrawer plugin and I get the "missing dependencies" problem but can't get the work-arounds to work. If anyone has any ideas on how to fix it I would love that. Happy to reciprocate with counter-help and I offer this repo up as a starting point for anyone of course.

[kmmccafferty96]

@crowmagnumb I was seeing that too, this fixed it for me: ProgressNS/nativescript-ui-feedback#1355 (comment).

[crowmagnumb]

@kmmccafferty96 Thanks for that! That gave me hope but then I ran into other issues that are documented in my project README and a little too wordy to recreate here. It boils down to the fact that the nativescript-ui-sidedrawer is not Ivy compatible, but disabling Ivy I still can't complie my simple little tiny project. :(

[Meyer-dev]

I have 3 projects with sidedrawer working with ivy. Just keep trying :) did you follow Nathan's recommendations regarding the ngcc file? That did the trick for me.

…

On Sat, 09 May 2020, 1:12 am Ken Southerland ***@***.***> wrote: @kmmccafferty96 <https://github.com/kmmccafferty96> Thanks for that! That gave me hope but then I ran into other issues that are documented in my project README <https://github.com/animalus/testns-app> and a little too wordy to recreate here. It boils down to the fact that the nativescript-ui-sidedrawer is not Ivy compatible, but disabling Ivy I still can't complie my simple little tiny project. :( — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2124 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHNDDIFY23Y7KHPPDQVM5STRQSGV5ANCNFSM4KW4X6VA> .

[crowmagnumb]

@Meyer-dev That's encouraging! Thank you. I do indeed have a ngcc.config.js in the root of my directory in the side-drawer branch. It might be set to DISABLED by the time you get there because I'm experimenting (its contents are below) and it doesn't seem to do anything. This is automatically seen by ngcc right, I don't have to set anything else? What do yours look like? Cheers.

module.exports = {
    packages: {
        "@nativescript/angular": {
            entryPoints: {
                ".": {
                    override: {
                        main: "./index.js",
                        typings: "./index.d.ts"
                    },
                    ignoreMissingDependencies: true
                }
            }
        },
        "side-drawer-directives": {
            entryPoints: {
                ".": {
                    override: {
                        main: "./side-drawer-directives.js",
                        typings: "./side-drawer-directives.d.ts"
                    },
                    ignoreMissingDependencies: true
                }
            }
        }
    }
};

[Meyer-dev]

here is me ngcc.config.ts file which is slightly different and working.Let me know if this helps. module.exports = { "packages": { "@nativescript/angular": { "entryPoints": { ".": { "override": { "main": "./index.js", "typings": "./index.d.ts", }, "ignoreMissingDependencies": true, } } }, /* "dataform-directives": { "entryPoints": { ".": { "override": { "main": "./dataform-directives.js", "typings": "./dataform-directives.d.ts", }, "ignoreMissingDependencies": true, }, "angular": { "override": { "main": "./dataform-directives.js", "typings": "./dataform-directives.d.ts", }, "ignoreMissingDependencies": true, } } }, */ "nativescript-ui-dataform": { "entryPoints": { "angular": { "override": { "main": "./dataform-directives.js", "typings": "./dataform-directives.d.ts", }, "ignoreMissingDependencies": true, } } }, "nativescript-ui-sidedrawer": { "entryPoints": { ".": { "override": { "main": "./ui-sidedrawer.ios.js", "typings": "./index.d.ts", }, "ignoreMissingDependencies": true, }, "angular": { "override": { "main": "./side-drawer-directives.js", "typings": "./side-drawer-directives.d.ts", }, "ignoreMissingDependencies": true, } } }, "nativescript-ui-listview": { "entryPoints": { ".": { "override": { "main": "./ui-listview.ios.js", "typings": "./index.d.ts", }, "ignoreMissingDependencies": true, }, "angular": { "override": { "main": "./listview-directives.js", "typings": "./listview-directives.d.ts", }, "ignoreMissingDependencies": true, } } }, "nativescript-ngx-fonticon": { "entryPoints": { ".": { "override": { "main": "./nativescript-ngx-fonticon.js", "typings": "./nativescript-ngx-fonticon.d.ts", }, "ignoreMissingDependencies": true, } } }, "@nota/nativescript-accessibility-ext": { "entryPoints": { ".": { "override": { "main": "./index.js", "typings": "./index.d.ts", }, "ignoreMissingDependencies": true, } } }, } }

…

On Sat, 9 May 2020 at 02:06, Ken Southerland ***@***.***> wrote: @Meyer-dev <https://github.com/Meyer-dev> That's encouraging! Thank you. I do indeed have a ngcc.config.js in the root of my directory in the side-drawer branch. It might be set to DISABLED by the time you get there because I'm experimenting but its contents are and it doesn't seem to do anything. This is automatically seen by ngcc right, I don't have to set anything else? What do yours look like? Cheers. module.exports = { packages: { ***@***.***/angular": { entryPoints: { ".": { override: { main: "./index.js", typings: "./index.d.ts" }, ignoreMissingDependencies: true } } }, "side-drawer-directives": { entryPoints: { ".": { override: { main: "./side-drawer-directives.js", typings: "./side-drawer-directives.d.ts" }, ignoreMissingDependencies: true } } } } }; — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2124 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHNDDIGGEUIVGMQCEFPX7LTRQSM6ZANCNFSM4KW4X6VA> .

[crowmagnumb]

I'll say up-front, because maybe we are annoying others :), if anyone would like to start a small group of some kind that we can bounce ideas and little gotchas that we all experience off each other please let me know. I would love that. We would all like to just get to coding and not dealing with setup. :) Email me at my github username at gmail.

@Meyer-dev I have made a modification based on yours mine now reads like that below. But what I get with this gcc config set is ...

ERROR in node_modules/nativescript-ui-sidedrawer/angular/side-drawer-directives.d.ts:79:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (nativescript-ui-sidedrawer/angular) which declares NativeScriptUISideDrawerModule 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.

79 export declare class NativeScriptUISideDrawerModule {

But I get that even if I disable the ngcc.config.js file, so it doesn't appear to have any effect.
I am using nativescript-ui-sidedrawer@8.0.1 with gcc.config.js:

module.exports = {
    packages: {
        "@nativescript/angular": {
            entryPoints: {
                ".": {
                    override: {
                        main: "./index.js",
                        typings: "./index.d.ts"
                    },
                    ignoreMissingDependencies: true
                }
            }
        },
        "nativescript-ui-sidedrawer": {
            entryPoints: {
                ".": {
                    override: {
                        main: "./ui-sidedrawer.android.js",
                        typings: "./index.d.ts"
                    },
                    ignoreMissingDependencies: true
                },
                angular: {
                    override: {
                        main: "./side-drawer-directives.js",
                        typings: "./side-drawer-directives.d.ts"
                    },
                    ignoreMissingDependencies: true
                }
            }
        }
    }
};

[crowmagnumb]

So, I switched over to my MAC to run it in the ios simulator and it works! Without any ngcc.config.js file even! So its just running android (I run under Ubuntu) that I'm getting all my issues. :( Any thoughts on that?

[crowmagnumb]

UPDATE: If I don't set the --env.aot flag it works fine. I just need to run tns run android and then it works (also works for me on mac/ios this way too). If I add the --env.aot flag with android I get the error I posted above.

[iameduardod]

An alternative is switching to a framework that already supports v9 https://twitter.com/LiamDeBeasi/status/1261298258506375169

[crowmagnumb]

@iameduardod I should update here that I am now having success with the above "workaround" and would gladly help others with their transition to it as well with some of the knowledge that I've gained from this exercise. And I have intel that the workaround is very temporary and will be made permanent in a short while.

[mapo80]

@iameduardod I should update here that I am now having success with the above "workaround" and would gladly help others with their transition to it as well with some of the knowledge that I've gained from this exercise. And I have intel that the workaround is very temporary and will be made permanent in a short while.

A migration case would be very helpful and what steps are to be followed.

[thegnuu]

I was able to get my application working (partially) with this workaround, but we are using a custom dynamic component loader from an external url in our electron application and I want to rebuild this feature for our new NativeScript application, everything works until I want to build the angular module within our application.

If I try to use Compiler from @angular/core I receive the following error: Error: Runtime compiler is not loaded.

Has anyone an idea how to fix that?

[thegnuu]

Never mind, I found a solution for my issue, I just had to enable Ivy in my case... I did not double check this while copying the files, since my externals modules are built with Ivy enabled the app it self of course has to be built with Ivy as well.

[NidheeshMv]

@NathanWalker
I'm getting below error while tns run ios . All dependency packages upgraded to Angular 9

'** ERROR in The given rootPath undefined is not a file of the program **.'

Could you provide any solution to fix this

[samirotiv]

@NathanWalker Much appreciate your effort.

It will be great if you could explain, what is currently between us and getting this PR merged and finished?

Asking because I will be happy to be involved in contributing.

[NathanWalker]

This PR will be merged and published next week no later than Wednesday 👍

[NathanWalker]

Published in @nativescript/angular: ~9.0.0 now. Please see here for update instructions and tips

[samirotiv]

Great work! :)

[westlakem]

This still doesn't work on a brand new code sharing project

[NathanWalker]

@westlakem could you share the exact commands you’re using to create?

[westlakem]

I followed the instructions on
https://docs.nativescript.org/angular/code-sharing/creating-a-new-project.html to create a shared project with SCSS. The command I ran was ng new -c=@nativescript/schematics sass-project --shared --style=scss. I attempted to fix it following some other articles, with little success. You can see my journey in stack overflow. https://stackoverflow.com/questions/62921701/unable-to-create-angular-native-shared-application/62924265#62924265

[kukurt123]

Everything works fine until i installed a plugin with element-registry. i think it is the nativescript-ui-dataform. my error goes like this :::::
ERROR in The target entry-point "undefined" has missing dependencies:

• nativescript-angular/element-registry

i followed all the instruction and placed the recommended code inside ngcc.config.js still that dang error exists. -_-

[NathanWalker]

@kukurt123 we’d recommend updating to Angular 10 and using UI-dataform
7.0.0 latest version as it’s ivy compatible with 10 and doesn’t need to be in ngcc.config if you just update to angular 10.