Интеграция RadSideDrawer в угловых не работает должным образом - PullRequest
0 голосов
/ 02 декабря 2018

Я изучаю угловую интеграцию с nativescript.Для этого я разрабатываю мобильное приложение вместе с веб-приложением.Я интегрировал RadSideDrawer в свое приложение, как показано в этом руководстве.Мобильное приложение работает должным образом, но когда я запускаю приложение для работы в Интернете, то есть в угловом приложении, оно выдает следующее сообщение об ошибке.

ПРЕДУПРЕЖДЕНИЕ.Модуль не найден: Ошибка: Не удается разрешить '~ / package.json' в '/ home / user / test / node_modules / tns-core-modules / profiling'

ОШИБКА в ./node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js

Модуль не найден: ошибка: не удается разрешить '../../../platform' в '/ home / пользователь / test / node_modules / tns-core-modules / ui / builder / component-builder '

ОШИБКА в ./node_modules/tns-core-modules/ui/core/bindable/bindable.jsМодуль не найден: Ошибка: Не удается разрешить '../../../utils/utils' в '/ home / user / test / node_modules / tns-core-modules / ui / core / bindable'

ОШИБКА в ./node_modules/tns-core-modules/file-system/file-name-resolver/file-name-resolver.js

Модуль не найден: Ошибка: невозможно разрешить '../../platform 'in' / home / user / test / node_modules/ tns-core-modules / file-system / file-name-resolver '

ОШИБКА в ./node_modules/tns-core-modules/ui/builder/builder.js Модуль не найден: Ошибка: Может't '' ./../platform 'в' / home / user / test / node_modules / tns-core-modules / ui / builder '

ОШИБКА в ./node_modules/tns-core-modules/ui / content-view / content-view.js Модуль не найден: Ошибка: невозможно разрешить '../core/view' в '/ home / user / test / node_modules / tns-core-modules / ui / content-просмотр '

ОШИБКА в ./node_modules/tns-core-modules/ui/placeholder/placeholder.js Модуль не найден: Ошибка: не удается разрешить' ../core/view 'в' / home /user / test / node_modules / tns-core-modules / ui / placeholder '

ОШИБКА в ./node_modules/tns-core-modules/ui/repeater/repeater.js Модуль не найден: Ошибка: невозможноразрешить '../label' в '/ home / user / test / node_modules / tns-core-modules / ui / repeater'

ОШИБКА в ./node_modules/tns-core-modules/ui/proxy-view-container / proxy-view-container.js

Модуль не найден: ошибка: не удается разрешить '../layouts / layout-base 'in' / home / user / test / node_modules / tns-core-modules / ui / proxy-view-container '[39 [39mm

ОШИБКА в ./node_modules/tns-core-modules / ui / repeater / repeater.js

Модуль не найден: Ошибка: невозможно разрешить '../layouts/layout-base' в '/ home / user / test / node_modules / tns-core-modules / ui / repeater '

ОШИБКА в ./node_modules/tns-core-modules/ui/repeater/repeater.js

Модуль не найден: Ошибка: невозможно разрешить'../layouts/stack-layout 'in' / home / user / test / node_modules / tns-core-modules / ui / repeater '

ОШИБКА в ./node_modules/tns-core-modules/utils/debugМодуль .js не найден: Ошибка: невозможно разрешить '../platform' в '/ home / user / test / node_modules / tns-core-modules / utils'

ОШИБКА в ./node_modules/tns-core-modules / text / formatted-string.js Модуль не найден: Ошибка: невозможно разрешить '../ui/core/view' в '/ home / user / test / node_modules / tns-core-modules / text'

ОШИБКА в ./node_modules/tns-core-modules/text/span.js Модуль не найден: Ошибка: невозможноразрешить '../ui/core/view' в '/ home / user / test / node_modules / tns-core-modules / text'

ОШИБКА в ./node_modules/nativescript-ui-sidedrawer/angular/side-box-directives.js Модуль не найден: ошибка: не удается разрешить './ ..' в '/ home / user / test / node_modules / nativescript-ui-sidedrawer / angular'

ОШИБКА в./node_modules/tns-core-modules/file-system/file-system.js Модуль не найден: ошибка: не удается разрешить './file-system-access' в '/ home / user / test / node_modules / tns-core-modules / file-system '

Код моего приложения следующий:
app.module.ts :

@NgModule({
  declarations: [
    AppComponent,
    AutoGeneratedComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.tns.ts :

@NgModule({
  declarations: [
    AppComponent,
    AutoGeneratedComponent,
    LoginComponent,
    HomeComponent,
  ],
  imports: [
    NativeScriptModule,
    AppRoutingModule,
    NativeScriptFormsModule,
    NativeScriptHttpClientModule,
    NativeScriptUISideDrawerModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

export class AppModule { }

home.component.ts :

@Component({
  moduleId: module.id,
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  private _mainContentText: string;

  constructor(private _changeDetectionRef: ChangeDetectorRef) {
  }

  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;

  private drawer: RadSideDrawer;

  ngOnInit() {
    this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer.";
  }

  ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
  }

  get mainContentText() {
    return this._mainContentText;
  }

  set mainContentText(value: string) {
    this._mainContentText = value;
  }

  public openDrawer() {
    this.drawer.showDrawer();
  }

  public onCloseDrawerTap() {
    this.drawer.closeDrawer();
  }

}

home.component.tns.html :

<RadSideDrawer #sidedrawerId tkExampleTitle tkToggleNavButton>
  <StackLayout tkDrawerContent class="sideStackLayout">
    <StackLayout class="sideTitleStackLayout">
      <Label text="Navigation Menu"></Label>
    </StackLayout>
    <StackLayout class="sideStackLayout">
      <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
      <Label text="Social" class="sideLabel"></Label>
      <Label text="Promotions" class="sideLabel"></Label>
      <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
      <Label text="Important" class="sideLabel"></Label>
      <Label text="Starred" class="sideLabel"></Label>
      <Label text="Sent Mail" class="sideLabel"></Label>
      <Label text="Drafts" class="sideLabel"></Label>
    </StackLayout>
    <Label text="Close Drawer" color="lightgray" padding="10" style="horizontal-align: center" (tap)="onCloseDrawerTap()"></Label>
  </StackLayout>
  <StackLayout tkMainContent>
    <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
    <Button text="OPEN DRAWER" (tap)="openDrawer()" class="drawerContentButton"></Button>
  </StackLayout>
</RadSideDrawer>

home.component.html :

<p>
  home works!
</p>

Любая помощь будет оценена.Заранее спасибо:)

1 Ответ

0 голосов
/ 02 декабря 2018

Я нашел решение этого вопроса.Просто нам нужно переименовать home.component.ts в home.coponent.tns.ts, а затем создать еще один home.component.ts для веб-представления.При этом нам не нужно использовать какой-либо плагин nativesctipt в веб-приложении, и таких ошибок не будет. Для тех, кто хочет больше заниматься исследованиями, можно найти больше материалов для исследования здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...