Peek WEB NS

这是一个实用程序包，它使得 AngularCLI 和 NativeScript + TypeScript + Angular2 项目之间的代码复用成为可能。

使用方法

平台选择

Insert this at the top of your main.ts for your native script application.
This tells the utility that we're compiling for NativeScript

::

    import {PeekCoreConfigService} from "@synerty/peek-web-ns";
    PeekCoreConfigService.PLATFORM_TARGET = PeekCoreConfigService.PLATFORMS.MOBILE_NATIVE;


Component Template Selection

Angular CLI 可以处理无路径的模板，而 NativeScript 需要相对于 app/ 的路径。

使用此实用程序切换每个平台的组件模板。所需的文件都在同一目录下，命名如下

• main-home.component.ts
• main-home.component.web.html
• main-home.component.ns.html

底层原理：当在 NativeScript 上编译模板时，它使用 NODE，因此我们可以使用 module.filename。我们使用这个来找到相对于 app 的相对路径，然后将 templateUrl 添加路径并将 .web.html 替换为 .ns.html。

::

import {Component} from "@angular/core";

@Component({
    selector: "peek-main-home",
    templateUrl: 'main-home.component.web.html',
    moduleFilename : module.filename
})
export class MainHomeComponent {
    testMsg: string = "Unified home Update2";

}

路由选择

Angular CLI and NativeScript require different router modules, this utility helps switch
between them.

You will still need separate main AppModule files.

app.ns.module.ts
::

    @NgModule({
        declarations: [
            AppComponent,
            // declarations
        ],
        bootstrap: [AppComponent],
        imports: [
            NativeScriptModule,
            NativeScriptRouterModule,
            PeekRouterModule.forRoot(staticRoutes), // <-- HERE
            // other imports
        ],
        schemas: [NO_ERRORS_SCHEMA],
        providers: [{
                provide: NgModuleFactoryLoader,
                useClass: PeekModuleFactoryLoader
            },
            // Other providers
        ]
    })
    export class AppNsModule {

    }


app.web.module.ts
::

    @NgModule({
        declarations: [
            AppComponent,
            // declarations
        ],
        imports: [
            RouterModule,
            PeekRouterModule.forRoot(staticRoutes), // <-- HERE
            BrowserModule,
            FormsModule,
            HttpModule,
            // other imports
        ],
        providers: [
            // Other providers
        ],
        bootstrap: [AppRootComponent]
    })
    export class AppWebModule {
    }