EddyVerbruggen / nativescript-gradient

:art: Easily add fancy (or subtle) gradient backgrounds to your views
MIT License
54 stars 6 forks source link

Could Not Use Gradient HTML Tag #4

Closed DonaldBough closed 7 years ago

DonaldBough commented 7 years ago

I'm trying to use this plugin but received this error with this code.

devices.component.html condensed to just the gradient part

<ActionBar title="Dashboard">
  <ActionItem
    class="rec blue"
    text="Logout"
    ios.position="right" android.position="right"
    (tap)="logout()"></ActionItem>
</ActionBar>
<GridLayout
  rows="*,auto">
    <Label
    class="backgroundLabel"
    text="No Caps"
    visibility="{{ deviceList.length === 0 ? 'visible' : 'collapsed' }}">
  </Label>

  <ListView
    row="0"
    class="darkBackground"
    [class.hidden]="!preferredScan"
    [items]="deviceList">
    <template let-item="item">
      <device-list-item
        [device]="item"
        [deviceAddress]="item.deviceAddress"></device-list-item>
    </template>
  </ListView>

  <StackLayout
    row="1"
    class="bigBlueButtonStackLayout"> 
    <Button
        class="bigBlueButton"
        [class.active]="allScan"
        text="Add a New Cap"
        (tap)="linkingDialog()"></Button>
  </StackLayout>

  <Gradient direction="to right" colors="#FF0077, #FF00FF">
      <Label class="p-20 c-white" horizontalAlignment="center" text="My gradients are the best." textWrap="true"></Label>
      <Label class="p-10 c-white" horizontalAlignment="center" text="It's true." textWrap="true"></Label>
  </Gradient>

  <ActivityIndicator
    row="0"
    [busy]="listLoaded"></ActivityIndicator>
</GridLayout>

app.module.ts:

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { routes } from "./app.routing";
import { LoginModule } from "./login/login.module";
import { RegisterModule } from "./register/register.module";
import { DevicesModule } from "./devices/devices.module";
import { AppComponent } from "./app.component";
import { GattProtocol, GattService } from "./devices/shared";
import { registerElement } from "nativescript-angular";
registerElement("Gradient", () => require("nativescript-gradient").Gradient);

@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptHttpModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes),
        LoginModule,
        RegisterModule,
        DevicesModule
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        GattProtocol,
        GattService
    ],
    bootstrap: [AppComponent],
    // schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

package.json:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": {
    "type": "git",
    "url": "https://github.com/ConcordanceHealth/MobilePatient"
  },
  "nativescript": {
    "id": "org.nativescript.chspatientapp",
    "tns-android": {
      "version": "3.0.1"
    },
    "tns-ios": {
      "version": "3.0.1"
    }
  },
...other dependecies blah blah blah
}

CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3491:32: EXCEPTION: Uncaught (in promise): Error: Error in devices/devices.component.html:37:2 caused by: Could not load view for: Gradient.TypeError: undefined is not a constructor (evaluating 'new view_1.Property({ CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3496:36: ORIGINAL STACKTRACE: CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:3497:36: resolvePromise@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:416:40 CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:342:26: Unhandled Promise rejection: Error in devices/devices.component.html:37:2 caused by: Could not load view for: Gradient.TypeError: undefined is not a constructor (evaluating 'new view_1.Property({ CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): Error: Error in devices/devices.component.html:37:2 caused by: Could not load view for: Gradient.TypeError: undefined is not a constructor (evaluating 'new view_1.Property({

EddyVerbruggen commented 7 years ago

Can you try and reproduce this error with the demo app inside this repo, please?