angular - Nativescript - ERROR การเรียกใช้ฟังก์ชันไม่รองรับในตัวตกแต่ง แต่ 'NativeScriptRouterModule' ถูกเรียก

ฉันค่อนข้างสับสนกับอันนี้และดูเหมือนว่าจะไม่ใช่ปัญหาที่พบบ่อย ฉันกำลังสร้างโปรเจกต์ NativeScript Angular ซึ่งฉันตั้งใจจะสร้างเว็บไซต์, iOS และ Android จากฐานโค้ดเดียวกัน ฉันเริ่มโปรเจกต์นี้ประมาณหนึ่งปีก่อนและกลับมาทำต่อ สิ่งแรกที่ทำคือ ฉันใช้เวลาอัปเดตแพ็กเกจทั้งหมดของฉันให้เป็นเวอร์ชันล่าสุด อย่างไรก็ตาม เมื่อรัน ns debug ios ฉันเจอข้อผิดพลาดนี้

    ERROR in Error during template compile of 'AppRoutingModule'
  Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.
Unexpected value 'undefined' imported by the module 'AppRoutingModule in /Users/user/project/src/app/app-routing.module.tns.ts'
Can't export value NativeScriptRouterModule in /Users/user/project/node_modules/@nativescript/angular/nativescript-angular.d.ts from AppRoutingModule in /Users/user/project/src/app/app-routing.module.tns.ts as it was neither declared nor imported!
Error during template compile of 'AppRoutingModule'
  Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.
Unexpected value 'undefined' imported by the module 'AppRoutingModule in /Users/user/project/src/app/app-routing.module.ts'
Can't export value NativeScriptRouterModule in /Users/user/project/node_modules/@nativescript/angular/nativescript-angular.d.ts from AppRoutingModule in /Users/user/project/src/app/app-routing.module.ts as it was neither declared nor imported!
Error during template compile of 'AppRoutingModule'
  Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.
Error during template compile of 'AppRoutingModule'
  Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.

มันรู้สึกเหมือนเป็นข้อผิดพลาดของ TypeScript ฉันไม่แน่ใจ การช่วยเหลือใด ๆ จะได้รับการชื่นชม

แพ็กเกจ.json ของฉัน

{
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "web": "ng serve --live-reload false --disableHostCheck true",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "android": "tns run android --bundle",
    "ios": "tns run ios --bundle",
    "mobile": "tns run --bundle",
    "preview": "tns preview --bundle"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.1",
    "@angular/common": "~10.1.1",
    "@angular/compiler": "~10.1.1",
    "@angular/core": "~10.1.1",
    "@angular/forms": "~10.1.1",
    "@angular/localize": "^10.1.1",
    "@angular/platform-browser": "~10.1.1",
    "@angular/platform-browser-dynamic": "~10.1.1",
    "@angular/router": "~10.1.1",
    "@nativescript/angular": "10.1.0",
    "@nativescript/core": "7.0.2",
    "@proplugins/nativescript-localstorage": "^2.3.2",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "jquery": "^3.4.1",
    "moment": "^2.20.1",
    "nativescript-geolocation": "5.1.0",
    "nativescript-theme-core": "^1.0.6",
    "ngx-bootstrap": "^6.1.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.5.2",
    "rxjs-compat": "6.3.3",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1001.0",
    "@angular/cli": "^10.1.0",
    "@angular/compiler-cli": "10.1.0",
    "@nativescript/ios": "7.0.0",
    "@nativescript/schematics": "10.0.2",
    "@nativescript/types": "~7.0.1",
    "@nativescript/webpack": "~3.0.4",
    "@ngtools/webpack": "~10.1.0",
    "@types/jasmine": "2.8.17",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^14.10.0",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "nativescript-dev-sass": "~1.6.0",
    "nativescript-dev-typescript": "~0.8.0",
    "protractor": "~7.0.0",
    "ts-node": "~5.0.1",
    "tslint": "~6.1.0",
    "typescript": "3.9.7",
    "uglifyjs-webpack-plugin": "^1.1.6"
  },
  "main": "main.js"
}

AppRoutingModule ดูเหมือนดังนี้:

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "@nativescript/angular";

import { ErrorComponent, SecureComponent, PublicComponent } from './components';
import { PUBLIC_ROUTES } from './public.routes';
import { SECURE_ROUTES } from './secure.routes';
import { Guard } from './guard';



const APP_ROUTES: Routes = [
    { path: '', component: PublicComponent, children: PUBLIC_ROUTES},
    { path: '', component: SecureComponent, canActivate: [Guard], children: SECURE_ROUTES},
    {
        path: '**',
        component: ErrorComponent
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(APP_ROUTES)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

และมันถูกนำเข้าไปในโมดูลหลักของฉันแบบนี้:

...
import { AppRoutingModule } from "./app-routing.module.tns";


@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        PublicComponent,
        SecureComponent,
        ErrorComponent,
        GeneralComponent,
        MainComponent,
        MenuComponent,
        StoreComponent,
        ItemComponent,
        HomeComponent,
        HashPipe
    ],
    providers: [
        AuthService,
        AuthRequestService,
        StoreRequestService,
        OrderRequestService,
        StorageService,
        Guard,
        {
            provide: UniversalStorageService,
            useValue: mobileStorage
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass:  NoopInterceptor,
            multi: true
        }

    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

โปรแกรมแก้ไขข้อความของฉันเน้นบรรทัดเหล่านี้ดังที่แสดงด้านล่างโดยอ้างว่า Class NativeScriptRouterModule.forRoot(APP_ROUTES) ไม่ใช่ฟังก์ชันของ Angular.

นี่เป็นเรื่องที่ทำให้ฉันติดขัดพอสมควร ดังนั้นขอบคุณสำหรับความช่วยเหลือทุกอย่าง

คำตอบ #1

DepickereSven อ้างถึงการเปลี่ยนแปลงที่จำเป็นในการอัปเกรดเวอร์ชันของ Angular ที่นี่ https://github.com/NativeScript/nativescript-angular/issues/2238#issuecomment-691459621

การลบตัวเลือกการกำหนดค่า

"angularCompilerOptions": {
    "enableIvy": false
}

จะป้องกันข้อผิดพลาดนี้

ณ จุดนี้ ฉันควรจะกล่าวว่าหาสาเหตุที่ฉันปิดการใช้งาน Ivy ตั้งแต่แรก เป็นเพื่อหลีกเลี่ยงข้อผิดพลาด NGCC แบบอื่นที่ฉันได้รับเมื่อพยายามคอมไพล์แอปพลิเคชันของฉัน

หลังจากอ่านสิ่งนี้ https://github.com/angular/angular/issues/37508 ฉันค้นพบว่าสิ่งที่ทำให้เกิดข้อผิดพลาดจริงๆ

ในกรณีของฉัน ฉันพยายามคอมไพล์ dependencies ของ node ไปยังเวอร์ชันเป้าหมายที่สูงกว่าเวอร์ชันที่ dependencies บางตัวอนุญาต สำหรับข้อผิดพลาดนี้ ใน tsconfig.json การเปลี่ยนเวอร์ชันเป้าหมายจาก

"compilerOptions": {
     "target": "es2017"
     ...
}

ถึง

"compilerOptions": {
    "target": "es5"
    ...
}

แก้ไขข้อผิดพลาดเรียบร้อยแล้ว 😊

คำตอบ #2

เปลี่ยนการนำเข้าดังต่อไปนี้:

import { NativeScriptRouterModule } from '@nativescript/angular';

และเนื่องจากคุณอยู่ที่ root ใช้ forRoot

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(APP_ROUTES)],
  exports: [NativeScriptRouterModule]
})

และเพื่อให้ทราบ: เนื่องจาก ns7 เพิ่งออกมา ปลั๊กอิน nativescript ของคุณอาจไม่ทำงาน ดังนั้นให้สังเกตพวกมันและตรวจสอบว่ามีการอัปเดตหรือไม่ โชคดี

    "nativescript-geolocation": "5.1.0",
    "nativescript-theme-core": "^1.0.6",