Salient Soft

This post discusses the alternative way of specifying input parameters for angular 2.

This can be done using either:-

@Component{(
    selector: "my-component",
    inputs: ["attr"]
)}
export class MyComponent {
}

or alternatively:-

@Component{(
    selector: "my-component"
)}
export class MyComponent {
    @Input()
    public attr: any;
}

No Comments »

The cause of this is not immediately obvious, but it blocked startup via ionic serve – the error continues to cite a template error of some kind.

The actual issue is an invalid file path on the templateUrl attribute of the @Component({ decorator of the relevant component mentioned in the error. I found a variety of different file paths used – some with no path and just the filename, some with “./” on the front, and the offending one had a prefix of “src/” which caused the failure.

Just correcting the file path on the attribute fixes the problem.

No Comments »

The following expressions caused a brief glitch whereby null was displayed prior to the observable locationsCount emitting its value:-

<span text-capitalize>show all{{showAllActive ? ' ' + (locationsCount | async) : ''}}</span>

This makes sense as the observable with its async pipe, | async , which handles the observable, is part of a string expression. In other cases where the observable is e.g. a returned list, then you would just get an empty list with no entries. However in this case, Angular needed to evaluate and display the expression and so null was briefly displayed instead of the value of locationsCount.

The easiest way around this is to use a logical or which acts as a null coalescing operator in JavaScript/TypeScript, to replace the null with a suitable constant string:-

<span text-capitalize>show all{{showAllActive ? ' ' + (locationsCount | async)||' ' : ''}}</span>

The use of (locationsCount | async) || ‘ ‘  checks the first operand regardless of type, and if it is falsey, the second operand is taken. This is explained in this post here.

An alternative, a more complex solution which also worked in my case and may be interesting in other cases, is to concatenate the observable with another observable which emits a constant string using Observable.of(). The concat method emits all the values from each of the passed observables in turn, proceeding to the next one when an observable closes, as detailed in the RxJS api docs here. Therefore, the constant observable emits a value and completes/closes immediately which prevents the null glitch, followed by the locationsCount observable when it finally emits a value (which came from a mapped http api call):-

initial version without constant observable:-

this.locationsCount = this.locationsAutoCompleteService.getLocationsCount()
  .map(count => {
    let countString: string = this.formatLocationsCount(count);
    return countString;
  });

Alternative version with concatenated constant observable:-

this.locationsCount = Observable.of(' ').concat(
    this.locationsAutoCompleteService.getLocationsCount()
    .map(count => {
      let countString: string = this.formatLocationsCount(count);
      return countString;
    })
  );

No Comments »

The following code fragment in a dao gave an error when casting the response json. The cause is not clear, but 2 code variations were tried:-

//API calls
  getFeatures(): Observable<FeaturesSearchResult> {
      return this.http.get(this.queryFeatures())

      // *** This version originally failed citing that property total_rows did not exist
      .map(response => {return <FeaturesSearchResult>(response.json())});
  }

I then tried using the “as” operator for the cast instead of the <> syntax. This worked. Strangely, right at the end I managed to get an example with the”<>” syntax working too, but the reason and differences were not at all clear.
However, I noted that the latter is also the preferred syntax now, as unlike the “<>” syntax it is also compatible with JSX/.tsx syntax (JSX is an embeddable React xml-like syntax which transforms into JavaScript)
See here for details on JSX/.tsx, and on the React wikipedia entry. The working code fragment follows:-

//API calls
  getFeatures(): Observable<FeaturesSearchResult> {
      return this.http.get(this.queryFeatures())// *** This version originally failed citing that property total_rows did not exist

      // *** This version worked by using the “as …” syntax for casting rather than <>
      .map(response => {return response.json() as FeaturesSearchResult});
  }

The full listing of the code for the working version (less imports for brevity) follows:-

features-dao.ts

@Injectable()
export class FeaturesDao {
  constructor(private appConfig: AppConfig,
              private http: Http) {}

//API calls
  getFeatures(): Observable<FeaturesSearchResult> {
      return this.http.get(this.queryFeatures())
      .map(response => {return response.json() as FeaturesSearchResult});
  }

//API query definitions
  queryFeatures(): string {
    return `${this.appConfig.apiBase}_design/places/_view/featuresByOrdinal?include_docs=true`;
  }

}
export interface FeaturesSearchResult extends CouchDBResult<FeaturesSearchResultRow>  {}
export interface FeaturesSearchResultRow extends CouchDBResultRow<number[], any, FeatureDoc> {}

couchdb-result.ts

export interface CouchDBResult<R extends CouchDBResultRow<any,any,any>> {
  total_rows: number;
  offset: number;
  rows: R[];
}

export interface CouchDBResultRow<K,V,D> {
  id: string;
  key: K;
  value: V;
  doc?: D;
}

feature-doc.ts

export interface FeatureDoc extends CouchDBDoc {
  ordinal: number;
  name: string;
  description: string;
  searchable: boolean;
  rateable: boolean;
}

No Comments »

1/ I took the latest 2017.1 upgrade when offered by Webstorm. This upgrade results in the following version:-

WebStorm 2017.1.2
Build #WS-171.4249.40, built on April 25, 2017
Licensed to Steve Woodley
You have a perpetual fallback license for this version
Subscription is active until April 9, 2018
JRE: 1.8.0_112-release-736-b21 x86
JVM: OpenJDK Server VM by JetBrains s.r.o
Windows 7 6.1

During the upgrade, Kaspersky complained that E:\Program Files (x86)\JetBrains\WebStorm 2017.1\jre32\bin\unpack200.exe contained a trojan malware virus. This caused the upgrade to fail.

I checked this online and discovered that Webstorm often gets cited as giving false malware positives, all of which are false. I was happy to allow this to proceed as a Kaspersky exception.

This Kaspersky forum post gives details on what to do (including disabling file antivirus). It then says to add a file exception rule for the file – the instructions for doing this may be found here. Whilst the link is for a 2014 version of Kaspersky, it is similar enough to be correct with the current version as at 2017, with just a few textual prompt/description differences. Note that I added the full file name, but did not enter a value for the file/folder name mask ref the “virus encyclopedia” quoted in the instructions. (I wouldn’t have known what to enter there anyway!). These 2 fields are an either/or – this is not quite made clear in the UI prompts, and is not enforced e.g. via a radio button choice or similar.

Once I did this I checked for updates in Webstorm, retried the new update, and it completed OK.

2/ Having done this, I restarted Webstorm and reloaded my Ionic project. Whilst loading the project, Kaspersky complained that “Server-side JavaScript run by a program with restrictions is attempting to create an embedded key or parameter in a protected registry key”

Effectively, Node.js was attempting to create a new subkey in the registry under TCP/IP Settings (not sure why it would do this, but I was confident that this was not Malware). Whilst Node.js was a trusted program, it was doing  it as instructed via an ionic batch script.

I tried to keep allowing the action but this did not work. The solution in the end came when I noticed that the component hierarchy mentioned in the Kaspersky error consisted of a series of green hyperlinks for each level. I was able to click on the green links, and this immediately took me to a Kaspersky settings screen for that component. I was able to see that the script component calling Node.js did not have permissions to create a security registry key. I was able to easily click on the relevant “?” entries to create a security registry subkey, and set the option to Yes.

So in all a plus for Kaspersky in making it easy to fix, but a minus as I had to work it out for myself and had not been able to find any online or other help on it.

Note for the future – any errors etc. from Kaspersky may have clickable links in them which take you to a place where you can add a rule to stop the error – this is always worth looking into. In my case the clickable links were not underlined but were green in colour.

Once I had done this, restarting Webstorm and opening the project went without any errors from Kaspersky.

No Comments »

A common pattern used in service layers is to make calls to an underlying repository or API, and then map the results to domain layer objects via mappers/convertors. Often, it may be necessary to make multiple repository calls and then combine them in the mapping phase to create the resulting domain object graph which is then returned. With traditional synchronous calls, e.g. to an underlying JPA repository, this is a straightforward exercise.

However, Angular 2 by default makes HTTP api call results available asynchronously as Observables, which poses an immediate issue with how to combine the results. I certainly did not want to embed Observables as properties within my domain objects, as I wanted the domain objects as POTOs (Plain Old Typescript Objects) and did not want to couple them/pollute them with Observables.

Handling the above pattern is in fact straightforward, but does involve a paradigm shift compared with imperative OO style programming as you need to get your head around reactive programming, in this case ReactiveX/RxJS which Angular uses.

• In this case we are using RxJs Observables for which the api is documented here.
• The available operators for use with Observables are documented here.
• ReactiveX/RxJs makes extensive use of Marble diagrams an example of which may be found here.
• Another useful introduction site to RxJS may be found here.

Note that it is possible to convert the observables to promises and use promise chaining to achieve similar results. However, I decided to stick with observables as the majority of comments online such as this post indicate that observables can do all that promises can, and more, and they are the default/chosen direction for Angular 2. It felt counter intuitive to have to convert the observables to promises all the time when there was no real need – whilst  and to do so appeared to go against the chosen way forward for Angular 2.

My first prototype needed to combine 2 API calls, and for this I used the combineLatest instance method. (This is called on one Observable and allows one or more other observables to be combined with it. There is also a static method available on the Observable class.) I found this solution in this StackOverflow post. These methods do do the following :-

1. Combine 2 or more observables and emits a single output observable
2. Before the output observable emits an item, all of the input observables must have emitted at least one item
3. Once all the observables have emitted something, the output emits an output item.
4. It continues to emit items whenever any of the input observables emit another item.
5. Note that in our case, multiple emits for an observable do not occur. Whilst we are using observables, each one will only emit a single output item in our case, when the HTTP call completes.
6. Note that per the example code below, I use lambdas (=> operator) routinely. The lambda used on the return of combineLatest will be called when the output observable emits an item (i.e. when both the HTTP calls have completed). The other lambdas are just used for standard synchronous filter/map/reduce operations on the arrays – these are standard in Javascript and hence Typescript, so they are not asynchronous/using observables.

For the requirement of my original pattern, i.e. make a number of repository calls, then map them all to a domain object graph, the above approach works fine. Note that there are a number of other operators on observables which are quite nuanced and this example just scratches the surface of Reactive programming, but in my experience the above is a very common pattern. Some of the other operators/methods distinguish between emits on an observable and the observable actually closing. As in the above case we just get one emit from each, we don’t need to get into that issue.

An outline example from my prototype code follows (imports and domain objects omitted for clarity). Note that it is just a prototype and a number of issues have not been properly addressed yet (such as externalisation of configuration data such as API urls):-

places-service.ts

@Injectable()
export class PlacesService {

  static apiBase: string = 'http://localhost:5984/places-guide/';
  static apiGetByLocationName: string = `${PlacesService.apiBase}_design/places/_view/placesByLocationName?include_docs=true`;
  static apiGetFeatures: string = `${PlacesService.apiBase}_design/places/_view/featuresByOrdinal?include_docs=true`;

  constructor(private http: Http, private featureMapper: FeatureMapper, private placeMapper: PlaceMapper) {}

  fetch(): Observable<Place[]> {
    return  this.http.get(PlacesService.apiGetByLocationName)

       //The lambda here is called when the output observable emits an item (which only happens once when both HTTP calls complete).
      .combineLatest(this.http.get(PlacesService.apiGetFeatures), (placesRows, featuresRows) => {
        let features: Feature[] = this.featureMapper.mapAll(featuresRows.json().rows);
        let places: Place[] = this.placeMapper.mapAll(placesRows.json().rows, features, PlacesService.apiBase);
        return places;
      });
  }
}

place-mapper.ts

@Injectable()
export class PlaceMapper {

  constructor(private placeFeaturesMapper: PlaceFeaturesMapper) {};

  public map(row: any, placeFeatures: PlaceFeatures, apiBase: string): Place {
    let place: Place = Place.create(
      row.id,
      row.doc.name,
      row.doc.strapline,
      row.doc.description,
      Address.create(
        row.doc.address.address1,
        row.doc.address.locality,
        row.doc.address.postTown,
        row.doc.address.postCode),
      row.doc.lat,
      row.doc.long,
      row.doc.website,
      row.doc.phone,
      row.doc.email,
      placeFeatures,
      apiBase + row.doc._id + "/thumbnail.jpg",
      apiBase + row.doc._id + "/detail.jpg"
    );
    return place;
  }

  public mapAll(rows: any[], features: Feature[], apiBase: string){
    let placesPlaceFeaturesMap: {[key: string]: PlaceFeatures } = this.createPlacesPlaceFeaturesMap(rows, features);
    return rows

      //this is standard array filtering and mapping with lambdas
      .filter(row => row.doc.type == 'place')
      .map(row => this.map(row, placesPlaceFeaturesMap[row.doc.placeFeaturesId], apiBase));
  }

  createPlacesPlaceFeaturesMap(rows: any[], features: Feature[]): {[key: string]: PlaceFeatures } {
    let placesPlaceFeaturesMap: {[key: string]: PlaceFeatures } =
      rows.filter(row => row.doc.type == 'placeFeatures')

        //This is a standard array lambda. Reduce is used as we are populating a single return object.

        .reduce((map, row) => {
          map[row.doc._id] = this.placeFeaturesMapper.map(row, features);
          return map;

        //Note that the {} is the seed/initial value for the reduce, where we initialise the empty output object
        }, {}

      );
    return placesPlaceFeaturesMap;
  }
}

place-features-mapper.ts

 
@Injectable()
export cl
ass PlaceFeaturesMapper {
  public map(row: any, features: Feature[]): PlaceFeatures {
    let list: PlaceFeature[] = this.buildList(row.doc._id, row.doc.placeFeatures, features );
    let map: {[key: string]: PlaceFeature} = this.buildMap(list);
    return PlaceFeatures.create(row.doc._id, list, map, features);
  }
  buildList(placeFeaturesId: string,
            rawPlaceFeatures: {[key: string]: {rating: number} },
            features: Feature[]): PlaceFeature[] {
    let placeFeatures: PlaceFeature[] = features
      .filter(feature => rawPlaceFeatures[feature.id])
      .map(feature => PlaceFeature.create(
          placeFeaturesId,
          feature.id,
          feature.ordinal,
          feature.name,
          feature.description,
          feature.searchable,
          feature.rateable,
          rawPlaceFeatures[feature.id].rating)
      );
  return placeFeatures;
  }
  buildMap(placeFeatures: PlaceFeature[]): {[key: string]: PlaceFeature} {
    let placeFeaturesMap: {[key: string]: PlaceFeature} =
      placeFeatures.reduce((map, placeFeature) => {
        map[placeFeature.featureId] = placeFeature;
        return map;
      }, {});
    return placeFeaturesMap;
  }
}
 
feature-mapper.ts

@Injectable()
export class FeatureMapper extends AbstractMapper<any, Feature> {

  public map(row: any): Feature {
    let feature: Feature = Feature.create(
      row.id,
      row.doc.ordinal,
      row.doc.name,
      row.doc.description,
      row.doc.searchable,
      row.doc.rateable);
    return feature;
  }
}

 
abstract-mapper.ts

export abstract class AbstractMapper<R,T> {
  public abstract map(row: R): T;

  public mapAll(rows: R[]): T[] {
    return rows.map(row => { return this.map(row);});
  }
}

 
									
					

						No Comments »					
					
				

This template is noteworthy as it contains a number of simple ready made use cases/patterns such as swipe gesture support, master/detail pages, searching, and simple entry forms.
As per this post, a tutorial starter app with the above template should be created as follows:-

ionic start my-super-starter-app super –v2
npm install

When I tried to run this I got the following error trace:-

Runtime Error

Cannot find module "ionic-native"

Stack

Error: Cannot find module "ionic-native"
at g (http://localhost:8100/build/polyfills.js:3:7133)
at Object.<anonymous> (http://localhost:8100/build/main.js:108352:7)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:82204:73)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:120594:70)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18 at http://localhost:8100/build/main.js:69:10

Ionic Framework: 3.0.1
Ionic Native: ^3.5.0
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 7.5.0
OS Platform: Windows 7
Navigator Platform: Win3
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

This Ionic forum post documents the problem, which appears to be because the starter template expects A version of ionic-native lower than 3 (mine was 3.5.0 as above). As per the post, I tried the following:-

1. Edited my package.json and changed the ionic-native version to 2.9.0
2. Entered npm install ionic-native –save

This did not work, it failed with a similar error.

Fortunately the post links to an updated template as the solution, in github here.

This can be cloned and used instead of entering ionic start my-super-starter-app super –v2

I tried the fixed version and it worked correctly. Note ref the comments in the various posts that it was not necessary to install ionic-native explicitly via npm install ionic-native –save

No Comments »

A new Ionic 2 application should be created via ionic-cli as follows:-

ionic start my-new-app tabs –v2

Note that the v2 switch is mandatory, as without it (and running ionic 2.2.1) I got a different folder structure which did not put the application code under a top level src/ directory – whilst this tutorial does not mention the switch, it is mentioned here.

Note also that the tabs keyword is an app template which creates a tabbed app. There are other choices as noted here .

The super starter template is noteworthy as it has simple examples of master/detail lists, searching, and simple forms. I tried this and had some issues getting it working but there is a fixed version which worked. I have documented this here.

Note also that this post here mentions using an earlier version of node (4.x) to avoid a number of issues. I have not tried that, as the current node version I have installed as I type is v7.5.0, which makes 4.x a pretty old version.

I may try the older one though, to see if the issues I hit with the menu toggle on the Nav bar menu might be solved. The issue I have hit is that the menu icon on the nav bar intermittently does not open the side menu. Typically clicking the same tab icon again or visiting another tab makes it work, such that it alternately fails and works. No solution has yet been found for this and I could not find any reference to it online.

Note that the default generated folder structure for —   v2 creates an app directory under /src, which is used for core app configuration stuff. I did attempt (mistakenly I now feel) putting the component and service layers under /src/app, but have now reverted that. Whilst this worked, when I then tried to move (with a webstorm refactor) /src/pages/ to /src/app/pages/ I hit numerous issues with  template errors/ html files not found when running ionic serve. I checked all the import and related configuration, and whilst some was incorrect, I eventually went through and corrected every .ts file individually and still had issues. This appears to be an issue – moving the /src/pages/ directory (for an app with the tabs template, as per the above ionic command) appears to break some hidden configuration that I could not find.

No Comments »

I was looking into this in order to find the best type for an arbitrary stream of Json.

This comment post here has an interesting discussion on this, and concludes that any is the most flexible, and there aren’t strong reasons for using the Object or {} (which are similar, as {} extends Object).

This post describes how to use TypeScript interfaces to describe the Json.

http://json2ts.com is a site that automatically creates the interfaces from the json for you, however in my case it did nothing when I gave it a returned CouchDB Json stream.

This stackoverflow post also discusses the issue and mentions json2ts.com – the poster evidently had more luck with it than I did.

No Comments »

Providers need to be declared as they ‘provide’ the objects to be injected – in many cases this will be a singleton reused whenever injected (much like a normal Spring bean in Java).

To be visible everywhere in the entire application, they should be declared in the Providers list in the root @NgModule  (e.g. app.module.ts).

However if not used globally, they can be for example registered in a component whereupon they will be visible to that component and its children only.

This angular doc here discusses dependency injection and where to register providers.

This angular doc here is the NgModule faq and also discusses the issue. It points out that registering the providers in the root AppModule (@NgModule as above) is the normal use case, and other cases are rare. In particular it makes the following points:-

Should I add application-wide providers to the root AppModule or the root AppComponent?

Register application-wide providers in the root AppModule, not in the AppComponent.

Lazy-loaded modules and their components can inject AppModule services; they can’t inject AppComponent services.

Register a service in AppComponent providers only if the service must be hidden from components outside the AppComponent tree. This is a rare use case.

More generally, prefer registering providers in modules to registering in components.

Discussion

Angular registers all startup module providers with the application root injector. The services created from root injector providers are available to the entire application. They are application-scoped.

Certain services (such as the Router) only work when registered in the application root injector.

By contrast, Angular registers AppComponent providers with the AppComponent‘s own injector. AppComponent services are available only to that component and its component tree. They are component-scoped.

The AppComponent‘s injector is a child of the root injector, one down in the injector hierarchy. For applications that don’t use the router, that’s almost the entire application. But for routed applications, "almost" isn’t good enough.

AppComponent services don’t exist at the root level where routing operates. Lazy-loaded modules can’t reach them. In the NgModule page sample applications, if you had registered UserService in the AppComponent, the HeroComponent couldn’t inject it. The application would fail the moment a user navigated to "Heroes".

Should I add other providers to a module or a component?

In general, prefer registering feature-specific providers in modules (@NgModule.providers) to registering in components (@Component.providers).

Register a provider with a component when you must limit the scope of a service instance to that component and its component tree. Apply the same reasoning to registering a provider with a directive.

For example, a hero editing component that needs a private copy of a caching hero service should register the HeroService with the HeroEditorComponent. Then each new instance of the HeroEditorComponent gets its own cached service instance. The changes that editor makes to heroes in its service don’t touch the hero instances elsewhere in the application.

Always register application-wide services with the root AppModule, not the root AppComponent.

No Comments »