How to Read Local JSON Files & Deploy an Angular App

Deploying an Angular App to Netlify

“I learned all about life with a ball at my feet” Ronaldinho!

UJ Men’s Soccer — College Soccer 2016

I have been playing soccer since I was 6; I played in middle school, high school, and college. I also briefly played semi-pro and currently playing young adult league. I have learned so much and met many amazing persons over the last 22 years of being part of soccer teams and playing soccer in 4 countries.

Being part of a team has helped me develop the ability to work together towards a common goal; which is an essential part of any team, as well as an important life skill. I have made friendships, developed communication skills, feel a sense of community, and learned to respect and admire the diversity in my teammates and coaches from different races, cultures backgrounds, countries, religions, etc.

“To me, soccer is so much more than a ball and two goals; it connects people from all of the corners of the world.”

So, for this demo application, I’m going to show a list of my favorite premier league midfielders.

I’ll be reading and getting data from the JSON file store inside the project folder.

TIP: Work better as a team by sharing and collaborating on reusable Angular components. Use Bit to export your project’s reusable components and share them in Bit’s cloud.

An example of an Angular components collection on Bit.dev

UJ Men’s Soccer Alum Game 2018

There are several ways to read local JSON files in Angular. I’m going to show you the easiest way to read local JSON files which works for both online and Offline Angular app. We’ll then add Material Design Bootstrap for styling and data display and deploy the app live using Netlify.

Assumptions: * I'm assuming that you are familiar or have used angular before. * You are going to store or are storing your project files on github

If you don’t have an angular project to try to read a local JSON file and put it live, you can simply create a demo project and follow along with me.

Just to make this more fun. I’m going to use MDBootstrap Angular Free version for styling and data display. So follow to steps for installation and starting a new project:

Step 1: Create a new angular project using Angular CLI command:

ng new your-angular-project --style=scss

Step 2: cd your-angular-project

Step 3: GitHub npm install

npm i angular-bootstrap-md --save

Step 4: to app.module.ts add

import { NgModule } from '@angular/core';

import { MDBBootstrapModule } from 'angular-bootstrap-md'; @NgModule({

imports: [

MDBBootstrapModule.forRoot()

]

});

Step 5: Make sure that CSS style is set to "scss" in angular.json file, if not change:

"schematics": {

"@schematics/angular:component": {

"styleext": "css"

}

}

to

"schematics": {

"@schematics/angular:component": {

"styleext": "scss"

}

}

Step 6: Make sure you have src/styles.scss. If you have src/styles.css instead, rename it to .scss .

if you want to change styles in an existing project you can use the command: ng set defaults.styleExt scss

Step 7: add below lines to angular.json:

"styles": [

"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",

"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",

"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",

"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",

"node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",

"node_modules/angular-bootstrap-md/assets/scss/mdb.scss",

"node_modules/animate.css/animate.css",

"src/styles.scss"

],

"scripts": [

"node_modules/chart.js/dist/Chart.js",

"node_modules/hammerjs/hammer.min.js"

],

Step 8: install external libs

npm install -–save chart.js@2.5.0 @types/chart.js @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

Step 9: Run server

ng serve --open

The content you see on the page are some default content generate by MDB Angular. My app demo looks like this:

Ng “serve” followed by “ — open” flag will automatically launch and open the web browser. if you simply typed “ng serve” and once your app is up and running, visit the page http://localhost:4200 to make sure everything works fine.

Go here for more details info!