[Angular 10] - Function calls are not supported in decorators but 'NativeScriptRouterModule' was called

[mapo80]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.0.4
• Cross-platform modules: 6.5.15
• Android Runtime: 6.5.3
• iOS Runtime: 6.5.2
• NativeScript-Angular: 10.0
• Angular: 10.0

Describe the bug
I've migrated my project from NS 6.5.x and Ng 8.21 to Ng 9 and then to NG 10.
Migration to Ng 9 was ok, I can start my application without Ivy enable.
To migrate to Ng 9 I've followed this wiki:
https://github.com/NativeScript/nativescript-angular/wiki/Updating-and-developing-for-@nativescript-angular-v9-with-Ivy-or-without

Then I made migration to Ng 10, following this post:
https://nativescript.org/blog/upgrading-tips-for-angular-10/

I've fixed all build errors but now I have this and I don't know how to solve:

ERROR in Error during template compile of 'AppRoutingModule'
  Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.

Can you help me? Can I upgrade to Ng 10 without Ns 7 migration.
I would like to migrate to NS 7 later when all plugins I use will offer NS 7 support.

[DepickereSven]

I'm having the same error.
I also followed the same upgrading as you.
From Angular 8 to Angular 9 and now Angular 10.

package.json details

    "@angular/cli": "~10.1.0",
    "@angular/compiler-cli": "~10.1.0",
    "@nativescript/angular": "~10.1.0",
    "@nativescript/core": "^7.0.0",

iOS runtime: 6.5.2

This is the specific error I'm getting

ERROR in src/app/app.module.ts(10,33): Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'NativeScriptRouterModule' was called in 'routesModule'
    'routesModule' calls 'NativeScriptRouterModule'.

This my app-routing.module

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

import { HomeComponent } from '~/app/views/home.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

export const routesModule = NativeScriptRouterModule.forRoot(routes);

This is the app module where I'm importing routesModule

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptModule } from '@nativescript/angular';

import { AppComponent } from './app.component';
import { HomeComponent } from '~/app/views/home.component';
import { routesModule } from '~/app/app-routing.module';

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, routesModule],
  declarations: [AppComponent, HomeComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {}

[armourjami]

I'm also having this issue. I'm running a building a nativescript angular project where I intend to build a website, iOS and Android from the same code base. I started the project about a year ago and came back to it. First things first, I spent some time bringing all my packages up to date. However, when running ns debug ios I come across this error.

    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.

It feels like a typescript error I'm not sure. Any help would be appreciated.

My 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 looks like this:

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 { }

And it is imported into my main module like this:

...
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 { }

My text editor highlight these lines as shown below citing that Class NativeScriptRouterModule.forRoot(APP_ROUTES) is not an Angular Function.

[DepickereSven]

@mapo80 and @armourjami

By upgrading to Angular 9.
The wiki said you need to make the following change:
disable Ivy by adding this to your project's tsconfig.json with the following:

"compilerOptions": {
  ...your various options, etc.
},
"angularCompilerOptions": {
    "enableIvy": false
}

When you remove this

"angularCompilerOptions": {
    "enableIvy": false
}

from your tsconfig.json file the build should work again.
I hope this also solves your issue?

[armourjami]

Awesome thanks @DepickereSven. This does solve the issue. Thanks 😁

[mapo80]

This fixes the issue, thanks very much.
I want to understand why this workaround fixes the issue, do you know @DepickereSven?

[mapo80]

@DepickereSven I need to disable Ivy, because if I enable it my application doesn't work.
If I remove angularCompilerOptions, Ivy is enabled by default but I need to disable Ivy.
Do you know how to solve this with Ivy disabled? Suggestions?

ERROR in Error during template compile of 'AppRoutingModule'
  Function calls are not supported in decorators but 'NativeScriptRouterModule' was called.

[armourjami]

@mapo80 I had the same thing and managed to fix it. Take a look at this https://stackoverflow.com/questions/63836620/nativescript-error-function-calls-are-not-supported-in-decorators-but-natives

[mapo80]

@armourjami I've checked and I have this configuration so stack overflow question doesn't solve my problem:

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

Suggestions? How to disable Ivy?

[DepickereSven]

@mapo80 to be honest I don't have any clue.
I can't find any information to opt-out of Ivy in Angular 10.
See Angular website: https://angular.io/guide/ivy

[mapo80]

I have tried everything but can't solve the problem.
I've read this post but nothing: angular/angular#23609 (comment)

I want to say that the same code and app works without problems on Ns 6.5 and Ng 9.

Only @NathanWalker can help us!

[mapo80]

I made another try, I've downgraded from Ns 10 to Ns 9 but I've used NS 7 and I don't have this problem.
App doesn't start for other reasons but I don't have build problems.

I raise my hands! @NathanWalker, I'll wait for your answer.

[mapo80]

I've created a repo to reproduce the issue: https://github.com/mapo80/TestNs7Ng10

[DepickereSven]

@mapo80 I would suggest you close this issue and create a new one with your specific problem. Because your issue about "[Angular 10] - Function calls are not supported in decorators but 'NativeScriptRouterModule'" was called has been resolved.

[mapo80]

@DepickereSven This issue is solved if Ivy is enabled, if not build continues to fail.

[armourjami]

Removing the config

"angularCompilerOptions": {
    "enableIvy": false
}

enables ivy and I think you want Ivy, I don't think that's the issue, there is something else at play here.

I managed to work around it but I can't be specific as to what it was that I did. @mapo80 could you paste you package.json? I'm not promising to solve this but if I compare what you have with what I have, then perhaps it will remind me what I did to get around it?