angular - Nativescript - 错误装饰器中不支持函数调用,但调用了 'NativeScriptRouterModule'

标签 angular typescript nativescript

我对这个问题感到很困惑,而且这似乎不是一个常见问题。我正在运行一个构建 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 错误,我不确定。任何帮助将不胜感激。

我的package.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 函数。

enter image description here

这对我来说有点阻碍,所以感谢您的帮助。

最佳答案

DepickereSven 在此处引用了升级 Angular 版本所需的更改 https://github.com/NativeScript/nativescript-angular/issues/2238#issuecomment-691459621

删除配置选项

"angularCompilerOptions": {
    "enableIvy": false
}

将防止此错误。

此时我应该提到,我首先禁用 Ivy 的原因是为了避免在尝试编译应用程序时遇到不同的 NGCC 错误。

读完这篇文章后https://github.com/angular/angular/issues/37508我发现了确实导致错误的原因。

就我而言,我试图将节点依赖项编译到比某些依赖项允许的更高的目标版本。对于此错误,在 tsconfig.json 中,将目标版本更改为

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

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

修复了错误。 😊

关于angular - Nativescript - 错误装饰器中不支持函数调用,但调用了 'NativeScriptRouterModule',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63836620/

相关文章:

javascript - 通过 Telerik App Builder 开发 native 应用程序时 main-page.js 和 main-view.model.js 有什么区别

android - NativeScript 不适用于 Linux 和 Node.js 11.1.0

typescript - Jest/ Jasmine : Weird Execution Order Of beforeEach()

javascript - 如何通过循环将属性推送到数组内对象内的数组?

html - 从迭代循环中隐藏特定内容并在隐藏面板中显示

angular - 用于 node.js crypto-js 的 webpack 5 Angular polyfill

typescript - `as const` 缩小数组文字元组的替代方法,以避免 `readonly` 修饰符

vue.js - 在 Visual Studio Code 中使用 Vue 调试 NativeScript

angular - 升级到angular 12后,所有 Material 成分都是 "not a known element"

angular - 在 IE 中调试 angular 2 typescript 应用程序