I want to convert an AngularJS app to Angular 4. I'm reading the official Angular documentation for upgrading from AngularJS at https://angular.io/guide/upgrade. It states this:
To begin converting your AngularJS application to a hybrid, you need
to load the Angular framework. You can see how this can be done with
SystemJS by following the instructions in Setup, selectively copying
code from the QuickStart github repository.
The 'Setup' link however leads to a page which doesn't mention SystemJS. How do I use SystemJS to load/build the Angular 4 framework into the existing AngularJS app?
The link you specified points to the Angular quickstart project which uses systemjs. https://github.com/angular/quickstart
Although the project is marked as deprecated it is currently still valid in how you can setup Angular with systemjs.
You can then use the quickstart as the basis for porting your code across and will enable you to follow the additional instructions in that setup steps.
That quote I gave from the Angular documentation is very confusing. What you actually need to do when upgrading is to somehow set up the scaffolding for an Angular 4 app within your project, then use SystemJS as the module loader that will load the Angular 4 modules at runtime (since there is currently incomplete native browser support for the EcmaScript module system).
I figured out by reading further through the upgrade guide (specifically the 'PhoneCat Upgrade Tutorial - https://angular.io/guide/upgrade#phonecat-upgrade-tutorial) that what you're expected to do is set up the QuickStart project in an independent location, somehow move most of it into your existing AngularJS project to provide the scaffolding for an Angular 4 project, then wire up SystemJS as the module loader by selectively using some of the SystemJS configuration that is inside your 'built' QuickStart project.
Related
We have a parent or host project which is on Angular JS and we are creating a new React app, and would like to integrate React app as MFE with the host project.
We would not like to make lot of changes in the host project but wanted to check if we can use webpack/webpack module federation in the Angular JS project to do the MFE integration.
Thanks in advance for any examples or suggestions that you provide
What you are trying to do is not possible with Webpack 4 (unless you use the Single SPA JS library to polyfill support for MFEs). You will need Angular version 11 or higher (but I'd recommend version 12, as Webpack 5 support is stable in that version).
Some examples and references:
https://javascript.plainenglish.io/create-micro-frontends-using-web-components-with-support-for-angular-and-react-2d6db18f557a
https://webpack.js.org/concepts/module-federation/
https://github.com/module-federation/module-federation-examples
https://github.com/manfredsteyer/module-federation-plugin-example-nx
https://www.angulararchitects.io/en/aktuelles/using-module-federation-with-monorepos-and-angular/
https://www.angulararchitects.io/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-the-good-the-bad-the-ugly/
I am migrating an AngularJS application to Angular 7 using the downgradeModule (described here: upgrade for performance). In the last part of that documentation it is stated that I need to import the NgModuleFactory of my AppModule when I want to use AOT. I am using the angular-cli for building the application. Is it possible to reference the ModuleFactory that is created in the angular-cli build and therefore turn on AOT for my hybrid app?
I have an older project that we want to add some more functionality to. It's a fairly big project so rewriting it is out of the question. I've been reading and following the Angular ngUpgrade guide to make the transition to be able to write Angular 2+ code and run it with my AngularJS application.
However, there are some things that I'm missing and I'm quite confused on what I need to do.
My team created the initial project using Grunt and Bower, looks like through a Yeoman generator. I've been following along in the PhoneCat Upgrade Tutorial and I'm at the part where it says to "Install Angular into the project, along with the SystemJS module loader."
At this point I've looked into SystemJS a bit and what we have with our Bower/Grunt setup but am fairly confused.
So my question is, do I need to change my AngularJS application to use SystemJS before continuing with the Angular Upgrade, or can Grunt and SystemJS work together in some way?
I'm looking into creating an app with typescript and angular 1.6.0. But everywhere I look is using webpack, babel, grunt, gulp, there is no single consensus on which is the best way to proceed with an app like this.
Anyone got any hints?
Thank you.
Do you have a specific need for using angular 1.6.0? As opposed to creating an angular2 project?
You can get more information here: Angular-cli
Angular cli currently includes webpack and you will not need to use gulp or grunt at all. In addition to the angular cli bundling your app together it allows easy build for Ahead of Time Compilation and tree shaking. Having these two features is nice for when you are ready to deploy your application to a production server you can bundle the application into a small package and serve a small amount of JS files.
Using the angular cli also helps you to code with best practices within an angular2 application. You generate new components/directives/pipes with a simple ng generate [component] [name] command.
I would strongly suggest reading through the angular quickstart for ts guide located here: Angular-Quickstart
Also, if you do not want to generate your own projects using the angular-cli. There are various templates online that you can start your application with.
Good luck!
If you are planning to start from scratch, then why not Angular2 ?
My suggestion is Typescript2 + Angular2 with webpack. As stated by #Andy Angular-cli is good to go.
I am building a hybrid mobile app using the Ionic Framework library (including Angular JS) and have found that they've made a wrapper for a number of the cordova plugins so that they work with Angular.
I have downloaded the ng-cordova.js file and referenced it in my index.html
As as test I have used the cordova device plugin just to display the device name in a popup. It works fine in the ripple emulator just running the html in my browser, however when I build the app using Phonegap Build it no longer works.
Is it not possible to use the ng-cordova.js file to access native device features when using Phonegap Build? (i.e. Can you literally only use the plugins from the list on the build website?)
As another user of PhoneGap Build, you are limited to whatever plugins can be found here:
https://build.phonegap.com/plugins
That being said, if the plugin is not in their repository already (most of the popular ones are), you can always submit it yourself or try to get the author to submit it.
Other than that, it should work fine.
This is ngCordova contributor.
It should be possible to use ngCordova with PhoneGap, but are you using the same plugins repos as they are mentioned in ngCordova documentation?
I can imagine that PhoneGap plugins my have different API than Cordova plugins.
And what is here the reason to use PhoneGap Build, if I may ask?
Can you specify which plugins are not working and how could I simply replicate your errors?