ASP.NET Zero v3.1 and Angular 2 Updates

ASP.NET Zero v3.1 and Angular 2 Updates

We are happy to announce that we have released ASP.NET Zero v3.1. This release mostly includes enhancements and bug fixes, but also includes some important changes on Angular 2.x UI.

Angular 2.x UI

In general, Angular 2.x is still not so mature. While it’s officially released;

  • It’s CLI tool is still in beta and has problems and missing features. We have used angular-cli in our Angular 2 UI, but in every new beta release, we may have some breaking changes. We are constantly fixing them. When we first start to develop, it was using systemjs, then it switched to webpack and in latest versions AOT compiling become standard on build. We are following changes and implementing for our solution.
  • There are some important missing libraries, especially for User Interface. Angular 2 material is recently become beta, but release date is not known yet.
  • While Angular 2’s documentation is very rich, it’s not complete yet. Especially, angular-cli has not an official documentation. We are learning from Github issues, community articles and even from it’s source code.

We will have some pain, but tooling and libraries will become mature by time.

With the ASP.NET Zero 3.1 release, we aligned to latest changes and we are providing an up-to-date solution for modern web development.

Ahead Of Time (AOT) Compiling

This is a technique to compile your project on build (on deployment) to minimize runtime overhead of Angular. It makes your application faster loading and running. But it has some restrictions. For instance, it allows that only one root (bootstrap/entry) module in the project.

ASP.NET Zero had 2 root modules (app and account) which prevents us to use AOT compile. We introduced a new single RootModule which imports those 2 modules. So, that changed bootstrap code and module dependencies a lot. Our existing customers can see changes and latest version on our Github repository and apply changes them to their projects, either by recreating their projects or merging code bases.

Lazy Loading

We also configured our solution to have 3 lazy loaded modules as shown below:

ng2-modules

Modules with dotted lines are being lazy loaded.

  • RootModule is responsible to bootstrap the application.
  • AccountModule provides login, two factor authentication, register, password forget/reset, email activation… functionalities.
  • AppModule is just to group application modules and provide a base layout. It contains 2 sub modules:
    • AdminModule contains pages like user management, role management, tenant management, language management, settings and so on.
    • MainModule is the main module to develop your own application. It only contains a demo dashboard page which you can modify or delete. It’s suggested to divide your application into smaller modules like we did in the startup project, instead of adding all functionality into the main module.

There are also smaller shared modules in the solution.

We also configured solution to be able to use Hot Module Replacement (HMR) feature and upgraded to latest Angular 2 and Angular CLI.

Others

We also upgraded major package dependencies, especially we upgraded to ABP v1.4.2.

In ABP v1.4, we introduced embedded view system which allows us to embed MVC controllers, MVC views, js files, css files, images and other resources into seperated modules, even into plugins. We are constantly improving the ABP framework and adding new features. Keep your solution up-to-date easily via updating nuget packages and see release notes to learn new features in every release.

Happy coding..!

9 Comments
  • Florian Neuhaus
    Reply
    Posted at 10:42, February 15, 2017

    Great work! I really appreciate your effort on Angular. In the beginning I saw some “dirty” workarounds in the Angular part of your solution (fake bootstrapper) which made me struggle a bit. But now this seems to evolve to a fairly stable way in programming a web-frontend.
    There are a few things in your post that alert me:
    – What are the consequences of using AOT? Is the build process of the Angular part still the same? npm install, npm start? I noticed that npm install did not install all packages – a “yarn” was required too. I still see webpack doing a lot of stuff and observing files – is this ok, or do I have to upgrade something?
    – You talk about “missing libraries”: What are the sideeffects of this? What exactly is missing? Can we fill the gap with primeng or similar?

    Again: Thanks a lot for your work – I see a lot of potential in your solution as there does not exist something similar. Probably you just need more developers 😉

    Greetings,
    Florian

  • Posted at 00:02, February 16, 2017

    Thanks, this is an excellent update that we will review over the next couple of days. Appreciate that you are pushing the agenda even if some of the components are maturing as you go.

    Regarding an Angular2 Datatable, we have had some recent success in integrating http://www.primefaces.org/primeng/#/datatable/ with ASP.NET Zero

    Hope this helps.

    • Fawad
      Reply
      Posted at 01:12, April 8, 2017

      Hi, I am interested in integrating primeng atlantic theme with ASP.NET zero. Can you share any documentation or steps that you took while implementing primeng theme with ASP.NET Zero.
      Thanks

  • Posted at 06:44, February 16, 2017

    Great news

  • Posted at 06:45, February 16, 2017

    Great News for Angular2 with donNet Core

Post a Comment

Comment
Name
Email
Website