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

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.

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

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.

@mapo80

@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?

@DepickereSven

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

@DepickereSven

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

@DepickereSven

@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.

@mapo80

@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

@armourjami

@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?

@mapo80

@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

@NathanWalker

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!

@NathanWalker

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.

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

@mapo80

@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.

@DepickereSven

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

@mapo80

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?

Guys thanks for your help, I need to disable Ivy but if I disable something goes wrong.
To solve this issue it’s needed to make a new version of @nativescript/angular with nativescript disabled. There is a PR to disable Ivy: #2254

To test this bug with Ivy disabled just try to build this simple project:
https://github.com/mapo80/TestNs7Ng10

Ok no problem. However, I did manage to get around that exact issue with Ivy enabled, so it is possible.

Hi,
Does anyone found the right fix instead of enabling Ivy ?
I'm facing also this issue and enabling Ivy is making my app running but wondering the accuracy of this procedure.
In my case the error is thrown by one of my generated lib but there is a lack of debugging to find which code block is origin of this error

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

DepickereSven commented on Sep 6, 2020

armourjami commented on Sep 10, 2020

DepickereSven commented on Sep 12, 2020

armourjami commented on Sep 13, 2020

mapo80 commented on Sep 14, 2020

mapo80 commented on Sep 16, 2020

armourjami commented on Sep 16, 2020

mapo80 commented on Sep 17, 2020

DepickereSven commented on Sep 17, 2020

mapo80 commented on Sep 17, 2020

mapo80 commented on Sep 17, 2020

mapo80 commented on Sep 17, 2020

DepickereSven commented on Sep 18, 2020

mapo80 commented on Sep 18, 2020

armourjami commented on Sep 18, 2020

mapo80 commented on Sep 18, 2020

armourjami commented on Sep 18, 2020

tuxtux59 commented on Oct 16, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions