Angular 2 Challenge Day 14 - Using 3rd party JS with Angular CLI and Configuring an In-Memory RESTful endpoint

You’ll need to test your API - and your backend might not be built yet. But no matter! The Angular 2 team have your back with an InMemoryDbService Http RESTful database.

Learn how to configure it in today’s episode (or just learn about using 3rd party JS with the Angular CLI)

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] Install a 3rd party npm module to simulate REST (I’ve used a specific version since I know this one is compatible with Angular 2 RC5)

npm install --save angular2-in-memory-web-api@0.0.17

[ ] Update angular-cli-build.js to copy the npm over to dist

  'angular2-in-memory-web-api/*.+(js|js.map)'

[ ] Run an ng build to copy it over to dist and have a look

[ ] Update system-config.ts - but only in the top section of the file

/** Map relative paths to URLs. */
const map: any = {
  'angular2-in-memory-web-api' : 'vendor/angular2-in-memory-web-api'
};

/** User packages configuration. */
const packages: any = {
  'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
   }
};

[ ] Now we import the actual classes into our app\app.module.ts

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { MockDatabaseService }  from './mock.database.service';

    imports: [ BrowserModule, FormsModule, routing, HttpModule,
    InMemoryWebApiModule.forRoot(MockDatabaseService, { 
        delay: 100,  rootPath: 'api/'
    }) ],

[ ] Implement our mock.database.service.ts method

import { InMemoryDbService } from 'angular2-in-memory-web-api';
import { Tweet } from './tweet';

export class MockDatabaseService implements InMemoryDbService {
  createDb() {

    let friends = [
       "Mary", "Joe", "Karen", "Phil", "Toni" 
    ];

    let tweets = [

      new Tweet(1, 'Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', 'Glen', new Date(), ['Joe'], []),

      new Tweet(2, 'Measuring programming progress by lines of code is like measuring aircraft building progress by weight', 'Joe', new Date(), [], ['Mary']),

      new Tweet(3, 'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', 'Mary', new Date(), ['Glen'], ['Mary']),

      new Tweet(4, 'People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones', 'Glen', new Date(), ['Joe', 'Mary'], []),

      new Tweet(5, 'You can’t have great software without a great team, and most software teams behave like dysfunctional families.', 'Joe', new Date(), [], ['Mary', 'Glen']),

    ];
    return { 'tweets' : tweets, 'friends' : friends };
  }
}

[ ] Update the Tweet constructor to handle that id field

constructor(public id : number, public body: string, public author: string, public date: Date, public retweets: Array<string>, public favorites: Array<string>)	

[ ] Fix any code that the new id field on Tweets breaks

[ ] Demo that direct URL routing is not messed with

[ ] Demo that you can debug into your new class/api

[ ] Run it and celebrate the win!

[ ] Next up we’ll start looking into CRUD http