Upgrading ngCli to v3

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.

  1. Angular Cli change log
  2. 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.

ChangeLog



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.

vendors.js

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  

vendors.css

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.

touch app/index.html  

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 angular-media-player

bower install angular-media-player --save  

Now as we have special vendors.js file inside vendors directory we can simply require our new dependencies.

vendors/vendors.js

require("angular");  
require("angular-route");  
require("angular-deferred-bootstrap");  
// Our newly added dep
require("angular-media-player");  

BOOM

Start your new app by saying

ng serve  

Now all we have done is.

  1. Replace app folder.
  2. Require 3rd party dependencies inside vendors.js.
  3. Create index.html inside app not root of your project.