In this blog, let’s see what we should expect from the Angular 8 release. 

Good News. Angular 8 is coming - TCMHACK

Good News. Angular 8 is coming

<p>Angular is front-end framework that&rsquo;s focused on declarative templating, dependency injection and integrates some of the best practices to make web development less challenging. Angular&rsquo;s architecture is structured around components that are reusable and is built in a way that helps developers write code for the web, mobile and the desktop. In this tutorial, we are going to have at our options for quickly deploying an Angular application and some of the challenges that you might come across.</p>
<h2>Let&rsquo;s have a look at Angular CLI first</h2>
<p>Angular CLI is the official command-line tool that lets you generate, build, debug and serve Angular applications them and run tests and deploy them. This is an essential tool that you can use to create recommended boilerplates for your Angular application. To install Angular CLI, you can use the following npm command:</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">npm install -g @angular/cli</pre>
</div>
<p>To create a new Angular application, all you need to do is run this command:</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">ng new demoFirebaseApp</pre>
</div>
<p>To serve your application on your localhost, you can use this command:</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">cd demoFirebaseApp
ng serve</pre>
</div>
<p>Next up, you need to create a Firebase Account.</p>
<h2>Setting up a Firebase Account</h2>
<p>You will need to create a&nbsp;<a href="http://firebase.google.com/" target="_blank" rel="noopener">Firebase account</a>&nbsp;to be able to deploy your application and make it publicly available. Why Firebase? We&rsquo;re choosing Firebase over other alternatives because it&rsquo;s easy to set up and you can have your Angular application up and running under a couple of minutes. Apart from Firebase, there&rsquo;s Amazon S3 which is also ideal for file storage. For actual production builds, you can also use AWS toolkit to automate the build process.<span id="ezoic-pub-ad-placeholder-108" class="ezoic-adpicker-ad"></span><span id="div-gpt-ad-codeforgeek_com-medrectangle-4-0" class="ezoic-ad ezfound" data-google-query-id="CPDK6NWbkeECFYNJKwod6UUM5A"></span> With AWS, you can set up redundant S3 buckets or use&nbsp;<a href="https://n2ws.com/product/aws-backup" target="_blank" rel="noopener">third-party backup tools for AWS</a>&nbsp;so that there is no disruption while uploading new production builds. This helps you push your releases faster and goes well with the principle,&nbsp;<strong>&ldquo;Automate everything&rdquo;</strong>. Moving on, here are the steps that you need to follow to set up your Firebase account.</p>
<ol>
<li>Create a firebase account if you haven&rsquo;t already. Click the Add Project button to create a new project. <img class="aligncenter wp-image-139 size-full" src="../../../../uploads/1744864496096-image1.png" alt="" width="640" height="321"></li>
<li>Give your project a good name. We&rsquo;re going to name it &ldquo;Demo Firebase App&rdquo;. You can also choose the subdomain for your app. Your app will be hosted at subdomain.firebase-app.com.</li>
</ol>
<p>That&rsquo;s it!</p>
<h2>Installing the Firebase Tools</h2>
<p>To deploy your Firebase project, you&rsquo;d need to install&nbsp;<a href="https://github.com/firebase/firebase-tools" target="_blank" rel="noopener noreferrer">firebase-tools</a>&nbsp;which is a toolbelt that comprises of Firebase authentication and deployment. To install Firebase tools, you can use npm.<span id="ezoic-pub-ad-placeholder-109" class="ezoic-adpicker-ad"></span><span id="div-gpt-ad-codeforgeek_com-box-4-0" class="ezoic-ad ezfound" data-google-query-id="COaH-r2bkeECFYmQjwodve8Mwg"></span></p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">npm install -g firebase-tools</pre>
</div>
<p>Once you have the tools, you can use the firebase command to login to your firebase account. Run firebase login and you should see something like this: <img class="aligncenter wp-image-137 size-full" src="../../../../uploads/1744864518491-image3.png" alt="" width="640" height="80"> Open the link, log in to your Google account the way that you usually do and if everything goes well, you will see the login success page. <img class="aligncenter wp-image-136 size-full" src="../../../../uploads/1744864533759-image4.png" alt="" width="640" height="367"></p>
<h2>Using Firebase In Our Angular App</h2>
<p>In this step, we&rsquo;re going to use the firebase CLI too initialize a firebase repository inside our project and then use it to push the build version into the Firebase storage.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">firebase init</pre>
</div>
<p>When you run the initialization script, you will be asked a few questions. &gt;&nbsp;<strong>Which Firebase CLI features do you want to set up for this folder?</strong>&nbsp;(Press Space to select features, then Enter to confirm your choices) Hosting: Configure and deploy Firebase Hosting sites &gt;&nbsp;<strong>Select a default Firebase project for this directory:</strong>&nbsp;demo-angular-app (demoangularapplication) &gt;&nbsp;<strong>What do you want to use as your public directory?</strong>&nbsp;dist &gt;&nbsp;<strong>Configure as a single-page app (rewrite all urls to /index.html)?</strong>&nbsp;Yes The default firebase project corresponds to the project that we created earlier. For the third question, make sure that the name of the public directory is dist. This is important because Angular places the builds in the dist directory. <img class="aligncenter wp-image-138 size-full" src="../../../../uploads/1744864553566-image2.png" alt="" width="640" height="314"> The details entered here are configurable. Firebase creates two files&nbsp;<strong>.firebaserc</strong>&nbsp;and&nbsp;<strong>firebase.json</strong>. Feel free to open the files to see the contents.</p>
<h2>Deploy Your Application</h2>
<p>To deploy your Angular application, you can use the CLI tool to generate a build and then use the firebase toolkit to deploy into the cloud. Generating a build is easy with Angular CLI.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">ng build</pre>
</div>
<p>Angular generates a /dist directory where all the build artifacts are kept. If you open the directory, you will find the following content and their respective file sizes.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">vendor.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2.2 MB
polyfills.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 163 KB
main.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;13 &nbsp;KB
inline.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;6 &nbsp; KB
styles.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;10 &nbsp;KB</pre>
</div>
<p>A 2.2 MB bundle is bad for production. It might take a couple of minutes to load the bundle page. For production builds, you can run the below command.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">ng build --prod</pre>
</div>
<p>The prod flag tells the ng script to generate a build file for production. Angular will use industry standard techniques to reduce the output size and minify the JavaScript bundle so that the production build will load fast on your server. If you&rsquo;re curious to know the exact difference in sizes, here&rsquo;s the file sizes now.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">vendor.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;352 KB &nbsp; &nbsp;// Reduced from 2.2 MB
polyfills.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 57 &nbsp;KB &nbsp; &nbsp;// Reduced from 163 KB
main.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;12 &nbsp;KB &nbsp; &nbsp;// Reduced from 13 &nbsp;KB
inline.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2 &nbsp; KB &nbsp; &nbsp;// Reduced from 6 &nbsp; KB
styles.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;0 &nbsp; KB &nbsp; &nbsp;// Reduced from 10 &nbsp;KB</pre>
</div>
<p>That&rsquo;s nearly about 80% of the decrease in file size and the size is usually okay for a webpage. The actual deployment is just a command away now.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">firebase deploy</pre>
</div>
<p>If everything goes okay, you should see something like this:</p>
<div class="codecolorer-container text twitlight">
<div class="text codecolorer">
<ul>
<li>=== Deploying to 'demoangularapplication'...&nbsp;</li>
<li>deploying hosting...</li>
<li>hosting: preparing dist directory for upload...&nbsp;</li>
<li>hosting: 8 files uploaded successfully...</li>
<li>Deploy complete!</li>
</ul>
<p>Project Console: <a href="https://console.firebase.google.com/project/demoangularapplication/overview">https://console.firebase.google.com/project/demoangularapplication/overview</a></p>
<p>Hosting URL: <a href="https://demoangularapplication.firebaseapp.com">https://demoangularapplication.firebaseapp.com</a></p>
</div>
</div>
<p>The hosting URL is the actual URL of the website. To enhance and automate this further, you can add a small script to package.json that looks like this:</p>
<div class="codecolorer-container javascript twitlight">
<pre class="javascript codecolorer"><span class="st0">"scripts"</span><span class="sy0">:</span>&nbsp;<span class="br0">{</span>
&nbsp; ...&nbsp;
&nbsp;&nbsp;<span class="st0">"deploy"</span><span class="sy0">:</span>&nbsp;<span class="st0">"ng build --prod &amp;&amp; firebase deploy"</span>
<span class="br0">}</span><span class="sy0">,</span></pre>
</div>
<p>You can now execute npm run deploy to create a build and then deploy it into firebase.</p>
<h2>Summary</h2>
<p>In this post, we&rsquo;ve covered everything that you need to know about deploying Angular on Firebase. You can then connect Firebase to your domain by going to the console. With Firebase, you can experiment for free and the basic plan is sufficient for almost all development purposes. We hoped you enjoyed reading this. If you have any thoughts, please share them in the comments.</p>

Angular is front-end framework that’s focused on declarative templating, dependency injection and integrates some of the best practices to make w...

Good News. Angular 8 is coming

How to Set Up an Angular Application on Firebase