I'm quite stumped on this one and it seems that it's not a common problem. 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.
This is a bit of a show stopper for me so thanks for any help.
