Angular2/nativeScript: 奇怪的错误，抱怨一个组件没有导入任何模块，即使它被导入到主模块中

Question

我正在忙于一个小型条形码扫描器应用程序，它有一个可以设置本地 IP 的 SettingsComponent。该应用程序构建没有问题，但是当它部署在 genymotion 模拟器上时，我收到以下错误。似乎找不到 SettingsComponent，即使我将它导入我的 app.module.ts...（它被添加到下面“...NavigatableComponents”代码中的声明数组）。知道为什么会这样吗？我该如何解决？

我的错误：

An uncaught Exception occurred on "main" thread. java.lang.RuntimeException: Unable to resume activity {org.nativescript.barcodescanner/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreateView failed

Error: Component SettingsComponent is not part of any NgModule or the module has not been imported into your module. File: "/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js, line: 17126, column: 14

堆栈跟踪：

Frame: function:'RuntimeCompiler._createCompiledHostTemplate', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js', line: 17126, column: 21 Frame: function:'', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js', line: 17085, column: 39 Frame: function:'', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js', line: 17083, col

我的settings.html:

<StackLayout class="page">
<Label class="h1 title m-x-auto " text="Settings"></Label>
<StackLayout class="form" *ngIf="!IPSaved">
<TextField class="form-input border" placeholder="Enter IP"></TextField>
<Button class="btn btn-primary" text="Submit"></Button>
</StackLayout>
<StackLayout *ngIf="IPSaved">
    <Label class="h1" text="IP Submitted successfully"></Label>
    <Button class="btn btn-primary" text="Done" [nsRouterLink]="['/home']"></Button>
</StackLayout>
</StackLayout>

我的settings.component.ts:

import { Component,} from '@angular/core';

import { RestService } from '../../services/rest.service';
import { AppSettingsService } from '../../services/app-settings.service';

@Component({
  selector: 'settings',
  templateUrl: './pages/settings/settings.component.html'
})
export class SettingsComponent {
  ipSaved: boolean;

  constructor(private restService: RestService, private appSettingsService: AppSettingsService) {

  }

    submitIP(ip: string) {
        this.appSettingsService.saveLocalIP(ip);
        this.restService.init(ip);
        this.ipSaved = true;
    }

}

我的app.module.ts:

import { NgModule, ValueProvider } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptRouterModule } from 'nativescript-angular/router'
import { NativeScriptHttpModule } from 'nativescript-angular/http';


import { BarcodeScanner } from "nativescript-barcodescanner";
import { RestService } from './services/rest.service';
import { appSettingsService } from './services/app-settings.service';
import { AppComponent } from "./app.component";
import { HomeComponent } from "./pages/home/home.component";
import { CheckBarcodesComponent } from './pages/check-barcodes/check-barcodes.component';
import { SettingsComponent } from './pages/settings/settings.component';

import { routes, navigatableComponents } from './app.routing';
@NgModule({
    imports : [
    NativeScriptModule,     
    NativeScriptFormsModule ,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
    ],
    declarations : [
    AppComponent,   
    ...navigatableComponents
    ],
    providers : [
    RestService,
    BarcodeScanner],
    bootstrap : [AppComponent]      
})
export class AppModule {}

我的app.routing.ts:

import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { CheckBarcodesComponent } from './pages/check-barcodes/check-barcodes.component';
import { SettingsComponent } from './pages/settings/settings.component';

export const routes = [
    {path: "", component: HomeComponent},
        {path: "checkBarcodes", component: CheckBarcodesComponent},
            {path: "settings", component: SettingsComponent}
];

export const navigatableComponents = [
HomeComponent,
CheckBarcodesComponent,
SettingsComponent
];

Answer 1

有点猜测，但我认为 app.module.ts 应该有这个导入：import { AppSettingsService } from './services/app-settings.service';（注意大写 'A'）并且您需要将 AppSettingsService 添加到列表中providers 在同一个 class.

Angular2/nativeScript: 奇怪的错误，抱怨一个组件没有导入任何模块，即使它被导入到主模块中

Angular2/nativeScript: Strange error complaining about a component that's not imported into any module even though it is imported in the main module

nativescript

angular