Cannot build project after install - missing props/ modules

[Ed-Simmons]

Which platform(s) does your issue occur on?

• iOS
• emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 7.0.6

Please, tell us how to recreate the issue in as much detail as possible.

Upon install, wither with npm i or tns plugin add, upon building my project I get several warnings about missing props, and some errors regarding missing modules:

I tried fixing the filepath errors manually, which allowed the webpack build to complete, but then resulted in a critical error:

[stefan-uhlemann77]

Same issue here. Android 9.0 (Real device) CLI: 7.0.6

Seems to be an issue with es2015?

My tsconfig.ts:

{ "compilerOptions": { "module": "ESNext", "target": "es2015", "moduleResolution": "node", "experimentalDecorators": true, "emitDecoratorMetadata": true, "noEmitHelpers": true, "noEmitOnError": true, "skipLibCheck": true, "lib": [ "es2018", "es2017", "dom", "es6" ], "baseUrl": ".", "paths": { "~/*": [ "src/*" ] } }, "include": [ "src/tests/**/*.ts", "src/app/**/*.ts", "src/**/*.ios.ts", "src/**/*.android.ts" ], "files": [ "./references.d.ts", "./src/main.ts" ], "exclude": [ "node_modules", "platforms", "e2e" ] }

[farfromrefug]

@stefan-uhlemann77 can you share your package.json?

[stefan-uhlemann]

@stefan-uhlemann77 can you share your package.json?

{ "name": "@my-app-ng", "main": "main.js", "version": "1.0.0", "description": "My Application", "license": "SEE LICENSE IN ", "repository": "", "scripts": { "lint": "tslint \"src/*/.ts\"", "ngcc": "ngcc --properties es2015 module main --first-only", "postinstall": "npm run ngcc" }, "dependencies": { "@angular/animations": "~10.1.0", "@angular/common": "~10.1.0", "@angular/compiler": "~10.1.0", "@angular/core": "~10.1.0", "@angular/forms": "~10.1.0", "@angular/platform-browser": "~10.1.0", "@angular/platform-browser-dynamic": "~10.1.0", "@angular/router": "~10.1.0", "nativescript-material-bottomsheet": "^3.3.0", "nativescript-material-ripple": "^3.3.0", "nativescript-material-snackbar": "^3.3.0", "@nativescript/angular": "~10.1.0", "@nativescript/core": "7.0.0", "@nativescript/theme": "2.3.3", "@nstudio/nativescript-floatingactionbutton": "^2.1.0", "@nstudio/nativescript-pulltorefresh": "3.0.0", "@nstudio/nativescript-rad-imagepicker": "^2.0.5", "crypto-js": "^4.0.0", "moment": "2.27.0", "nativescript-background-http": "4.2.1", "nativescript-camera": "4.5.0", "nativescript-clipboard": "^1.2.0", "nativescript-cscreenshot": "1.0.2", "nativescript-geolocation": "5.1.0", "nativescript-image": "3.0.12", "nativescript-imagecropper": "3.0.0", "nativescript-lottie": "^5.0.0", "nativescript-menu": "^1.1.6", "nativescript-modal-datetimepicker": "^1.2.2", "nativescript-permissions": "^1.3.9", "nativescript-ui-autocomplete": "7.0.2", "nativescript-ui-calendar": "7.0.2", "nativescript-ui-chart": "~8.0.2", "nativescript-ui-dataform": "~7.0.2", "nativescript-ui-listview": "~9.0.2", "nativescript-ui-sidedrawer": "~9.0.3", "reflect-metadata": "~0.1.12", "rxjs": "^6.6.0", "zone.js": "~0.11.1" }, "devDependencies": { "@angular/cli": "10.1.0", "@angular/compiler-cli": "~10.1.0", "@nativescript/android": "7.0.0", "@nativescript/schematics": "^10.0.2", "@nativescript/types": "~7.0.0", "@nativescript/webpack": "~3.0.0", "@ngtools/webpack": "~10.1.0", "codelyzer": "~4.5.0", "node-sass": "^4.7.1", "tslint": "~5.19.0", "typescript": "~3.9.7" }, "gitHead": "xxx", "readme": "NativeScript Application" }

[farfromrefug]

@stefan-uhlemann77 you are using plugins not compatible with N7! Swith nativescript-material-... With @nativescript-community/ui-material-...

[ChuXo]

@stefan-uhlemann77 you are using plugins not compatible with N7! Swith nativescript-material-... With @nativescript-community/ui-material-...

Not working. Using the exact same project with "@nativescript-community/ui-material-bottomsheet": "4.0.10", instead of "nativescript-material-bottomsheet": "^3.3.0", (also tried various versions like 4.0.0)

As soon as I place "NativeScriptMaterialBottomSheetModule.forRoot()" in the app.module.ts , the app crashes and don't recognizing any native elements like GridLayout, StackLayout etc anymore. (also tried putting it directly into the sub-modules import with no success)

Any suggestion!?

[farfromrefug]

You have a log of the crash ? (With the community plugin)

[ChuXo]

ERROR in src/app/app.module.ts:41:14 - error NG1010: Value at position 8 in the NgModule.imports of AppModule is not a reference Value could not be determined statically.

41 imports: [ ~ 42

... 59

60 ],

  src/app/app.module.ts:58:9
    58         NativeScriptMaterialBottomSheetModule.forRoot()

Unable to evaluate this expression statically.

src/app/app.module.ts:58:9 58 NativeScriptMaterialBottomSheetModule.forRoot()

    A value for 'forRoot' cannot be determined statically, as it is an external declaration.
src/app/components/employee/search-employee.component.html:1:1 - error NG8001: 'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1 <GridLayout rows="auto,48,*" (loaded)="onLoaded()">

src/app/components/employee/search-employee.component.ts:14:18 14 templateUrl: "./search-employee.component.html",

    Error occurs in the template of component SearchEmployeeComponent.
src/app/components/employee/search-employee.component.html:2:5 - error NG8001: 'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2     <GridLayout row="0" height="75" paddingTop="25" class="modal-header-bar">

src/app/components/employee/search-employee.component.ts:14:18 14 templateUrl: "./search-employee.component.html",

    Error occurs in the template of component SearchEmployeeComponent.
src/app/components/employee/search-employee.component.html:5:5 - error NG8001: 'SearchBar' is not a known element:
1. If 'SearchBar' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

5     <SearchBar row="1" hint="Mitarbeiter suchen" (textChange)="onTextChanged($event)"

6 (loaded)="searchBarLoaded($event)" (clear)="onClear($event)" (submit)="onSubmit($event)">

  src/app/components/employee/search-employee.component.ts:14:18
    14     templateUrl: "./search-employee.component.html",

Error occurs in the template of component SearchEmployeeComponent.

src/app/components/employee/search-employee.component.html:7:5 - error NG8001: 'RadListView' is not a known element:

1. If 'RadListView' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

7 <RadListView #listview row="2" [items]="dataItems" [itemTemplateSelector]="templateSelector">

  src/app/components/employee/search-employee.component.ts:14:18
    14     templateUrl: "./search-employee.component.html",

Error occurs in the template of component SearchEmployeeComponent.

src/app/components/employee/search-employee.component.html:7:36 - error NG8002: Can't bind to 'items' since it isn't a known property of 'RadListView'.

7 <RadListView #listview row="2" [items]="dataItems" [itemTemplateSelector]="templateSelector">

  src/app/components/employee/search-employee.component.ts:14:18
    14     templateUrl: "./search-employee.component.html",

Error occurs in the template of component SearchEmployeeComponent.

src/app/components/employee/search-employee.component.html:7:56 - error NG8002: Can't bind to 'itemTemplateSelector' since it isn't a known property of 'RadListView'.

7 <RadListView #listview row="2" [items]="dataItems" [itemTemplateSelector]="templateSelector">

  src/app/components/employee/search-employee.component.ts:14:18
    14     templateUrl: "./search-employee.component.html",
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~0m
    Error occurs in the template of component SearchEmployeeComponent.
src/app/components/timepicker/timepicker.component.html:1:1 - error NG8001: 'StackLayout' is not a known element:
1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1 <StackLayout class="page-timepicker" (loaded)="onLoaded($event)">

src/app/components/timepicker/timepicker.component.ts:19:18 19 templateUrl: "./timepicker.component.html",

    Error occurs in the template of component TimePickerComponent.
src/app/components/timepicker/timepicker.component.html:3:5 - error NG8001: 'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

3     <GridLayout columns="*, 100" rows="auto, auto, auto">

src/app/components/timepicker/timepicker.component.ts:19:18 19 templateUrl: "./timepicker.component.html",

    Error occurs in the template of component TimePickerComponent.
src/app/components/timepicker/timepicker.component.html:6:9 - error NG8001: 'StackLayout' is not a known element:
1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

6         <StackLayout col="0" colspan="2" row="2">

src/app/components/timepicker/timepicker.component.ts:19:18 19 templateUrl: "./timepicker.component.html",

    Error occurs in the template of component TimePickerComponent.
src/app/components/timepicker/timepicker.component.html:7:13 - error NG8001: 'TimePicker' is not a known element:
1. If 'TimePicker' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

 7             <TimePicker (loaded)="onPickerLoaded($event)" #timePicker

8 minuteInterval="1"

 9                         is24Hours="true"

10 (timeChange)="onTimeChanged($event)">

  src/app/components/timepicker/timepicker.component.ts:19:18
    19     templateUrl: "./timepicker.component.html",

Error occurs in the template of component TimePickerComponent.

src/app/components/availability/availability.component.html:1:1 - error NG8001: 'StackLayout' is not a known element:

1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1 <StackLayout class="page-availability" (loaded)="onLoaded($event)">

  src/app/components/availability/availability.component.ts:25:18
    25     templateUrl: "./availability.component.html",

Error occurs in the template of component AvailabilityComponent.

src/app/components/availability/availability.component.html:3:5 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

3

  src/app/components/availability/availability.component.ts:25:18
    25     templateUrl: "./availability.component.html",

Error occurs in the template of component AvailabilityComponent.

src/app/components/availability/availability.component.html:7:58 - error NG8002: Can't bind to 'text' since it isn't a known property of 'Label'.

7

  src/app/components/availability/availability.component.ts:25:18
    25     templateUrl: "./availability.component.html",

Error occurs in the template of component AvailabilityComponent.

src/app/components/daypicker.component.html:1:1 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1 <GridLayout rows="auto,*" (loaded)="onLoaded()">

  src/app/components/daypicker.component.ts:18:18
    18     templateUrl: "./daypicker.component.html"

Error occurs in the template of component DayPickerComponent.

src/app/components/daypicker.component.html:2:5 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2

  src/app/components/daypicker.component.ts:18:18
    18     templateUrl: "./daypicker.component.html"

Error occurs in the template of component DayPickerComponent.

src/app/components/daypicker.component.html:5:5 - error NG8001: 'RadCalendar' is not a known element:

1. If 'RadCalendar' is an Angular component, then verify that it is part of this module.

2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

   5 <RadCalendar #calendar row="1"

   6         [eventSource]="calendarEvents"

   ... 16 (navigatingToDateStarted)="onNavigatingToDateStarted($event)"

   17         (viewModeChanged)="onViewModeChanged($event)">

   src/app/components/daypicker.component.ts:18:18 18 templateUrl: "./daypicker.component.html"

   
   Error occurs in the template of component DayPickerComponent.
   src/app/components/daypicker.component.html:6:9 - error NG8002: Can't bind to 'eventSource' since it isn't a known property of 'RadCalendar'.

6 [eventSource]="calendarEvents"

  src/app/components/daypicker.component.ts:18:18
    18     templateUrl: "./daypicker.component.html"

Error occurs in the template of component DayPickerComponent.

src/app/components/datepicker/datepicker.component.html:1:1 - error NG8001: 'StackLayout' is not a known element:

1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1 <StackLayout class="page-datepicker" (loaded)="onLoaded($event)">

  src/app/components/datepicker/datepicker.component.ts:25:18
    25     templateUrl: "./datepicker.component.html",

Error occurs in the template of component DatePickerComponent.

src/app/components/datepicker/datepicker.component.html:3:5 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

3

  src/app/components/datepicker/datepicker.component.ts:25:18
    25     templateUrl: "./datepicker.component.html",

Error occurs in the template of component DatePickerComponent.

src/app/components/datepicker/datepicker.component.html:6:9 - error NG8001: 'StackLayout' is not a known element:

1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

6

  src/app/components/datepicker/datepicker.component.ts:25:18
    25     templateUrl: "./datepicker.component.html",

Error occurs in the template of component DatePickerComponent.

src/app/components/datepicker/datepicker.component.html:7:13 - error NG8001: 'DatePicker' is not a known element:

1. If 'DatePicker' is an Angular component, then verify that it is part of this module.

2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

   7 <DatePicker #datepicker

   8                 [minDate]="minDate" [maxDate]="maxDate"

   ... 14 locale="{{ locale }}"

   15                 verticalAlignment="center">

   src/app/components/datepicker/datepicker.component.ts:25:18 25 templateUrl: "./datepicker.component.html",

   
   Error occurs in the template of component DatePickerComponent.
   src/app/components/datepicker/datepicker.component.html:8:17 - error NG8002: Can't bind to 'minDate' since it isn't a known property of 'DatePicker'.

8 [minDate]="minDate" [maxDate]="maxDate"

  src/app/components/datepicker/datepicker.component.ts:25:18
    25     templateUrl: "./datepicker.component.html",

Error occurs in the template of component DatePickerComponent.

src/app/components/datepicker/datepicker.component.html:8:37 - error NG8002: Can't bind to 'maxDate' since it isn't a known property of 'DatePicker'.

8 [minDate]="minDate" [maxDate]="maxDate"

  src/app/components/datepicker/datepicker.component.ts:25:18
    25     templateUrl: "./datepicker.component.html",

Error occurs in the template of component DatePickerComponent.

src/app/components/datepicker/datepicker.component.html:14:17 - error NG8002: Can't bind to 'locale' since it isn't a known property of 'DatePicker'.

14 locale="{{ locale }}"

  src/app/components/datepicker/datepicker.component.ts:25:18
    25     templateUrl: "./datepicker.component.html",

Error occurs in the template of component DatePickerComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:1:1 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

1

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:2:5 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:6:5 - error NG8001: 'StackLayout' is not a known element:

1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

6 <StackLayout row="1" class="bottomsheetelement" (tap)="onAction('change')">

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:7:9 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

7

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:12:5 - error NG8001: 'StackLayout' is not a known element:

1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

12 <StackLayout row="2" class="bottomsheetelement" (tap)="onAction('crop')">

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:13:9 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

13

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:18:5 - error NG8001: 'StackLayout' is not a known element:

1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

18 <StackLayout row="3" class="bottomsheetelement" (tap)="onAction('remove')">

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/components/uploadprofileimage/uploadprofileimage.component.html:19:9 - error NG8001: 'GridLayout' is not a known element:

1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

19

  src/app/components/uploadprofileimage/uploadprofileimage.component.ts:14:18
    14     templateUrl: "./uploadprofileimage.component.html"

Error occurs in the template of component UploadProfileImageComponent.

src/app/app.component.html:1:1 - error NG8001: 'page-router-outlet' is not a known element:

1. If 'page-router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'page-router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1

  src/app/app.component.ts:11:18
    11     templateUrl: "app.component.html"

Error occurs in the template of component AppComponent.

[farfromrefug]

OK seems to be an issue with bottomsheet angular. Sadly I really don't a lot about angular :s I ll try and have a look

[rbudnar]

TLDR; Worth a shot - did you try adding an entry for this in ngcc.config.js? As described here: https://github.com/NativeScript/nativescript-angular/wiki/Updating-and-developing-for-@nativescript-angular-v9-with-Ivy-or-without

Longer version: I ran into the above, which looks similar in nature to what you're seeing and what was reported in https://github.com/nativescript-community/ui-material-components/issues/177

error NG1010: Value at position 5 in the NgModule.imports of SharedModule is not a reference: [object Object]
 41     imports: [
                 ~
 42         NativeScriptCommonModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 53         // DropDownModule,
    ~~~~~~~~~~~~~~~~~~~~~~~~~~
 54     ],

My solution was to add this to ngcc.config.js:

 "@nativescript-community/ui-material-bottomsheet": {
            entryPoints: {
                angular: {
                    ignoreMissingDependencies: true,
                },
            },
            ignorableDeepImportMatchers: [/tns-core-modules\//, /@nativescript\/core\//, /@nativescript\/angular\//],
        },

And then: yarn clean && yarn (from package.json - "clean": "npx rimraf hooks node_modules package-lock.json platforms") and then ns run android and my issues went away. I'm still fighting other upgrade issues but this resolved the bottom sheet problem for me.

Edit - the documentation on what specifically is really needed in ngcc.config.js is very scant. It is possible that some of the above entry is not required.