Angular2 – Minimal seed

in Front-End Web Technologies

Angular2 is great. It offers much mature component based architecture than Angular 1

However, simplicity is lost.

For example, take a look at Angular2 QuickStart tutorial. You need to follow more than 10 steps in order to complete the preparation for a simple Angular2 project. These steps include configuration of NPM, Typescript, SystemJS and more. In some cases it will take more than 2 minutes just for restoring the NPM packages and those packages will hold more than 90MB of disk space consumed by more than 20,000 files !!!

For large scale project this is acceptable. For a QuickStart this is no no. Actually, I am quite surprised that Google haven’t yet make this process simpler

Of course, you can use some popular Angular2 seed like https://github.com/mgechev/angular2-seed. However, this seed is even worse, since it incorporates more technologies into the project like protractor and karma which makes the setup time even longer.

So, I decided to create a thin Angular 2 seed project. I named it angular2-min-seed and you can clone it from https://github.com/oricalvo/angular2-min-seed

Assuming you are using WebStorm you just need to “git clone” the repository, open the directory and run the main index.html file. No gulp, no “npm install”. Just open and run. The repository already contains all required WebStorm configuration for compiling Typescript files (currently, no support for others IDE)

The index.html is simple and much resemble the one for Angular1

  <html>
  <head>
      <title>Angular 2 QuickStart</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
  
      <link rel="stylesheet" href="styles/site.css">
  </head>
  <body>
     <my-app>Loading...</my-app>
 
     <script src="lib/angular.all.js"></script>
     <script>
         System.import('app').catch(function(err){ console.error(err); });
     </script>
 </body>
 </html>

Enjoy,

 

Contact us
You might also like
Share: