Angular cli recently have been updated to v3 as a major release. There have been major strucutural changes leading to broken existing apps.
This post will cover following in depth.
- Angular Cli change log
- Upgrading our sound cloud app we built last time.
Though angCli has made major changes into the build and scaffolding process, it is going to be very simple to upgrade project structure.
Browserify with Webpack.
webpack recently has shown lot of potential in recent days. I do not want to get into
vs debate, but webpack is something that suits our project more then browserify.
gulp with broccoli js
Gulp is an awesome build tool but it was never built with intention to be embedded into applications.
This is where broccoli js comes handy, It is very easy to embed broccoli as compared to gulp.
There are also other benefits like faster incremental builds with broccoli , which you can read all over the web.
New vendors directory
Integrating 3rd party applications is key requirement for any project. New vendors directory will help you in importing and requiring 3rd party scripts and styles quite easily.
You can require any 3rd party libraries inside this file, for bower installed libaries simply pass library name and for other dependencies , pass full path.
require("angular") // installed using bower require("libs/myplugin") // custom require
You can use this file to include 3rd party css files.
@import url("../bower_components/jquery-ui/themes/theme.css"); @import url("../bower_components/webplate/source/webplate.css");
Moved index.html inside app directory
Also index.html file from root have been moved to app directory.
Upgrading Sound Cloud App
If you have followed my last tutorial on creating sound cloud streaming app using angCli, then locate your
ngSound app and follow below instructions to upgrade your app to new project structure.
Below instructions will work for any project , but you may have to make required changes depending upon your app.
Let's start by creating new angCli app.
ng new ngSoundv2
replace app directory inside ngSoundv2 with your old app directory inside ngSound.
rm -rf ngSoundv2/app cp -a ngSound/app ngSoundv2
create index.html file inside app directory.
Paste following content inside it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./vendors.css"> <link rel="stylesheet" href="./app.css"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script> <![endif]--> </head> <body> <div ng-view> </div> <script src="./vendors.js"></script> <script src="./app.js"></script> </body> </html>
Re install your required dependencies, in our case it was
bower install angular-media-player --save
Now as we have special vendors.js file inside vendors directory we can simply require our new dependencies.
require("angular"); require("angular-route"); require("angular-deferred-bootstrap"); // Our newly added dep require("angular-media-player");
Start your new app by saying
Now all we have done is.
- Replace app folder.
- Require 3rd party dependencies inside vendors.js.
- Create index.html inside app not root of your project.