Salient Soft

Update 23/5/2018

I retried this using Angular 6 and the latest primeng.

Step 2/ below was not needed, and I did not install/reinstall gulp per step 3/ (not used this time – need to check/confirm re this)

The wiki steps referred to below, here, referred to using sass to build the css, but this command did not work for me even when I installed the node.js sass per here -  the –update command came back with an error.

I then gave up using sass to compile the sass files.

Because of this issue I still had to fix the theming, so tried to copy the css files as below rather than compile the sass. This time the themes folder was under src\assets\components.

I therefore created another skeleton app, installed primeng using “npm install primeng”, and then copied the themes folder from under node_modules\primeng\resources  to src\assets\components, overwriting the themes already there.

This added the css files that were missing.

I could then run the showcase with theming fully working, either using “npm start” or “ng serve” – either worked.

I did notice that the theming borders on the treetable component did not appear to work, but apart from that all the theming including theme switching worked fine.

Original Post

It is useful to have this running locally in order to can try out occasional code hacks on the example code to try out ideas or check how things work if the docs are not clear on a point, knowing that you have started from a working example.

The steps for this basically follow the wiki steps here. Note the following additions/amendments to the steps:-

1/ I cloned the repository from here. Having cloned I then listed and disconnected from the remote repositories, as the clones were just for local use:-

git remote –v

git remote rm origin

git remote –v

2/ Dependencies as follows were added to package.json as per instructions:-

  "dependencies": {
      "@angular/common": "4.0.0",
      "@angular/compiler": "4.0.0",
      "@angular/core": "4.0.0",
      "@angular/forms": "4.0.0",
      "@angular/http": "4.0.0",
      "@angular/platform-browser": "4.0.0",
      "@angular/platform-browser-dynamic": "4.0.0",
      "@angular/router": "4.0.0",
      "@angular/animations": "4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.2.0",
      "zone.js": "^0.8.4"
  },

Following this npm install was run to download all the dependencies

3/ In order to build using gulp as instructed (gulp build), I installed gulp first as per the instructions here:-

npm install --global gulp-cli

npm install --save-dev gulp

4/ I then ran npm start to run the showcase, which defaults to http://localhost:8080/

The showcase ran ok locally but there were some issues with the theming – the theme had a transluscent background on the menus and dropdowns for example which did not correctly occlude the text underneath. The live showcase on the PrimeNG site did not have this problem.

On investigation it appears that the theme files are under the main resources/themes directory, but are not being sass compiled from scss during the build so there are no .css files there. The gulp file for the project, gulpfile.js, does not have any entries that do sass compilation so this may be an omission/bug in the version I had downloaded.

The showcase does not use the primeng under node_modules – it defines its own primeng package such that if you try to enter npm install primeng to install the themes in the normal way as part of the npm installed package, you get an error from npm about the duplicate primeng.

My workaround was straightforward – I just copied the theme folder and all subfolders from under the node_modules\primeng\resources directory in another application folder to the projects top level resources directory (in fact I used the primeng-quickstart-webpack which I had already set up) – any other project where you have installed primeng will do. This solved the problem by providing all the css files for the themes, and the themes and theme switching then worked.

As I have no requirement to do a full working build for the showcase this is no problem.

I checked for other posts about theming issues and found a couple of StackOverflow posts about theme issues with Webpack here and here. These may prove relevant for future development.

No Comments »

I had a bug whereby my view was emitting the same place document twice. This was strange as the database clearly did not contain 2 copies of the document. I had seen what appeared to be a similar issue before bud at the time did not track down the cause.

It turned out to be a bug in the view definition. The original (buggy) version follows:-

function (doc) {
  if (doc.type == ‘place’) {
      emit([doc.address.postTown, doc.address.locality, doc.name, doc._id, 0], null);
      emit([doc.address.postTown, doc.address.locality, doc.name, doc._id, 1], {_id: doc.placeFeaturesId});
  }
}

The problem with this is that when doc.placeFeaturesId is null/undefined, the second emit emits its key plus an “_id” with an undefined/null value in the generated json. The result of this is that when using ?include_docs=true to include the documents, CouchDB applies a default behaviour due to the null, and emits the place document again a second time. The following fix prevents the second emit when there are no placeFeatures present, which prevents the place document being emitted a second time. This solves the problem:-

function (doc) {
  if (doc.type == ‘place’) {
      emit([doc.address.postTown, doc.address.locality, doc.name, doc._id, 0], null);
      if (doc.placeFeaturesId) {
        emit([doc.address.postTown, doc.address.locality, doc.name, doc._id, 1], {_id: doc.placeFeaturesId});
      }
  }
}

The lesson here is to be careful to handle undefined or null values in the view code when emitting entries in a view definition as this can cause strange behaviour such as the duplicates above.

No Comments »

I got this error when trying to build and run the primeng-quickstart-cli per the readme in the git project

E:\Dev\angular\primeng-quickstart-cli>ng build
You seem to not be depending on "@angular/core". This is an error.

E:\Dev\angular\primeng-quickstart-cli>ng serve
The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (E:\Dev\angular\primeng-quickstart-cli\node_modules\@ngtools\webpack\src\index.js:14:11)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (E:\Dev\angular\primeng-quickstart-cli\node_modules\@angular\cli\tasks\eject.js:10:19)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

E:\Dev\angular\primeng-quickstart-cli>

I tried upgrading angular-cli as per here, but this did not solve the problem.

Interestingly when I tried to start the alternative primeng-quickstart-webpack project using ng-serve, I got the same error as above.

However, when following the correct (and different) instructions for primeng-quickstart-webpack  as follows it worked:-

npm install

npm run start:webpack

I therefore tried to use these npm install/run commands on the primeng-quickstart-cli project but it was clearly not set up for this build/run mechanism:-

E:\Dev\angular\primeng-quickstart-cli>npm run start:webpack
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "E:\\Program Files\\nodejs\\node.exe" "E:\\Program Files\\nodejs\\node_modules\\n
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0

npm ERR! missing script: start:webpack
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\SteveW\AppData\Roaming\npm-cache\_logs\2017-05-11T10_08_50_957Z-debug.log

At present the issue with primeng-quickstart-cli is not a blocking one – the other starter  primeng-quickstart-webpack looks preferable as it is a simple full CRUD table app whereas the other starter it a trivial one whch just outputs a message in response to a button click.

These StackOverflow posts here and here discuss the error, but I did not appear to be missing the basic config. This post might be more relevant, and advises downgrading first then re-upgrading, but it refers to angular 2 rather than 4.

I hope to learn and resolve these build issues and errors at some point soon though and gain a better understanding of what is going on/ what are the alternatives.

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 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 »

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 »

When adding a menu button to an ion-navbar, there is a styling issue whereby the menu toggle gets the wrong styling.
This depends on whether the menuToggle attribute is present.

If the attribute is present and the toggle is placed inside an ion-buttons group, it gets the wrong styling via a special case for menu toggles (flex rather than inline-block like the rest). This (incorrectly) puts it on a separate line above the others. Putting it separately above the ion-buttons group, with an explicit left on the button, fixes the problem.

If the menuToggle attribute is NOT present, then the button needs to go inside the ion-buttons group as otherwise for example for a left group the other left buttons go to its left. The rules for all this styling seem a bit quirky and not clearly defined.

This post discusses this issue.

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 »