Angular RadSideDrawer集成在角度传感器中工作不正常

我正在学习与nativescript的角度集成。为此，我正在开发一个移动应用程序和一个web应用程序。我将RadSideDrawer集成到我的应用程序中，如指南所示。移动应用程序工作正常，但当我在web上运行应用程序（即angular应用程序）时，它会抛出以下错误

./node_modules/tns core modules/profiling/profiling.js中的警告 未找到模块：错误：无法在中解析“~/package.json” “/home/user/test/node_模块/tns核心模块/评测”

错误 ./node_modules/tns core modules/ui/builder/component builder/component-builder.js

未找到模块：错误：无法解析中的“../../../platform” “/home/user/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” “/home/user/test/node_modules/tns core modules/file system/file name resolver”

./node_modules/tns core modules/ui/builder/builder.js模块中出错 未找到：错误：无法在中解析“../../platform” “/home/user/test/node_modules/tns core modules/ui/builder”

错误 ./node_modules/tns核心模块/ui/content-view/content-view.js模块 未找到：错误：无法在中解析“../core/view” “/home/user/test/node_modules/tns core modules/ui/content view”

./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” “/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” “/home/user/test/node_modules/tns core modules/ui/repeater”

./node_modules/tns core modules/utils/debug.js Module中出现错误，未找到 发现：错误：无法在中解析“../platform” “/home/user/test/node_modules/tns核心模块/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 Module中出错 发现：错误：无法在中解析“../ui/core/view” “/home/user/test/node_modules/tns core modules/text”

错误 ./node_modules/nativescript ui sidedrawer/angular/side-drawer-directions.js 未找到模块：错误：无法解析中的“/…” “/home/user/test/node_modules/nativescript ui sidedrawer/angular”

./node_modules/tns core modules/file system/file-system.js中出错 找不到模块：错误：无法解析中的“/文件系统访问” “/home/user/test/node_modules/tns核心模块/文件系统”

我的应用程序的代码如下：

app.module.ts:

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

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

export class AppModule { }

@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();
  }

}

app.module.tns.ts:

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

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

export class AppModule { }

@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.ts:

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

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

export class AppModule { }

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

<p>
  home works!
</p>

---

任何帮助都将不胜感激。提前感谢：）

我已经找到了这个问题的解决方案。我们只需要将

home.component.ts

重命名为

home.coponent.tns.ts

，然后为web视图创建另一个

home.component.ts

。这样我们就不需要将任何nativesctipt插件添加到t中web应用程序中不会出现任何错误。对于那些想进一步研究的人，可以找到更多的研究资料。

tns核心模块/任何nativescript特定插件或代码都不应该成为web应用程序的一部分。.您的web组件中有什么？@Manoj我也这么认为，但现在我太困惑了。请您帮忙好吗我退出。我是一个彻头彻尾的傻瓜，希望在这里得到一些答案。我已经编辑了我的问题并添加了代码。请看一看。尝试从你的

主页中删除任何与nativescript相关的东西。component.ts

，RadSideDrawer相关的东西。如果这解决了问题，请告诉我。谢谢你的答案对我帮助很大。我找到了解决方案实际上，如果我们要使用nativescript中的插件，我们需要为web和移动设备创建单独的组件。无论如何，thanx很多@manojI都遵循了这一点，并为drawer创建了服务，但当我为web编译时，在./node_modules/tns core modules/application/application.js Module中出现错误：错误：无法解决“D:\Vinet\Projects\Extra\Notes\ui\angular8\node\u modules\tns core modules\application”i｢wdm｣中的“@nativescript/core/application/application”：编译失败。