Problems building Carmel front end as a Typescript app

[adriatic]

I started with the this Skeleton to ensure that I am using the most current Aurelia components and then stripped it of all that I do not need and added the few initial "parts"" of the demo-kendo - as you can see in the repo.

Issue 1

jspm install results with that darned message that I was never able to resolve

   Installed Forks

                                                    npm:isarray 0.0.1 1.0.0

Issue 2

Running gulp watch is a lot more messy as I really did not do anything with the Javascript files other then changing their extension from .js to .ts. So, I am getting these error messages

λ gulp watch
[22:03:06] Using gulpfile H:\work\aurelia-ui-toolkits\carmel-fe\gulpfile.js
[22:03:06] Starting 'build'...
[22:03:06] Starting 'unbundle'...
[22:03:06] Finished 'unbundle' after 8.24 ms
[22:03:06] Starting 'clean'...
[22:03:06] Finished 'clean' after 39 ms
[22:03:06] Starting 'build-system'...
[22:03:06] Starting 'build-html'...
[22:03:06] Starting 'build-css'...
[22:03:06] Finished 'build-css' after 19 ms
[22:03:06] Finished 'build-html' after 152 ms
src\main.ts(2,24): error TS2307: Cannot find module 'settings'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\main.ts(2,24): error TS2307: Cannot find module 'settings'.
src\main.ts(3,28): error TS2307: Cannot find module 'shared/theme-manager'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\main.ts(3,28): error TS2307: Cannot find module 'shared/theme-manager'.
src\shared\logger.ts(8,25): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(8,25): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(16,7): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(16,7): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(22,18): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(22,18): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(38,5): error TS2346: Supplied parameters do not match any signature of call target.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(38,5): error TS2346: Supplied parameters do not match any signature of call target.
src\shared\logger.ts(42,5): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(42,5): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(43,7): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(43,7): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(86,10): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(86,10): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(93,13): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(93,13): error TS2304: Cannot find name 'kendo'.
src\shared\logger.ts(96,45): error TS2304: Cannot find name 'kendo'.
[22:03:08] gulp-notify: [Error running Gulp] Error: src\shared\logger.ts(96,45): error TS2304: Cannot find name 'kendo'.
src\shared\markdown.ts(15,10): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(15,10): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(16,10): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(16,10): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(17,10): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(17,10): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(17,26): error TS2304: Cannot find name 'showdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(17,26): error TS2304: Cannot find name 'showdown'.
src\shared\markdown.ts(22,12): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(22,12): error TS2339: Property 'loader' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(24,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(24,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(24,39): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(24,39): error TS2339: Property 'converter' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(25,9): error TS2304: Cannot find name 'PR'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(25,9): error TS2304: Cannot find name 'PR'.
src\shared\markdown.ts(30,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(30,14): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\markdown.ts(33,12): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\markdown.ts(33,12): error TS2339: Property 'element' does not exist on type 'AuMarkdown'.
src\shared\theme-manager.ts(18,10): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(18,10): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
src\shared\theme-manager.ts(25,22): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(25,22): error TS2339: Property 'ea' does not exist on type 'ThemeManager'.
src\shared\theme-manager.ts(32,12): error TS2304: Cannot find name 'System'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(32,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(36,11): error TS2304: Cannot find name 'kendo'.
[22:03:09] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(36,11): error TS2304: Cannot find name 'kendo'.
src\shared\theme-manager.ts(38,24): error TS2304: Cannot find name 'kendo'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(38,24): error TS2304: Cannot find name 'kendo'.
src\shared\theme-manager.ts(53,12): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(53,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(60,12): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(60,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(64,9): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(64,9): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(65,7): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(65,7): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(70,12): error TS2304: Cannot find name 'System'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(70,12): error TS2304: Cannot find name 'System'.
src\shared\theme-manager.ts(74,5): error TS2304: Cannot find name 'kendo'.
[22:03:10] gulp-notify: [Error running Gulp] Error: src\shared\theme-manager.ts(74,5): error TS2304: Cannot find name 'kendo'.
[22:03:10] TypeScript: 32 semantic errors
[22:03:10] TypeScript: emit succeeded (with errors)
[22:03:10] Finished 'build-system' after 3.92 s
[22:03:10] Finished 'build' after 3.98 s
[22:03:10] Starting 'serve'...
[BS] Access URLs:
 ----------------------------
 Local: http://localhost:9000
 ----------------------------
    UI: http://localhost:3001
 ----------------------------
[BS] Serving files from: .
[22:03:11] Finished 'serve' after 928 ms
[22:03:11] Starting 'watch'...
[22:03:11] Finished 'watch' after 37 ms

Would you please fix my code and explain to me what all I missed? I was clearly spoiled by the MOnterey experience, where I stepped into a syntactically correct set of Typescript files as I failed to observe what all you did there.

As an example of what confuses me is the maint.ts file which cannot resolve these imports

import {Settings} from 'settings';
import {ThemeManager} from 'shared/theme-manager';

as well as all other error messages shown above 👎

[adriatic]

Summary: Still left with 7 errors that would be better addressed by @JeroenVinke

This is the result of gulp watch on the app just checked in

[16:49:50] Finished 'build-html' after 206 ms
src\components\index.ts(1,21): error TS2307: Cannot find module 'https://aurelia-ui-toolkits.github.io/aurelia-kendoui-samples/samples.json!'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\index.ts(1,21): error TS2307: Cannot find module 'https://aurelia-ui-toolkits.github.io/aurelia-kendoui-samples/samples.json!'.
src\components\index.ts(20,11): error TS2345: Argument of type '{ name: any; route: any; moduleId: string; title: any; sample: any; category: any; }' is not assignable to parameter of type '{ name: string; route: string; redirect: string; }'.
  Object literal may only specify known properties, and 'moduleId' does not exist in type '{ name: string; route: string; redirect: string; }'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\index.ts(20,11): error TS2345: Argument of type '{ name: any; route: any; moduleId: string; title: any; sample: any; category: any; }' is not assignable to parameter of type '{ name: string; route: string; redirect: string; }'.
  Object literal may only specify known properties, and 'moduleId' does not exist in type '{ name: string; route: string; redirect: string; }'.
src\components\index.ts(37,10): error TS2339: Property 'router' does not exist on type 'Index'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\index.ts(37,10): error TS2339: Property 'router' does not exist on type 'Index'.
src\components\menu.ts(18,22): error TS2304: Cannot find name 'samples'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\menu.ts(18,22): error TS2304: Cannot find name 'samples'.
src\components\menu.ts(48,10): error TS2339: Property 'options' does not exist on type 'Menu'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\menu.ts(48,10): error TS2339: Property 'options' does not exist on type 'Menu'.
src\components\menu.ts(50,14): error TS2339: Property 'toggle' does not exist on type 'Menu'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\menu.ts(50,14): error TS2339: Property 'toggle' does not exist on type 'Menu'.
src\components\sample-runner.ts(6,26): error TS2307: Cannot find module 'aurelia-http-client'.
[16:49:52] gulp-notify: [Error running Gulp] Error: src\components\sample-runner.ts(6,26): error TS2307: Cannot find module 'aurelia-http-client'.
[16:49:52] TypeScript: 7 semantic errors

Objective

Render the subset of the demo-kendo UI, indicated below

• the main menu should show Components,

Image 1

Issues

1

Why this does not work in Typescript app and this works in Javascript app?

2

Because of failing to understand 1 above, I did not do any needed "massage" on that index.ts file. I would like to get this whole UI rendered by processing the information from 'https://aurelia-ui-toolkits.github.io/aurelia-kendoui-samples/samples.json!'; - and then I will modify that to fetch this equivalent information from here

@JeroenVinke - can you do this for me?

[adriatic]

Feedback on Jeroen's intervention

After I merged Jeroen's PR - I see this

Image 1

indicating that Jeroen did not have the time to deal with all "pledges" I made, which would result with this screenshot instead (note that I deleted some of the top level menu entries, leaving just four). This UI will perfectly support the navigation to a specific aurelia component and its specific sample with just three (most often just two) clicks: select the component from the (multilevel) toolbar on the top and the sample from the sidebar which is defined by the component selection.

Image 2

This task is further defined here and should be conducted at that place.

[Thanood]

I guess you know that already but there are no kendo styles applied to <nav-bar>.
Is it possible that the bridge is not initialized successfully? No errors, though.

[adriatic]

I think that your diagnosis is correct (you can always check the needed behavior here, by running the demo-kendo app.

Menu is implemented as an Aurelia custom element, which is "consumed" by nav-bar custom element (they are linked here. Style is initially set to KendoUI default theme here and style changes are handled by the theme-manager.

My problems (wich made me ask for Jeroen's help) were in the area of importing files and modules in Typescript, so rather than trying all possible combinations, I hoped he will make the theme switching functional. As it is now, he just fixed my own syntax errors, without fixing my logical errors and adding the missing code.

[Thanood]

That one was easy. 😄
app.html only required nav-bar.html (as opposed to nav-bar) which led to the template loading but not its view-model. It's the view-model where kendo is initialized.

[Thanood]

[adriatic]

Totally awesome

[Thanood]

I did some more fixes, samples now load correctly but I had to "fix" samples.categories by declaring samples as any. No idea how to do that in the .d.ts file.

Also the layout is broken now. I'll take that on later.

[Thanood]

I've fixed the layout but I'm a little unsure because the original bridge doesn't have the problem.
I also noticed that sample-runner is empty and provided the code necessary to build the sidebar on the left.

In theory this is very close to the UI posted in @adriatic's comment above but I'd like to do some further polish. Also currently, the routes don't behave correctly, f.i. the selected menu item stays active when changing routes.

[Thanood]

😃

[JeroenVinke]

👏