Posts

Showing posts from 2017

Angular 5 - Ahead of Time build configuration for rollup

Earlier the @angular Ahead of Time compilation cookbook showed you the compilation steps using the @angular/compiler-cli (ngc) and rollup. From Angular 5 it seems to be all about the Angular CLI (using ng build --prod). In some cases though it's nice to have the rollup recipe. We also want to benefit from the build optimizer and rxjs esm module which is default in Angular 5. So I've written down the configuration steps here for building a rollup-based AoT build for Angular 5. The typescript configuration for the @angular/compiler-cli (ngc). Store in file tsconfig_aot.json. { "compilerOptions": { "outDir": "js", "module": "es2015", "moduleResolution": "node", "target": "es5", "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "dom", "es2017" …

Creating Angular libraries

When your app grows and you make components that could be reused in other apps it's a good thing to split out that code in a library. Also if your app is big already and someone else is going to add a new feature to it, it's much easier if they can work on that feature in a small isolated project and when ready import it into the main app as a library.

The architecture of Angular with modules help us organize the application code into blocks of functionality. The step of splitting into libraries should build on that, but add the benefits of not having to see code not relevant to the modules we're currently working on and to easily install and reuse in several applications without having to duplicate code across projects.

Creating an Angular library is basically about packaging compiled NgModules into a format that can be installed into another application using a package manager like npm. It could be done as easily adding the typescript sources and html templates to a tar.…

Create PDF's in Angular / Typescript

Posting an example of how to create PDFs directly in the browser with no server involved using Angular, Typescript and pdfmake.org.

The demo is here: https://fintechneo.github.io/angular2-templates/

The PDF creation is initiated in the createPDF() method of this source: https://github.com/fintechneo/angular2-templates/blob/master/app/pages/accountreportcomponents.ts

The pdfmake library is made available to Angular and Typescript by creating a script element inside an rxjs/Observable that is notified on the script element onload. You can see how it's done in here: https://github.com/fintechneo/angular2-templates/blob/master/app/pdfmake/pdf.service.ts

Simple Firebase service for Angular 2

If you want a very simple alternative to Angularfire you may create a firebase service very easily. I made this to avoid extra configuration when it comes to adding npm packages and configuring for bundling. This is done by downloading the scripts from Firebase CDN directly by using a dynamically created script tag.

Once the service is initialized you'll find the database in the public database property, and you just use the regular Firebase API. (Example: this.fbservice.database.ref('someproperty').set(somevalue) - and remember to have fbservice : FireBaseService in your component constructor to inject the service. )

And here's the code for the service:
import{Injectable}from'@angular/core';import{Observable}from'rxjs/Observable';declareconstfirebase : any;constconfig={apiKey:"",authDomain:".firebaseapp.com",databaseURL:"",storageBucket:".appspot.com",messagingSenderId:"",};@Injectable() exportclassFireB…