Archive for May, 2017

May 11th, 2017
9:42 am
Upgrading angular-cli

Posted under Angular
Tags ,

Instructions as per here:-

Updating Angular CLI

If you’re using Angular CLI beta.28 or less, you need to uninstall angular-cli package. It should be done due to changing of package’s name and scope from angular-cli to @angular/cli:

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

To update Angular CLI to a new version, you must update both the global package and your project’s local package.

Global package:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Local project package:

rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular/cli@latest
npm install

Note that for a primeNg application I also had to reinstall the angular animations module:-

npm install @angular/animations

Failing to do this caused numerous errors on an ng serve due to the inability to reference the animations(!) :-

ERROR in E:/Dev/angular/places-admin/node_modules/@angular/platform-browser/animations/src/animation_renderer.d.ts (1,53):
Cannot find module '@angular/animations/browser'.

ERROR in E:/Dev/angular/places-admin/node_modules/@angular/platform-browser/animations/src/providers.d.ts (8,276):
Cannot find module '@angular/animations/browser'.

ERROR in Error encountered resolving symbol values statically.
Could not resolve @angular/animations/browser relative to
E:/Dev/angular/places-admin/node_modules/@angular/platform-browser/animations/index.d.ts.,
resolving symbol ?e in
E:/Dev/angular/places-admin/node_modules/@angular/platform-browser/animations/index.d.ts,
resolving symbol BrowserAnimationsModule in
E:/Dev/angular/places-admin/node_modules/@angular/platform-browser/animations/index.d.ts,
resolving symbol BrowserAnimationsModule in
E:/Dev/angular/places-admin/node_modules/@angular/platform-browser/animations/index.d.ts

ERROR in ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js

Module not found: Error:
Can't resolve '@angular/animations/browser' in
'E:\Dev\angular\places-admin\node_modules\@angular\platform-browser\@angular\platform-browser'
@ ./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js 13:0-249
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?
http://localhost:4200 ./src/main.ts

ERROR in ./~/primeng/components/accordion/accordion.js
Module not found: Error:
Can't resolve '@angular/animations' in
'E:\Dev\angular\places-admin\node_modules\primeng\components\accordion'
@ ./~/primeng/components/accordion/accordion.js 13:19-49
@ ./~/primeng/primeng.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?
http://localhost:4200 ./src/main.ts

ERROR in ./~/primeng/components/calendar/calendar.js
Module not found: Error:
Can't resolve '@angular/animations' in
'E:\Dev\angular\places-admin\node_modules\primeng\components\calendar'
@ ./~/primeng/components/calendar/calendar.js 13:19-49
@ ./~/primeng/primeng.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?
http://localhost:4200 ./src/main.ts

ERROR in ./~/primeng/components/confirmdialog/confirmdialog.js
Module not found: Error:
Can't resolve '@angular/animations' in
'E:\Dev\angular\places-admin\node_modules\primeng\components\confirmdialog'
@ ./~/primeng/components/confirmdialog/confirmdialog.js 13:19-49
@ ./~/primeng/primeng.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?
http://localhost:4200 ./src/main.ts

 
It appeared that I did not need to reinstall primeng via npm install primeng –save. In fact although it initially ran without, I did reinstall this too as well as the animations.

No Comments »

May 10th, 2017
1:39 pm
Creating a skeleton Angular 4 / PrimeNG application

Posted under Angular & PrimeNG
Tags ,

Update 30/5/2017

Re the comment below on the stylesheet link tags not being honoured in index.html, it may still be ok to do this when the css is somewhere under the assets folder, as webpack loads these. I hit this on the Learning Tree angular course in an exercise, course 2324 ex 2.1, and moving a css folder from the src level to under the assets folder solved the problem – prior to this I was getting net errors on all the stylesheets (interestingly the exercise was originally set up wrong, which proved useful when diagnosing this issue) . This therefore may still be an alternative in some cases to using angular-cli.json.

Original Post

This is pretty much covered here, but salient points/commands as follows:-

ng new places-admin –style=scss
cd places-admin
npm install primeng –save
npm install @angular/animations
npm install font-awesome –save
ng serve

  • Note the use of –style=scss as the default is plain css.
  • angular animations are used for angular 4
  • font awesome is used and needs to be both installed as above and added as a dependency in package.json along with primeng (this was already done automatically when I looked).
  • Note that you need to import either BrowserAnimationsModule or NoopAnimationsModule in addition to BrowserModule – the post above mentions this but does not actually do it in the sample code:-
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
...

@NgModule({
declarations: [

],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Styles configuration issue

Per the setup instructions above I initially just configured the style sheets with link tags in index.html:-

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />

 

When I did this alone, the style sheets would not resolve at run time. Per some online post suggestions I tried various alternative path prefixes such as “/node_modules”, “./node_modules”, and “../node_modules” but none would resolve. When I looked in the chrome inspector I was getting 404s on all the style sheet loads. I checked the file system and all the referenced files were present under node_modules, but they were just not available to the web server/were not being served. It appears that this is a consequence of the way that angular-cli and webpack package up the application. I then tried adding the style references specifically to .angular-cli.json as per the instructions :-

"styles": [
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/font-awesome/css/font-awesome.min.css",
  //...
],

This worked and the styles/theming did resolve correctly. In fact, the static link references were not used at all and could be removed.

When examining components which used the css with the Chrome inspector, the css rules were being taken from style blocks directly, so this was clearly a packaging issue.

For dynamic theme switching, it may therefore be necessary to move the themes under the app resources and use a dynamically changed <link> tag or similar to select the target theme – this is the way that the PrimeNG Showcase does its theme switching, and there is no evidence at present of any other theme switcher component.

No Comments »

May 10th, 2017
11:12 am
Ionic Vs NativeScript for mobile application development

Posted under Ionic & NativeScript
Tags

NativeScript is the newer kid on the block – some of its key differences are as follows:-

  1. NativeScript uses its own XML based element tags which are compiled to actual native elements in the deployed application.
  2. This means that your view templates do not use HTML or ‘normal’ css – the elements and attributes are different and therefore there is a learning curve here as you have to learn all the new markup.
  3. Native feature access such as cameras etc. is easier with NativeScript – with Ionic, often plugins for Cordova are needed, however this appears set to improve fairly soon.
  4. You still develop with Javascript or TypeScript, and you can use Angular for development. However, I am not clear on how all the dynamic features/specific attributes of Angular which target the HTML DOM will fit in and work with the NativeScript XML elements – I would expect there to be some compromises here on what you can do. NativeScript does support dynamic creation of elements, but I would not expect all this to work in the same way as adding dynamic html/changing innerHTML with Angular for example.
  5. For development testing, you use an Android or IOS emulator e.g. under Windows. For android debugging, you can attach the Chrome developer tools to debug.
  6. From the perspective of being a web developer, it looks like Ionic is easier and more familiar in use.
  7. The key feature with NativeScript is that it does give you true native components, and the apps run faster as they are native. However the app size for download/install is also much larger.
  8. It does correctly claim to support all its target platforms from a single code base – note that all the targets run native applications.
  9. Therefore note that it does not create a web app of any kind. Therefore when support for Windows comes out sometime soon, this will be a native application running on Windows.

There are a number of pros and cons and no shortage of discussion on line, and the following posts do some in-depth comparison on this:-

http://pointdeveloper.com/category/nativescript/

http://pointdeveloper.com/nativescript-vs-ionic-framework-pros-cons/

http://stackoverflow.com/questions/40819520/hybrid-app-ionic-vs-nativescript

http://www.discoversdk.com/blog/ionic-2-vs-reactnative-vs-nativescript

https://www.thepolyglotdeveloper.com/2015/11/nativescript-vs-ionic-framework-should-you-switch/

No Comments »

May 10th, 2017
8:34 am
Angular 2 and Ionic – Builders/ Package Managers/ Bundlers/ Task Runners

Posted under Angular & Ionic
Tags ,

The landscape in this regard is pretty complex with a number of choices out there.

This StackOverflow post discusses the functionality and pros/cons of the alternatives and is helpful in gaining an idea of what they all actually do!

I was keen to pick tools that met my needs, especially re the ability to build apps from separate shared components, but did not want to over complicate things by using tools that I did not really need.

My conclusion from the above and all the comments is that for the moment all my need can be met by just sticking with Webpack (in conjunction with Angular CLI and Ionic CLI), and not venturing to use tools such as Gulp on top as I don’t really need to.

This is good as webpack is the standard for Angular and Ionic.

No Comments »

May 10th, 2017
8:15 am
PrimeNG Theming

Posted under PrimeNG
Tags , ,

Update 12/5/2017

Note that there are issues when trying to use the standard themes loaded by the PrimeNG installation, which reside under node_modules. Basically, the traditional use of the link tag did not work even though the style files were present.  This appears to be an issue relating to how the application is packaged and served.

See this post in the ‘Styles configuration issue’ near the end for details and resolution on this problem.

 

Original Post

This is handled in much the same way as it was in JSF – a directory for each theme holds its scss and css files.

Normally these are bundled in as part of an npm installation of primeng, so the themes end up under node_modules\primeng\resources\themes, but this may differ if you have your own custom themes.

The PrimeNG showcase for example does not use an npm install of primeng, but declares its own primeng package as it contains everything. It therefore puts the themes under resource\themes. See this post for issues with this re getting the showcase to work locally.

The showcase is instructive as a simple example of how to switch themes – at present there does not appear to be a theme switcher/manager component available.

The basic style link tag which picks up a theme is in index.html:-

<link rel="stylesheet" type="text/css" href="resources/themes/omega/theme.css">

The following javascript function modifies this dynamically as themes are selected:-

var DemoApp = {

changeTheme: function(event, element) {
var theme = $(element).data("theme"),
themeLink = $('link[href$="theme.css"]'),
newThemeURL = 'resources/themes/' + theme + '/theme.css';

themeLink.attr('href', newThemeURL);
event.preventDefault();
}
};

The following markup is used for theme selection, based on a hard coded list of the themes available:-

<span class="topbar-link" id="themeSwitcher"
(mouseenter)="themesVisible = true" (mouseleave)="themesVisible = false">
<img src="showcase/resources/images/themeswitcher.svg" />
<span>Themes</span>
<div id="GlobalThemeSwitcher" [style.display]="themesVisible ? 'block' : 'none'" style="margin-top:10px">
<span>Premium Templates</span>
<a href="http://www.primefaces.org/layouts/ultima-ng">
<img src="showcase/resources/images/themeswitcher-ultima.png" alt="Ultima Template">
<span class="ui-text">Ultima</span></a>
<a href="http://www.primefaces.org/layouts/barcelona-ng">
<img src="showcase/resources/images/themeswitcher-barcelona.png" alt="Barcelona Template">
<span class="ui-text">Barcelona</span></a>
<a href="http://www.primefaces.org/layouts/morpheus-ng">
<img src="showcase/resources/images/themeswitcher-morpheus.png" alt="Morpheus Template">
<span class="ui-text">Morpheus</span></a>
<a href="http://www.primefaces.org/layouts/atlantis-ng">
<img src="showcase/resources/images/themeswitcher-atlantis.png" alt="Atlantis Template">
<span class="ui-text">Atlantis</span></a>
<a href="http://www.primefaces.org/layouts/poseidon-ng">
<img src="showcase/resources/images/themeswitcher-poseidon.png" alt="Poseidon Template">
<span class="ui-text">Poseidon</span></a>
<a href="http://www.primefaces.org/layouts/omega-ng">
<img src="showcase/resources/images/themeswitcher-omega.png" alt="Omega Template">
<span class="ui-text">Omega</span></a>
<span>Free Themes</span>
<a href="#" data-theme="omega" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Omega</span></a>
<a href="#" data-theme="bootstrap" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Bootstrap</span></a>
<a href="#" data-theme="cupertino" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Cupertino</span></a>
<a href="#" data-theme="cruze" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Cruze</span></a>
<a href="#" data-theme="darkness" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Darkness</span></a>
<a href="#" data-theme="flick" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Flick</span></a>
<a href="#" data-theme="home" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Home</span></a>
<a href="#" data-theme="kasper" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Kasper</span></a>
<a href="#" data-theme="lightness" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Lightness</span></a>
<a href="#" data-theme="ludvig" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Ludvig</span></a>
<a href="#" data-theme="pepper-grinder" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Pepper-Grinder</span></a>
<a href="#" data-theme="redmond" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Redmond</span></a>
<a href="#" data-theme="rocket" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Rocket</span></a>
<a href="#" data-theme="south-street" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">South-Street</span></a>
<a href="#" data-theme="start" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Start</span></a>
<a href="#" data-theme="trontastic" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Trontastic</span></a>
<a href="#" data-theme="voclain" onclick="DemoApp.changeTheme(event, this)">
<span class="ui-text">Voclain</span></a>
</div>
</span>

No Comments »

May 8th, 2017
3:55 pm
How to refer to child component instances from an Angular component class

Posted under Angular
Tags ,

With Angular, the component objects are automatically created and associated with their corresponding elements in the template.

This raises the question then – if you want to refer to a child object from a parent component, how do you do it? There may be multiple child components of the same time in the parent component, so how do you get a reference to a specific one?

As a contrast, when using JSF for example to refer to child component code, the parent managed bean (= component object in Angular) is actually responsible for declaring the managed bean objects for its children. On the page, the child component element will typically have a specific e.g. controller attribute where the managed bean for that child is passed in, e.g. as <child controller=#{controller.child}>…  where controller.child  refers to the child property of the parent managed bean. In this way, unlike Angular, the object hierarchy is explicitly declared in the code.

In Angular, there are a number  of ways to do this, but in the end they all come down to using reference information from a particular template element to direct which object is required.

It is instructive to read the whole section on Angular template syntax in the Angular docs, which includes all the binding techniques.

1/ Passing an element reference in a method call from the template

<ion-auto-complete id="location-search" #locationSearch [dataProvider]="locationsAutoCompleteService"
(itemSelected)="onItemClicked($event, locationSearch)"></ion-auto-complete>

In this case, (itemSelected)="onItemClicked($event, locationSearch)" is passing the element reference #locationSearch as the second argument to onItemClicked. This passes the reference to the component object for  <ion-auto-complete>. (Note that in this case the first argument, $event, is the actual location object that was clicked in an autocomplete list).

2/ Using the @ViewChild decorator in the parent class, passing it a child reference used in the template

export class AutoCompleteComponent {

@Input() public dataProvider: any;
@Output() public itemSelected: EventEmitter<any>;
@ViewChild(Searchbar) searchBar: Searchbar;

In this case, the component only contains a single searchbar, so using a class reference is not ambiguous. If there were multiples, the first one would be taken. You can inject references to multiple children via @ViewChildren if there is more than one present – this gives you access to an array of them.

Where you want to use a reference to a specific element, you can use @ViewChild with an element reference, e.g. in 1/ above you would use  #locationSearch to inject a referent to the <ion-auto-complete #locationSearch > element as follows:-

@ViewChild(‘#locationSearch’) searchBar: Searchbar;

3/ Another related technique is to make a method call in the template e.g. in an event call, using an element reference to another element in the component. This is detailed here. Note that <child-component #f contains the #f element reference, and the inc() method on the #f element is called from the button click event using <button (click)=”f.inc()”>

@Component({
    selector: 'child-component',
    inputs: ['bar'],
    template: `"{{ bar }}" in child, counter  {{ n }}`
})
class ChildComponent{
    constructor () {
        this.n = 0;
    }
    inc () {
        this.n++;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <child-component #f [bar]="bar"></child-component><br>
        <button (click)="f.inc()">call child func</button>
        <button (click)="bar = 'different'">change parent var</button>
    `,
    directives: [ChildComponent]
})
class AppComponent {
    constructor () {
        this.bar = 'parent var';
    }
}

bootstrap(AppComponent);  

There is a working plunker for the above example here.

No Comments »

May 8th, 2017
12:50 pm
Tail utility for Windows

Posted under Windows & Windows 7
Tags

I have used Baretail which may be found here. It has a number of features but crucially allows you to a follow additions to a log file, as you would with tail –f on linux.

Baretail is an improved version of Wintail which is also from Bare Metal Software.

No Comments »

May 8th, 2017
12:41 pm
CouchDB continually fills the log with Shard/disk loading/database errors.

Posted under CouchDB
Tags ,

In my case the log had grown to nearly 1GB, and there does not appear to be any log rotation set up by default!

It turns out that this will occur if you have not configured the node after installation – either for single node operation, or as a cluster.

This can easily be done via the configuration option in Fauxton, and at the same time it allows you to set credentials for the admin account.

Doing this prevented the log spamming and log growth was then minimal.

This post here discusses the issue.

No Comments »

May 8th, 2017
12:36 pm
Angular 2 -Difference between @Input and inputs in Angular2 Components?

Posted under Angular
Tags ,

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 »

May 8th, 2017
12:15 pm
Ionic error on startup – ionic Error: ENOENT: no such file or directory

Posted under Ionic
Tags , ,

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 »