lx-progress is not a known element

[s0upyd]

I'm just starting out with Angular, trying to use 4 from the outset. I liked the look of Lumx for the material UI side of things. I'm using Visual Studio 2017 Community Preview with a .NET Core 2 project. This is so I can use WebAPI for the REST server side of things.

So I set a new project off using the Angular4 AspNetCore extension templates. This created a typical project with the usual app/ folder, with sub-folders for components etc. I know the Angular app is working as I got it going before trying to integrate Lumx.

Now my main problem is that the new Angular 4 project structure is different to all the examples; namely angular.module('xxxx', [ 'lumx' ]) isn't even possible for me as this is nowhere in the code.

I'm at a loss how to explain better because I am completely new to Angular and wanted to hit it straight from 4.0 and not the previous versions which will become superseded.

I have a top level html file with the jquery, velocity and moment script includes. To include lumx itself and get round angular being defined in the new land, I've added the following to the systemjs,config.js

...,
'lumx': 'cloudflare:lumx/1.5.27/lumx.min.js'

So ultimately, in Google Chrome, the error in the console from F12 is

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'lx-progress' is not a known element:
1. If 'lx-progress' is an Angular component, then verify that it is part of this module.
2. If 'lx-progress' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("left label-large-bold">{{waitReason}}</div>
        <div style="position: relative;">
            [ERROR ->]<lx-progress lx-type="circular" lx-diameter="75" *ngIf="show"></lx-progress>
        </div>
    </d"): ng:///app/splash/splash.component.html@4:12
Error: Template parse errors:
'lx-progress' is not a known element:
1. If 'lx-progress' is an Angular component, then verify that it is part of this module.
2. If 'lx-progress' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("left label-large-bold">{{waitReason}}</div>
        <div style="position: relative;">
            [ERROR ->]<lx-progress lx-type="circular" lx-diameter="75" *ngIf="show"></lx-progress>
        </div>
    </d"): ng:///app/splash/splash.component.html@4:12
    at syntaxError (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:1725:34)
    at TemplateParser.parse (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:12845:19)
    at JitCompiler._compileTemplate (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26997:39)
    at eval (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26917:62)
    at Set.forEach (native)
    at JitCompiler._compileComponents (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26917:19)
    at eval (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26804:19)
    at ZoneDelegate.invoke (https://unpkg.com/[email protected]/dist/zone.js:391:26)
    at Object.onInvoke (https://unpkg.com/@angular/core/bundles/core.umd.js:3922:33)
    at ZoneDelegate.invoke (https://unpkg.com/[email protected]/dist/zone.js:390:32)
    at syntaxError (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:1725:34)
    at TemplateParser.parse (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:12845:19)
    at JitCompiler._compileTemplate (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26997:39)
    at eval (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26917:62)
    at Set.forEach (native)
    at JitCompiler._compileComponents (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26917:19)
    at eval (https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:26804:19)
    at ZoneDelegate.invoke (https://unpkg.com/[email protected]/dist/zone.js:391:26)
    at Object.onInvoke (https://unpkg.com/@angular/core/bundles/core.umd.js:3922:33)
    at ZoneDelegate.invoke (https://unpkg.com/[email protected]/dist/zone.js:390:32)
    at resolvePromise (https://unpkg.com/[email protected]/dist/zone.js:783:31)
    at resolvePromise (https://unpkg.com/[email protected]/dist/zone.js:754:17)
    at https://unpkg.com/[email protected]/dist/zone.js:831:17
    at ZoneDelegate.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:424:31)
    at Object.onInvokeTask (https://unpkg.com/@angular/core/bundles/core.umd.js:3913:33)
    at ZoneDelegate.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:423:36)
    at Zone.runTask (https://unpkg.com/[email protected]/dist/zone.js:191:47)
    at drainMicroTaskQueue (https://unpkg.com/[email protected]/dist/zone.js:595:35)
    at ZoneTask.invokeTask [as invoke] (https://unpkg.com/[email protected]/dist/zone.js:502:21)
    at invokeTask (https://unpkg.com/[email protected]/dist/zone.js:1370:14)
defaultErrorLogger @ errors.ts:42

I feel I'm almost there (but don't really know), so any help to push me to the top of the hill is greatly appreciated.

Simon

PS: I did try importing and using CUSTOM_ELEMENTS_SCHEMA on the module, but this took the error away, the app worked, but anything progress like just didn't happen; I'm assuming that directive simply means you can use other UI frameworks like SemanticUI, KeenUI etc.