Web_Designer_Issue_262_2017

Developer tutorials
What’s new in Angular 4?
7. Unmet Peer Dependencies
Peer dependencies are for managing projects that
have packages relying on diferent versions of the
same dependencies. You have to add these manually
to your package.json file. The peer dependencies that
we need for Flower Shop include older versions of
package.json
For ongoing Angular projects, your package.json
will need monitoring. If you update any part of your
app, subsequent errors are likely to be solved by
checking your dependency versions. The best place
to check this is in terminal errors on npm install.
@angular/{core,http}, rxjs and zone.js. Review the errors in
the terminal output and add each missing dependency
to package.json.
"peerDependencies": {
"@angular/core": ">= 2.0.0",
"@angular/http": ">= 2.0.0",
"rxjs": "^5.0.0",
"zone.js": "0.7.8"
},
8. Watch out for custom
component name changes
Our Flower Shop app is making use of an open-source
custom component called ng2-modal. However, the
author has since updated their naming convention to
ngx-modal. We need to modify our dependency name
and ng-module imports accordingly.
package.json:
"dependencies": {
[...]
"ngx-modal": "0.0.25",
[...]
},
app/app.module.ts:
import { ModalModule } from 'ngx-modal';
9. Check versions
Our custom modal component also needs updating
to a more recent version, so be sure to update it
with npm.
$ npm install ngx-modal@latest --save
10. Check your work
Now that we’ve patched up our dependencies, it’s a
good idea to clear node_modules and build it again
from our package.json. If all goes well you should
have a clean build! If you don’t, something may still
be missing in your dependency versions. Take
another look.
$ rm -rf node_modules/
$ npm cache clean
$ npm install
$ ng serve --open
11. View engine
Let’s see what new features we can use in 4.0. The new
view engine compiles to a much smaller bundle, meaning
Top
Our custom modal module needs renaming to match new versions of
angular naming conventions
Above
Our build should succeed now that we’ve corrected our dependency
version discrepancies
Right
Make sure all third-party and custom-dependency versions are up to date!
Use @latest or one of the stated ‘valid install target’ version numbers
82