search

NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

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

Open mapo80 opened 4 years ago

mapo80 commented 4 years ago

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):

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 commented 4 years ago

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 commented 4 years ago

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.

Screen Shot 2020-09-11 at 7 30 48 AM
DepickereSven commented 4 years ago

@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 commented 4 years ago

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

mapo80 commented 4 years ago

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

mapo80 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

I have tried everything but can't solve the problem. I've read this post but nothing: https://github.com/angular/angular/issues/23609#issuecomment-561615821

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 commented 4 years ago

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 commented 4 years ago

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

DepickereSven commented 4 years ago

@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 commented 4 years ago

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

armourjami commented 4 years ago

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?

mapo80 commented 4 years ago

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: https://github.com/NativeScript/nativescript-angular/pull/2254

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

armourjami commented 4 years ago

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

tuxtux59 commented 4 years ago

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