0

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

./node_modules/tns-core-modules/profiling/profiling.js 中的警告模块未找到：错误：无法解析 '/home/user/test/node_modules/tns-core-modules 中的 '~/package.json' /分析'

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

找不到模块：错误：无法解析“/home/user/test/node_modules/tns-core-modules/ui/builder/component-builder”中的“../../../platform”

./node_modules/tns-core-modules/ui/core/bindable/bindable.js 中的错误模块未找到：错误：无法解析 '/home/ 中的 '../../../utils/utils'用户/测试/node_modules/tns-core-modules/ui/core/bindable'

./node_modules/tns-core-modules/file-system/file-name-resolver/file-name-resolver.js 中的错误

找不到模块：错误：无法在“/home/user/test/node_modules/tns-core-modules/file-system/file-name-resolver”中解析“../../platform”

./node_modules/tns-core-modules/ui/builder/builder.js 中的错误找不到模块：错误：无法解析 '/home/user/test/node_modules/tns 中的 '../../platform' -core-modules/ui/builder'

./node_modules/tns-core-modules/ui/content-view/content-view.js 中的错误模块未找到：错误：无法解析 '/home/user/test/ 中的 '../core/view' node_modules/tns-core-modules/ui/content-view'

./node_modules/tns-core-modules/ui/placeholder/placeholder.js 中的错误模块未找到：错误：无法解析 '/home/user/test/node_modules/tns- 中的 '../core/view'核心模块/ui/占位符'

./node_modules/tns-core-modules/ui/repeater/repeater.js 中的错误模块未找到：错误：无法解析 '/home/user/test/node_modules/tns-core- 中的 '../label'模块/用户界面/中继器'

./node_modules/tns-core-modules/ui/proxy-view-container/proxy-view-container.js 中的错误

找不到模块：错误：无法解析“/home/user/test/node_modules/tns-core-modules/ui/proxy-view-container”中的“../layouts/layout-base”[39[39mm

./node_modules/tns-core-modules/ui/repeater/repeater.js 中的错误

找不到模块：错误：无法在“/home/user/test/node_modules/tns-core-modules/ui/repeater”中解析“../layouts/layout-base”

./node_modules/tns-core-modules/ui/repeater/repeater.js 中的错误

找不到模块：错误：无法在“/home/user/test/node_modules/tns-core-modules/ui/repeater”中解析“../layouts/stack-layout”

./node_modules/tns-core-modules/utils/debug.js 中的错误找不到模块：错误：无法解析 '/home/user/test/node_modules/tns-core-modules/ 中的 '../platform'实用程序'

./node_modules/tns-core-modules/text/formatted-string.js 中的错误找不到模块：错误：无法解析 '/home/user/test/node_modules/ 中的 '../ui/core/view' tns 核心模块/文本'

./node_modules/tns-core-modules/text/span.js 中的错误找不到模块：错误：无法解析 '/home/user/test/node_modules/tns- 中的 '../ui/core/view'核心模块/文本'

./node_modules/nativescript-ui-sidedrawer/angular/side-drawer-directives.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 中的 './file-system-access' /tns-core-modules/文件系统'

我的应用程序的代码如下：
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>

任何帮助将不胜感激。先感谢您 ：）

4

1 回答 1

1

我找到了这个问题的解决方案。只是我们需要重命名home.component.ts，home.coponent.tns.ts然后home.component.ts为 web 视图创建另一个。有了这个，我们不需要在 web 应用程序中使用任何 nativesctipt 插件，也不会出现任何这些错误。对于那些想要进一步研究的人，可以在这里找到更多研究材料。

于 2018-12-02T12:42:22.820 回答