Angular's current update rate is quite fast. If you are a beginner who is just starting to learn this framework, I recommend starting with Angular 4 or Angular 5. Angular 5.0 is a major release that includes new features and fixes a lot of bugs. It once again reflects our consistent goal of making Angular smaller, faster, and better to use. Here are some important changes in Angular 5.0. For details, see CHANGELOG .
1. Build the optimizer
First, mark certain parts of your application as pure, and remove unnecessary things from the application. Second, the build optimizer removes Angular decorator code from your app. Decorators are only used by the compiler, not at runtime and can be deleted. Both of the above optimizations can reduce the size of the generated JS bundle and speed up the application startup at the same time
2. Compiler Improvements
To support incremental compilation, we have improved the Angular compiler. The result is faster rebuilds, especially for production builds and AOT builds. We also enhanced the decorator to reduce the package size by removing whitespace.
TypeScript transformations
Now , the underlying working mechanism of the Angular compiler is TypeScript transformations, making incremental rebuilds much faster. TypeScript transformations are a new feature in TypeScript 2.3 that allows us to dive into the standard TypeScript compilation pipeline.
3. Improved decorator support
Expression lowering in Lambda and object literals useValue, useFactory, and data decorators is now supported. This makes it possible to use values that are downgraded (lower) in decorators that can only be computed at runtime.
So now it is possible to use Lambda functions instead of named functions. In other words, executing code won't affect your d.ts or your external API.
Component({
provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}We will also downgrade the expression as part of useValue
Component({
provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}4. Internationalized numeric, date and currency pipelines
We have written new numeric, date and currency pipelines to make cross-browser internationalization more convenient without the need to use i18n's putty script (polyfill).
In previous versions of Angular, we have been relying on the browser and its i18n API to provide numeric, date and currency formats. To this end, many developers are using putty scripts (polyfills), and the results are not good. Many people have reported that some common formats (such as currency) do not work out of the box.
In 5.0.0, we updated this pipeline to be our own implementation, relying on CLDR for broad regional support and configurable.
If you are not ready to use the new management, you can import DeprecatedI18NPipesModule to downgrade to the old behavior.
Five, StaticInjector instead of ReflectiveInjector
In order to eliminate the dependence on more putty scripts (polyfill), we replaced ReflectiveInjector with StaticInjector. The former no longer requires Reflect, reducing application size for developers.
Previously use ReflectiveInjector.resolveAndCreate(providers); later use Injector.create(providers);
6. Improve the speed
of Zone On the one hand, it improves the speed of Zone, and on the other hand, it can be bypassed in applications that pay special attention to performance.
To bypass it, start the app with noop:
platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );7. Added support for multiple names in exportAs
components and directives. This helps users achieve a painless migration. By exporting directives as multiple names, new names can be used in Angular syntax without breaking existing code. The Angular Material project already uses it in its prefix migration project, and it will certainly be useful to other component authors as well.
@Component({
moduleId: module.id,
selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
exportAs: 'matButton, matAnchor',
...
}8. Modify HttpClient
v4.3 HttpClient was launched in @angular/common to send requests in Angular, it is small and easy to use. HttpClient has been widely praised by developers, so we recommend using it in all applications and abandoning the previous @angular/http library.
To upgrade HttpClient, you need to replace HttpModule with HttpClientModule in @angular/common/http of each module, inject HttpClient service, and delete all map(res => res.json()).
9. CLI v1.5
Starting from Angluar CLI v1.5, Angluar v5.0.0 has been supported, and v5 projects are generated by default.
In this minor version upgrade, we turned on the build optimizer by default, allowing developers to get smaller packages.
We also modified the way we use .tsconfig files to more strictly adhere to the TypeScript standard. Previously, if lazy loaded routes were detected and you manually specified a set of files or includes in tsconfig.json, those routes were automatically handled. Today, according to the TypeScript specification, we don't do that anymore. By default, there are no files or includes in the CLI's config for TypeScript, so most developers won't be affected
10. Add updateOn Blur/Submit to the Angular form,
so that the logic of validating and updating values can be run according to blur or submit, instead of relying solely on input events.
Forms are important to the application, and if there is server-side validation, or if validating or updating values triggers slower operations, you certainly want it to run less often. Now you can control when to validate and update values at the control level, as well as at the form level.
Also, you can now specify asyncValidators directly in options instead of via a third parameter
11. RxJS 5.5
We have updated the RxJS used to 5.5.2 or higher. This new release of RxJS allows development to completely get rid of the side effects of the previous import mechanism, as we use RxJS in the form of new lettable operators. These new operators eliminate side effects, as well as code-splitting and "tree shaking" problems with the "patch" method of the previous import operator.
Previous implementation:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);Current implementation:
import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
map(user => user.name),
filter(name => name),
);Additionally, RxJS now ships a version that uses ECMAScript Modules. The new Angular CLI will pull this new version by default, resulting in a significant reduction in package size. If you are not using Angular CLI, you should still point to this new version
12. New router generation cycle events
We have added new life cycle events to the router, allowing developers to track the various stages from the start of the running guard to the completion of activation. These events can be used to show a loading animation on a specific router exit, or to measure performance, when a child component is updated.
The new events (in order) are GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd. Here's an example that uses these events to start and stop a loading animation:
class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}Thirteen, how to update the Angular project
Here is the update information , telling you the whole process, and what to do before the update, as well as the steps to update the application, and prepare for future versions of Angular.
We removed many previously deprecated APIs (such as OpaqueToken) and also announced some new deprecations. These changes are detailed in the guide above.