Question

我正在学习与nativescript的角度积分。为此，我正在开发一个移动应用程序和一个网络应用程序。我已将 RadSideDrawer 集成到我的应用中，如this指南中所示。移动应用程序可以正常运行，但是当我将应用程序提供给要在网络上运行的应用程序（即角度应用程序）时，会引发以下错误。

./ node_modules / tns-core-modules / profiling / profiling.js中的警告   找不到模块：错误：无法解析“〜/ 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 / 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模块中的
ERROR   找不到：错误：无法解析“ ../../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-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模块中的错误   找到：错误：无法解析“ ../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-drawer-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>

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

Answer 1

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

RadSideDrawer在角度上的集成无法正常工作

1 个答案: