Salient Soft

This isn’t obvious when you browse the documentation, at least when starting out.

I’m coming from having used for example ThemeRoller with PrimeFaces, where structural css is defined by the components, to give size, shape, layout etc. Theming css   is defined by the theme, using common style classes etc. used by all components, to give colours, textures and fonts etc. The two concepts are mutually orthogonal, so you can use any theme with any component, and create your own theme.

I’ve seen theming and themes mentioned on a number of Angular/Ionic related sites, but without the same concept of orthogonality – themes are mentioned along with specialised components which are deemed to be part of a theme. Therefore, theming in Angular appears to encompass more than just the look and styling of components, but also the actual components and their functionality.

This could be summarised simply as follows:- ThemeRoller encompasses the look of an application, with components such as Primefaces encompassing the feel of the application.

With Angular/Ionic, the concept of theming is broader and appears to encompass both look and feel.

Some excellent posts by Josh Morony on how to theme an ionic application help to get under the hood on all this, and are available here:-

https://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/

https://www.joshmorony.com/a-list-of-common-css-utility-attributes-in-ionic-2/

https://www.joshmorony.com/tips-tricks-for-styling-ionic-2-applications/

https://www.joshmorony.com/hacking-css-in-ionic-2/

No Comments »

Whilst Angular 2 routing is handled via routers, Ionic takes a different approach with the use of the NavController and related components based on it like Nav and Tab.

Ionic navigation allows views to be pushed and popped from a navigation stack, and allows a root page to be established for a particular navigation stack.

A useful tutorial on Ionic Navigation may be found here.

No Comments »

An <ion-item> is used (among other things) as the child of an ion-list and has a number of options, detailed here.

A particular issue I hit was that by default text in an item is truncated with an ellipsis on the end, whereas I wanted it to wrap and grow the item height.

Points on this:-

1. The item is set to have a min-height and so is capable of expanding down.
2. By default, it is set to have white-space:nowrap which prevents wrapping, and text-overflow:ellipsis which gives the ellipsis.
3. Wrap can be enabled per the text alignment section in the above ion-item page, using a utility attribute documented here. These attributes are useful as they allow general types of text transformation on a variety of components. In this case, adding the text-wrap attribute to the ion-item allows the text to wrap – it triggers a css attribute selector to set white-space:wrap (a neat use of custom attributes on a custom tag to trigger a css style rule directly).
4. Note that the container for the ion-item and its various parent containers are all set to overflow:hidden, but this does not prevent text wrapping when white-space:wrap is in effect as above.

No Comments »

Having already configured Angular 2 with Webstorm  here, this post details the steps to get Ionic working in similar fashion, to be able to run and debug an ionic application running in a browser. The use of an android emulator/ a real android (and then IOS) will be dealt with later.

1. First install Ionic 2 as detailed similarly either here or here.
2. Next, configure Webstorm as detailed in this post here. Note that the first step adds a phonegap/cordova plugin which allows Ionic serve to be started within Webstorm, without using a separate command window. This trick is similar to step 10 in this post which does the same thing for angular 2/npm start. Note that I had to dig around for the phonegap/cordova executable – in my case it was a command/batch file located at C:/Users/SteveW/AppData/Roaming/npm/ionic.cmd , and note that Webstorm did require the .cmd extension explicitly to work. Per the instructions, ensure you select serve as the command and at this stage browser for the platform.
3. The second step in the post configures a Javascript Debug configuration. Enter the name and the target URL. Note that in order to get breakpoints to be obeyed, I had to add an entry in the Remote URLs of local files section. In my case I just added the same url as at the top, against the top level project folder which was already shown. Prior to this, I could set a breakpoint successfully (meaning I did not have any sourcemap issues like the ones I hit with vs code here), but the breakpoint was not obeyed. Once I added the remote URL everything worked.

No Comments »

This post is a common point to document basic errors of the above kind.

1/ Karma tests fail to run giving the following kind of error:-

‘places-list’ is not a known element:
1. If ‘places-list’ is an Angular component, then verify that it is part of this module.
2. If ‘places-list’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schemas’ of this component to suppress this message. (”
<div> Places results:- </div>

[ERROR ->]<places-list></places-list>

In this case the application ran but the tests failed as above, following the addition of a new component, PlacesList, which was added via ng new component, and used in the root AppComponent.

This StackOverflow post details the issue and the solution. In my case the new component needed adding to the declarations list in TestBed.configureTestingModule in app.component.spec.ts as the component was a required dependency. I had added it (or ng generate may have, I cannot recall) to the @NgModule declarations list in app.module.ts, which enabled the application to run. However the test bed needed it too.

2/ I hit a similar issue with the PlacesService. I was getting this error on the tests:

Chrome 56.0.2924 (Windows 7 0.0.0) PlacesListComponent should create FAILED
Error: No provider for PlacesService!
Error: DI Error

I used 2 different ways around this problem.

a/ I added PlacesService as a provider in  places-list.component.spec.ts – this enabled both the tests and the app to work.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ PlacesListComponent ],
    providers: [PlacesService]
  })
  .compileComponents();
}));

b/ Alternatively, I could also add PlacesService as a provider in both app.component.ts (i.e. at the top level) and the test definition,  places-list-component.spec.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PlacesService]
})

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ PlacesListComponent ],
    providers: [PlacesService]
  })
  .compileComponents();
}));

Whilst b/ defines the provider in 2 places, from basic knowledge this feels better as in a/ the provider is defined in the component that uses the service which feels almost as closely coupled as if I was not using DI at all.

Interestingly, when I removed the PlacesService as a provider from app.components.ts and added it to the @NgModule as a provider, in app.module.ts, this failed similarly. This was strange as I expected app.module.ts to declare the provider globally (expect perhaps for the testbeds).

This needs further looking into and understanding of the DI concepts – on the face of it, the providers (which are the actual lists of components to be injected) should be as decoupled as possible from the classes where they are used. At the moment, a lot of what I am seeing looks far too incestuous, coming from a background in Java/Spring where Spring is entirely external and responsible for the ‘provider list’.

No Comments »

Sometimes you need an element to hang e.g. an *ngIf directive on, but you don’t want the element to appear in the markup.

In the following example, we end up with an extra unwanted <div> level just because we needed to hang the *ngIf somewhere (noting that it is not permissible to have the *ngIf on the same element as the *ngFor).

<div *ngFor="let place of places.rows">
  <div *ngIf="place.doc.type == 'place'">
    <span>{{place.doc.name}}, </span>
    <span>{{place.doc.strapline}}</span>
  </div>
</div>

Instead of a <div> we can use <ng-container>. This does not appear as an element in the markup (but does appear as a comment only) :-

<div *ngFor="let place of places.rows">
  <ng-container *ngIf="place.doc.type == 'place'">
    <span>{{place.doc.name}}, </span>
    <span>{{place.doc.strapline}}</span>
  </ng-container>
</div>

This is analagous to the <th:block> dummy element in Thymeleaf, which does exactly the same thing.

This StackOverflow post details this issue. This alternative post mentions the use of ng-if-start and ng-if-end, but notes that these are undocumented in Angular 2 so may not be fully supported.

For a related issue where nested loops are in use causing a similar problem, this post details the use of ng-repeat-start and ng-repeat-end as an alternative solution.

Note however that ng-repeat-start/ng-repeat-end only works for Angular 1.

No Comments »

In contrast with the pain of all my previous attempts at getting debugging working using Angular 2 eclipse, webclipse, and vs code, this was thankfully almost a non event!

It has confirmed Webstorm as my preferred IDE going forward.

The aim of this exercise was simply to be able to debug an application generated using angular-cli – i.e. to put a breakpoint on the initial generated code and have it obeyed.

I went through the following steps:-

1. Installed Node, npm and angular-cli as detailed on the angular2 quickstart page
2. Downloaded and installed the current version of Webstorm (as a trial) from here
3. Visited this page re setting up angular-cli for Webstorm and made sure all the actions were/had been done
4. Opened an existing angular-cli generated project.
5. Visited this jetbrains blog post re setting up for debugging.
6. The above blog post points out that in the early access preview version of Webstorm 2017.1, no additional configuration was needed other than adding a run configuration using Run – Edit configurations… – Add – JavaScript Debug and entering the url (http://localhost:4200/). This was such a contrast with the previous pain of trying to get vs code working that I could not resist giving the EAP a try, so installed this version (which is available for download here, and is allowed as part of trial use).
7. Note that Webstorm is Java based (a fork of IntelliJ) so needs a JVM. The 2016.3 release which I initially tried installed its own Java 8 by default. However, for the EAP I had to tick the box on the initial wizard screen to install java, or else it used whatever jre was available globally. As I use various versions, I run Webstorm with its own jre.
8. Debugging worked exactly as stated. Initially, Webstorm complained that it needed its own debug plugin for chrome, and helpfully provided the relevant link to the chrome store in the message. I was able to install the plugin directly, and Webstorm then immediately started working with no further ado.
9. To commence debugging it is necessary to start the application. This can be done outside Webstorm in a command window by entering npm start or ng serve.
10. You can also set up a run configuration to allow starting within webstorm. To do this visit run/Edit Configurations. Press + to add a new configuration and select npm. Give the configuration a suitable name and ensure that the package.json field points to your package.json file for the project. Pick start for the desired command. The Node interpreter for the project should be already set up from the initial node/Webstorm installation – in my case this was E:\Program Files\nodejs\node.exe. Having done this you can run with this configuration and the project will build if required and start.
11. Note that when using vs code, it was necessary to start chrome with its debug mode/debug port enabled, which required a shutdown of all chrome instances and starting using specific command line flags as detailed in my previous post here. This was a nuisance to have to do each time. However, with Webstorm, none of this is needed. To contrast the two approaches, vs code uses a vs code chrome plugin which talks to chrome using chrome’s standard debugging mechanism/debug port. However, for Webstorm, no plugin is needed at the Webstorm end, but it is using its own custom chrome plugin in chrome for debugging. This does not need any special startup for chrome – it just works.
12. When talking to CouchDB, I hit CORS issues and initially installed a Chrome CORS plugin to get around this. Later I just enabled CORS in CouchDB which is simpler and more convenient, as detailed here.

Following this I was able to plant a breakpoint, modify a couple of assigned properties in the code, and continue execution, with the results of the changed assignments visible in the browser.

As an additional bonus, I tried the existing Tour of Heroes tutorial (which uses systemjs rather than webpack) under debug, and this also worked perfectly.

No Comments »

Further to getting the Tour of Heroes tutorial (which is systemjs based) debugging correctly in vs code (see here), I moved on to creating a new app via angular-cli as a basis for moving forward.

The point about angular-cli is that it uses webpack as its packaging tool, which is better than existing packagers for breaking down enterprise level applications. It mandates a standard for project file structure which was lacking in the past in angular, and creates everything according to that standard. It also allows additions of components etc. which will also conform to the same structure.

Previously I had settled on using vs code, as I had issues with all the previous IDEs I had tried (eclipse with angular 2 eclipse, webclipse) as per here).

I tried the following steps:-

1. create a new angular project via ng new
2. build/start it via npm start
3. run chrome in debug mode via the following shortcut "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –remote-debugging-port=9222
4. debug in vs code using a suitable (clearly not as in the end I could not get it to work) launch configuration

The problem is that vs code could not map the .ts source to the .js. via the sourcemap, which is provided to do the mapping.
When adding a breakpoint, the following error occurs:-
“Breakpoint ignored because generated code not found”.

As vs code is widely used, there were a number of posts about this issue as follows :-

https://github.com/angular/angular-cli/issues/2453
https://github.com/angular/angular-cli/issues/1223
https://github.com/angular/angular-cli/issues/4526
https://github.com/angular/angular-cli/issues/2491

Unfortunately I could not resolve the problem via any of these.

A key point that these posts do not clarify on is that when starting with npm start or ng serve, any generated js file bundles (e.g. main.bundle.js) which are bundled js files under <project>/dist/) are deleted along with the <project>/dist directory, and the generated js is entirely served from memory. The IDE therefore has to get this js via a url, so all the discussion about tweaking the sourceMapPathOverrides to things like:-

"webpack:///*": "/*"
"webpack:///C:*":"C:/*" (for windows – substitute correct drive letter is the theory)

…seem to miss the point if they are aiming at target directories for the js. Of course, they may refer to the need to derive map keys for the sourcemap which would make sense if the sourcemap contains urls as values to return the generated js, but this is not made clear.
Either way, I could not get any of this to work in vs code and could not get a working breakpoint on the initial line of code that assigns the "app works" string.

In the end I dumped using vs code and gave Webstorm a try. This was immediately successful with almost no configuration needed – details as per this post.

No Comments »

Whilst adding the changes to for 2 way data binding by adding the new file src/app/app.module.ts as detailed here, VS Code reported the following errors:-

[ts] Cannot find module ‘@angular/core’. (1,24)
[ts] Cannot find module ‘@angular/platform-browser’. (2,31)
[ts] Cannot find module ‘@angular/forms’. (3,31)

The compilation was not affected and the app worked.

The notes state that you should add it to the NgModuledecorator’s imports array, however this decorator and indeed the above file were not even present in the project.

Having looked into it, it appears that the available git repos do not match the tutorial notes! Annoying! There might be a VS Code issue but it looks likely that it is a repo issue.

The standard repo is here. This appears to already have the changes listed above for  app.module.ts, so is not suitable for starting the tutorial.

The version I used from Rob Lourens, which contains the launch.json configurations for VS Code, is here. This is different again, and still does not match the tutorial start!

No Comments »

The aim of this was to get the tutorial up and running in a suitable IDE, such that I could debug and step through the code whilst understanding it. The tutorial site is here. The standard repository on Git is here.

A number of different IDE options where tried, and most of them hit problems and were therefore discounted. The options tried were as follows:-

Eclipse with the Angular 2 Eclipse plugin

The following links document how to set this up:-

http://fcorti.com/2016/08/22/angular-2-eclipse-how-to/

http://stackoverflow.com/questions/35890887/how-to-get-angular2-to-work-in-eclipse-with-typescript

When loading the Tour of Heroes tutorial, I tried to import it as a file system project as the cloned Git repo was not an ecplipse project.

The problems I hit with this were as follows:-

1. After importing into eclipse, there were compile errors on import and export statements in rollup.js.
2. The core problem appeared to be eclipse bug 496348 which was listed as resolved but judging by the comments at the end was still a problem.
3. I tried various ways around this, such as upgrading to a dev release of eclipse Neon, trying a prerelease of eclipse Oxygen, and upgrading the eclipse plugins. None of these solved the problem.
4. As this was not a very commonly used IDE, there was not that much in the way of online help. In particular, no-one appeared to have posted online about getting the Tour of Heroes demo working with it. Therefore, support etc. going forward would likely be a problem.

Webclipse

1. This is a paid for eclipse plugin, also available as a separate IDE on its own called Angular IDE, detailed   here.
2. I tried this also with Eclipse Neon and Oxygen, and received similar Typscript related errors that I could not eliminate when trying to load the Tour of Heroes demo. I therefore dumped this too.
3. Whilst I did not try IntelliJ/Webstorm at this stage, which was the Jetbrains/IntelliJ paid for option, one Stack Overflow comment (which I now cannot find) cited that there were still Typescript issues with it, even in IntelliJ. (With hindsight, I wish I had, as in the end I have standardising on it as it works both for this tutorial, which uses systemjs, and for applications generated via angular-cli which use webpack. Details on this stage of the journey here and here).

Visual Studio Code

1. This is the IDE I settled on at this stage. Whilst it meant learning another IDE, it had a number of overriding benefits.
2. Basically it just works with no problems and no wacky Typescript errors! The basic point here is that Microsoft originated Typescript, and they are the authors of VS Code, so unsurprisingly it has the best compatibility.
3. As it is probably the most commonly used IDE for Angular, unlike with the other IDE solutions, there are many examples online for it, including for the Tour of Heroes tutorial, which needs a custom launch.js file for running the demo.

The setup steps for it were as follows :-

1. Follow the initial steps including installation of the latest Node.js and npm from the Angular tutorial site here
2. Rob Lourens has forked the Tour of Heroes git repo here, with a custom launch.js file for launching in VS code. Clone that git repo and follow his instructions.
3. Note that this uses the VS Code debugger for Chrome extension, in order to allow browser run angular JS code to be debugged inside VS Code instead of in the Browser.
4. In order to get this working, I had to start the app from the command line first via npm i (to build) then npm start.
5. Also, initially I could not get VS code to connect to Chrome, either by running up a new chrome via Rob’s launch.js configuration “Launch localhost with sourcemaps”, or by connecting to an existing chrome using “Attach with sourcemaps”. The issue was that Chrome needed starting with a command line option to allow debug connections via its debug port. This is detailed here (comment by auchenberg) – the command line is C:\Program Files (x86)\Google\Chrome\Application\chrome.exe –remote-debugging-port=9222
6. Once the above was done, I could connect from VS code provided I tried to attach to the existing chrome using  “Attach with sourcemaps” – otherwise, a new chrome was started which did not allow debug connections!
7. The steps needed were therefore 1/ run (having built) using npm-start, 2/ run up a debug chrome, then 3/ click on the debug icon in VS code, select the  “Attach with sourcemaps” dropdown launch.js option, then hit the green go button just to the left of it. This successfully fired up the demo.
8. Note that I was able to breakpoint in the code using VS code either on the Typscript (.ts) files or the equivalent transpiled .js files. It appears that the compiled code is interspersed in the same folders as the Typescript, which does not seem cool at all – something to look into. I would expect that the build artifact code would be separate as in Java.

No Comments »