Angular, Google\u2019s popular JavaScript Framework for building mobile and desktop applications, has been a hit with developers right from the time it launched in September 2016. By the end of 2017, 5 versions were already out, each one better than the last. Clearly, developers were anxiously waiting for Angular 6 to come out in 2018 and delightfully, the beta version is officially out now.<\/p>\n
The focus of angular has always been to stay faster, smaller and easier. Angular 6 continues to stay true to that theme and has a number of new features that will help developers get their jobs done better than ever before. Let\u2019s check out some of these new features:<\/p>\n
To help achieve the goal of being smaller, faster and easier, the version 6 beta features a new renderer called Ivy. The beta also adds an optional, backward-compatible generic type to support typed nativeElement. Loaded with all those powerful features, Angular 6 will officially release in March or April 2018, paving way for Angular 7 in September\/October 2018.<\/p>\n
Read also:Angular 6 with CLI \u2013 Quick Guide to Installation and Setup<\/a><\/p><\/blockquote>\n
Angular 6 adds a number of new features and removes a few old ones too. Here\u2019s a list of everything you can expect to see in the new version, so brace yourself and here we go.<\/p>\n
\n
- Added Angular Material and CDK Stable Release<\/li>\n
- Support Service Worker in the CLI\n
\n
- ng generate universal<\/li>\n
- ng build –app= < name ><\/li>\n<\/ul>\n<\/li>\n
- Improved Universal and AppShell Support in the CLI\n
\n
- ng generate app-shell [ –universal-app ] [ –route ]<\/li>\n<\/ul>\n<\/li>\n
- Improved decorator error messages<\/li>\n
- TypeScript 2.5.x support\n
\n
- npm install typescript@’~2.5.3′<\/li>\n<\/ul>\n<\/li>\n
- Added to support \u2013 nativeElement<\/li>\n
- Re-introduced Query Predicate with more focused role<\/li>\n
- Missing lifecycle tests for projected components added<\/li>\n
- Safety worker described<\/li>\n
- afterContentInit and afterContentChecked added to render<\/li>\n
- \u00a0Some fixes on language service –\n
\n
- The 2.6 version of Typescript\u2019s \u201cresolveModuleName\u201d started to require paths passed to be separated by ‘\/’ instead of being able to handle ‘\\’.<\/li>\n<\/ul>\n<\/li>\n
- Move init hooks into TView<\/li>\n
- Correct onDestroy order for projected components<\/li>\n
- Added type and hooks to directive def<\/li>\n
- Enabled size tracking of a minimal CLI render3 application<\/li>\n
- Fix platform-detection example for Universal<\/li>\n
- Added canonical view query<\/li>\n
- Some enhancements on compiler to reflect changes<\/li>\n
- Renamed QueryPredicate to LQuery<\/li>\n
- Renamed LQuery to LQueries and associated renames<\/li>\n
- Allowed HttpInterceptors to inject HttpClient \u2013\n
\n
- Previously, an interceptor attempting to inject HttpClient directly would receive a circular dependency error, as HttpClient was constructed via a factory which injected the interceptor instances. Users want to inject HttpClient into interceptors to make supporting<\/li>\n
- Either HttpClient or the user has to deal specially with the circular Dependency. This change moves that responsibility into HttpClient itself. By utilizing a new class HttpInterceptingHandler which lazily Loads the set of interceptors at request time, it’s possible to inject HttpClient directly into interceptors as construction of HttpClient no longer requires the interceptor chain to be constructed.<\/li>\n<\/ul>\n<\/li>\n
- \u00a0Added navigationSource and restoredState to NavigationStart –\n
\n
- Currently, NavigationStart there is no way to know if navigation was triggered imperatively or via the location change. These two use cases should be handled differently for a variety of use cases (e.g., scroll position restoration). This PR adds a navigation source field and restored navigation id (passed to navigations triggered by a URL change).<\/li>\n<\/ul>\n<\/li>\n
- Removed generation of comments<\/li>\n
- Fixed SideNav height on narrow screens –\n
\n
- \u00a0\u00a0Since we specify `bottom: 0`, specifying the height is unnecessary and Leads to wrong height (unless updated) on narrow screens where the topbar height is decreased.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Conclusion<\/h2>\n
The beta version of Angular 6 has developers excited and for good reason. The build optimizer successfully makes the application smaller, the improved compiler makes things a whole lot faster and the overall experience is extremely easy and intuitive. Angular 6 successfully mitigates the few shortcomings of Angular 5 such as the problem with production build source maps. So check out the all new and loaded Angular 6 right now.<\/p>\n
Where can you download the Angular 6 beta?<\/h3>\n
You can download the Angular 6 beta from GitHub<\/a>.<\/p>\n