Angular team has released Angular 5.0 on 1st Nov 2017. They focused on most new features and bug fixes. This release continues our focus on making Angular smaller, faster, and easier to use.<\/p>\n
Following things are New:<\/strong><\/p>\n Angular CLI 1.5 and Angular 5.0.0 <\/u><\/strong><\/p>\n Now we are in CLI 1.5, if you install CLI 5.0, automatically you will get the angular 5.0 versions default in your package.json file in angular app.<\/p>\n \u00a0Typescript updated \u00a0to 2.4<\/u><\/strong><\/p>\n Dynamic\u00a0import\u00a0expressions are a new feature and part of ECMAScript that allows users to asynchronously request a module at any arbitrary point in your program.<\/p>\n RXJS was updated to 5.5 version:<\/u><\/strong><\/p>\n This recent release of RxJS fully empowers developers to avoid the side effects of the<\/p>\n previous import mechanism with a new way of using RxJS called \u201clettable operators\u201d.<\/p>\n These new operators eliminate the side effects and the code splitting .<\/p>\n Tree shaking problems that existed with the previous \u2018patch\u2019 method of importing operators.<\/p>\n instead of :<\/strong><\/p>\n user below like this:<\/strong><\/p>\n Buid optimizes.,Bundle size reduced, Speed the app<\/u><\/strong><\/p>\n Ahead -of -time compiler<\/p>\n Converts your angular code before browser downloads and run it<\/p>\n Aot<\/strong>: \u00a0faster rendering . few async reauests, smaller download<\/p>\n watch mode files ngc \u2013watch<\/strong>. This command will watch your file what are the file executing<\/p>\n Easier to build progressvie web apps<\/u><\/strong><\/p>\n The build optimizer does is to remove Angular decorators from your application\u2019s runtime code. Decorators are used by the compiler, and aren\u2019t needed at runtime and can be removed. Each of these jobs decreases the size of your JavaScript bundles, and increases the boot speed of your application for your users.<\/p>\n Their goal is to make this angular default option for most developers<\/p>\n ->service workers<\/p>\n ->small, easier and more powerfull<\/p>\n ->Http client module<\/strong> feature added. \u00a0from<\/p>\n removed map(res=> res.jon()) calls which no longer needed with http client module.<\/p>\n depreacted<\/strong> http in 5.0 version,\u00a0 for now you can use http in 5.0 but its depreacted. In future they may removed from angular 5.0<\/p>\n Angular Form validation<\/u><\/strong><\/p>\n They added some new feature on forms.<\/p>\n angular 4 form validates the form when we entered the characters.<\/p>\n but in angular 5 they inclueded validation on blur and submit<\/p>\n validation and value updates on `blur<\/strong>` or on `submit<\/strong>`, instead of on every input event<\/p>\n Template Driven Forms<\/u><\/strong><\/p>\n Before<\/strong><\/p>\n After<\/strong><\/p>\n OR<\/strong><\/p>\n Validations will be done on submit.<\/p>\n Or you can add for each individual with ngModel options<\/p>\n Or simply you can use the reactive forms<\/p>\n Reactive Forms<\/u><\/strong><\/p>\n Before<\/strong><\/p>\n After<\/strong><\/p>\n Changes with pipes<\/u><\/strong><\/p>\n DepreactedI 18 Npipes module<\/p>\n old pipes will depreacted but you can use now. In future they may removed from angular 5.0<\/p>\n Increase standardization across browsers<\/p>\n Internationalized Number, Date & Currency<\/p>\n Router Life cycle Events:<\/u><\/strong><\/p>\n New lifecycle events to the router, allowing developers to track the cycle of the router from the start<\/p>\n of running guards through to completion of activation. These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure performance of guards and\/or resolvers. Allow develpers to track the routing cycle used to do things like show spinners, measures performance of guards<\/p>\n GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, Resolve End,<\/p>\n ActivatonEnd, ChildActivationEnd<\/p>\n An example of using these events to start\/stop a spinner might look like this:<\/p>\n Angular Universal State Transfer API and DOM Support<\/u><\/strong><\/p>\n Easily share application state between the server side and client side versions of your application.<\/p>\n And helping developers to perform \u00a0server side rendering (SSR) of Angular applications.<\/p>\n By rendering your Angular applications on the server and then bootstrapping on top of the generated HTML, you can add support for scrapers and crawlers that don\u2019t<\/p>\n Support JavaScript, and you can increase the perceived performance of your application.<\/p>\n In 5.0.0, the team has added ServerTransferStateModule<\/strong> and the corresponding BrowserTransferStateModule<\/strong>. This module allows you to generate information as part of your rendering with platform-server, and then transfer it to the client side so that this information does not need to be regenerated<\/p>\n This means when you fetch the data over http, by transfer data from there server, this means developers no need to make 2nd HTTP request<\/p>\n It supported more DOM manipulations out of the box within server side contexts, improving our support for 3rd party JS and Component libraries that aren\u2019t server-side aware<\/p>\n Improvements on compiler:<\/u><\/strong><\/p>\n They improved compiler to supports incremental compilation. Its provide faster rebuilds,<\/p>\n It builds with AOT, and added new feature to Decorators. And made it possible to smaller bundles<\/p>\n By remove the whitespaces.<\/p>\n Typescript Transforms<\/u><\/strong><\/p>\n Typescript transform, making incremental rebuilds dramatically faster<\/p>\n You can take advantage of this by running ng serve with the AOT flag turned on.<\/p>\n You can take advantage of this by running ng serve with the AOT flag turned on.<\/p>\n ng serve \u2013aot<\/strong><\/p>\n This will become the default in a future release of the CLI<\/p>\n On this transforms, we don\u2019t need a genDir<\/strong> anymore, and outDir<\/strong> has been changed: we are now always emitting generated files for packages in node_modules.<\/strong><\/p>\n Preserve Whitespace<\/u><\/strong><\/p>\n Tabs, newlines, and spaces in your templates are recreated and included in the build by the compiler.<\/p>\n You can now choose whether or not to preserve whitespace coming from your components and your application. 2)<\/strong> specify in tsconfig.json file also: by default its true.<\/p>\n Decorator Support :<\/u><\/strong><\/p>\n Expression lowering in decorators for lambdas and the value of useValue, useFactory and data in object literals. This allows you to use values that can only be calculated at runtime in decorators for expressions that are lowered.<\/p>\n You can now use a lambda instead of a named function, meaning you can execute code without affecting your d.ts or your public API.<\/p>\n -> lower expressions as part of useValue.<\/p>\n Replace the ReflectiveInjector with StaticInjector<\/u><\/strong><\/p>\n In order to remove even more polyfills, we\u2019ve replaced the ReflectiveInjector with the StaticInjector.<\/p>\n This injector no longer requires the Reflect polyfill, reducing application size for most developers.<\/p>\n Before<\/strong><\/p>\n After<\/strong><\/p>\n Please refer angular blog for more info:<\/p>\n https:\/\/blog.angular.io\/version-5-0-0-of-angular-now-available-37e414935ced<\/a><\/p>\n update to angular 5.0 from this below site<\/u><\/strong><\/p>\n If you want to update your angular app to 5.0, just go to below website and give your current version in the fields.<\/p>\n https:\/\/angular-update-guide.firebaseapp.com\/<\/a><\/p>\nimport { Observable } from 'rxjs\/Observable';\r\n\r\nimport 'rxjs\/add\/operator\/map';\r\n\r\nimport 'rxjs\/add\/operator\/filter';\r\n\r\nnames = allUserData\r\n\r\n.map(user => user.name)\r\n\r\n.filter(name => name);<\/pre>\nimport { Observable } from 'rxjs\/Observable';\r\n\r\nimport { map, filter } from 'rxjs\/operators';\r\n\r\nnames = allUserData.pipe(\r\n\r\nmap(user => user.name),\r\n\r\nfilter(name => name),\r\n\r\n);<\/pre>\nimport { HttpClientModule } from '@angular\/common\/http';<\/pre>\n<input name=\"firstName\" ngModel><\/pre>\n
<input name=\"firstName\" ngModel [ngModelOptions]={updateOn: 'blur'}><\/pre>\n<input name =\"firstName\" ngModel[ngModelOptions]={updateOn: 'blur'}><\/pre>\nnew FormGroup(value);\r\n\r\nnew FormControl(value, [], [myValidator])<\/pre>\n
new FormGroup(value, {updateOn: 'blur'}));\r\n\r\nnew FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})<\/pre>\nclass MyComponent {\r\n\r\nconstructor(public router: Router, spinner: Spinner) {\r\n\r\nrouter.events.subscribe(e => {\r\n\r\nif (e instanceof ChildActivationStart) {\r\n\r\nspinner.start(e.route);\r\n\r\n} else if (e instanceof ChildActivationEnd) {\r\n\r\nspinner.end(e.route);\r\n\r\n}\r\n\r\n});\r\n\r\n}\r\n\r\n}<\/pre>\n
\n1)<\/strong> You can specify this as part of each component\u2019s decorator, where it currently defaults to true.<\/p>\n@Component({\r\n\r\ntemplateUrl: 'about.component.html',\r\n\r\npreserveWhitespaces: false\r\n\r\n}\r\n\r\nexport class AboutComponent {}<\/pre>\n{\r\n\"extends\": \"..\/tsconfig.json\",\r\n\"compilerOptions\": {\r\n\"outDir\": \"..\/out-tsc\/app\",\r\n\"baseUrl\": \".\/\",\r\n\"module\": \"es2015\",\r\n\"types\": []\r\n},\r\n\"angularCompilerOptions\": {\r\n\"preserveWhitespaces\": false\r\n},\r\n\"exclude\": [\r\n\"test.ts\",\r\n\"**\/*.spec.ts\"\r\n]\r\n}<\/pre>\nComponent({\r\n\r\nprovider: [{provide: SOME_TOKEN, useFactory: () => null}]\r\n\r\n})\r\n\r\nexport class MyClass {}<\/pre>\nComponent({\r\n\r\nprovider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]\r\n\r\n})\r\n\r\nexport class MyClass {}<\/pre>\nReflectiveInjector.resolveAndCreate(providers);<\/pre>\n
Injector.create(providers);<\/pre>\n