Template parse errors please help me when i change from ngTemplateOutlet to ngTemplateOutletContext

[venkatasairamu]

Uncaught Error: Template parse errors: Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.

1. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[0], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@17:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ngClass]="getHighlightClass(views[0].dates[row*7+col])"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ngOu"): ng:///NgCalendarModule/MonthViewComponent.html@16:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
3. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
4. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[0], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@35:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <td *ngFor="let col of [0,1,2,3,4,5,6]"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" "): ng:///NgCalendarModule/MonthViewComponent.html@34:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
5. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[1], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@56:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ngClass]="getHighlightClass(views[1].dates[row*7+col])"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ngOu"): ng:///NgCalendarModule/MonthViewComponent.html@55:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
7. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
8. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[1], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@74:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <td *ngFor="let col of [0,1,2,3,4,5,6]"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" "): ng:///NgCalendarModule/MonthViewComponent.html@73:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
9. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
10. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[2], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@95:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ngClass]="getHighlightClass(views[2].dates[row*7+col])"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ngOu"): ng:///NgCalendarModule/MonthViewComponent.html@94:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
11. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
12. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[2], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@113:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <td *ngFor="let col of [0,1,2,3,4,5,6]"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" "): ng:///NgCalendarModule/MonthViewComponent.html@112:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
13. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
14. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("/ion-slides> <ng-template [ngTemplateOutlet]="monthviewEventDetailTemplate" [ERROR ->][ngOutletContext]="{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEve"): ng:///NgCalendarModule/MonthViewComponent.html@122:12 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewEventDetailTemplate" [ngOutletContext]="{showEv"): ng:///NgCalendarModule/MonthViewComponent.html@121:12 at syntaxError (compiler.js:466) at TemplateParser.parse (compiler.js:24329) at JitCompiler._parseTemplate (compiler.js:33757) at JitCompiler._compileTemplate (compiler.js:33732) at compiler.js:33634 at Set.forEach () at JitCompiler._compileComponents (compiler.js:33634) at compiler.js:33504 at Object.then (compiler.js:455) at JitCompiler._compileModuleAndComponents (compiler.js:33503)

[venkatasairamu]

hi fnds i chnanged from ngOutletContext to ngTemplateOutletContext but i got same error and i try in ionic 3 also but get same error

[twinssbc]

@venkatasairamu What does your template syntax look like now? ngTemplateOutlet and ngTemplateOutletContext are two different things, they can be replaced from one to another.

[kirstenfrager]

have gotten this error too. have done some research and other plugins have updated this to ngTemplateOutletContext for the latest version angular 5 version.

[its-Aman]

@venkatasairamu can you provide more info. I also got this error but solved it by replacing ngOutletContext to ngTemplateOutletContext in the dayview.js, weekview.js and monthview.js. Maybe this can help #252

[danilocecilia]

Hi, I have spent some few hours till i found that i should change the values on those js files, it fixed my problem on my ionic3 project, perhaps there should be some of this explanation on the main readme file so it can help others users too. I have tried all 3 versions and none of them worked, just the replace on those 3 '.js' files @its-Aman mentioned worked like a charm.

[twinssbc]

@danilocecilia You should not directly change the js files. Instead, you need to use the correct version of this component. There's explanation about which version should be used depending on your Ionic and Angular version in README.

[rajkishoreandia]

i am getting this error in ionic...i am using the below versions. Angular CLI: 1.7.0 Node: 9.5.0 and ionic 3.19.1.getting the bellow errors need urgent solution compiler.js:466 Uncaught Error: Template parse errors: Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.

1. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[0], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@17:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ngClass]="getHighlightClass(views[0].dates[row*7+col])"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ngOu"): ng:///NgCalendarModule/MonthViewComponent.html@16:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
3. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
4. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[0], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@35:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <td *ngFor="let col of [0,1,2,3,4,5,6]"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" "): ng:///NgCalendarModule/MonthViewComponent.html@34:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
5. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[1], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@56:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ngClass]="getHighlightClass(views[1].dates[row*7+col])"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ngOu"): ng:///NgCalendarModule/MonthViewComponent.html@55:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
7. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
8. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[1], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@74:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <td *ngFor="let col of [0,1,2,3,4,5,6]"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" "): ng:///NgCalendarModule/MonthViewComponent.html@73:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
9. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
10. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[2], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@95:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ngClass]="getHighlightClass(views[2].dates[row*7+col])"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewDisplayEventTemplate" [ngOu"): ng:///NgCalendarModule/MonthViewComponent.html@94:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
11. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
12. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" [ERROR ->][ngOutletContext]="{view: views[2], row: row, col: col}"> </ng-templa"): ng:///NgCalendarModule/MonthViewComponent.html@113:32 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <td *ngFor="let col of [0,1,2,3,4,5,6]"> [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewInactiveDisplayEventTemplate" "): ng:///NgCalendarModule/MonthViewComponent.html@112:32 Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'.
13. If 'ngOutletContext' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
14. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("/ion-slides> <ng-template [ngTemplateOutlet]="monthviewEventDetailTemplate" [ERROR ->][ngOutletContext]="{showEventDetail:showEventDetail, selectedDate: selectedDate, noEventsLabel: noEve"): ng:///NgCalendarModule/MonthViewComponent.html@122:12 Property binding ngOutletContext not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ERROR ->]<ng-template [ngTemplateOutlet]="monthviewEventDetailTemplate" [ngOutletContext]="{showEv"): ng:///NgCalendarModule/MonthViewComponent.html@121:12 at syntaxError (compiler.js:466) at TemplateParser.parse (compiler.js:24329) at JitCompiler._parseTemplate (compiler.js:33757) at JitCompiler._compileTemplate (compiler.js:33732) at compiler.js:33634 at Set.forEach () at JitCompiler._compileComponents (compiler.js:33634) at compiler.js:33504 at Object.then (compiler.js:455) at JitCompiler._compileModuleAndComponents (compiler.js:33503) syntaxError @ compiler.js:466 TemplateParser.parse @ compiler.js:24329 JitCompiler._parseTemplate @ compiler.js:33757 JitCompiler._compileTemplate @ compiler.js:33732 (anonymous) @ compiler.js:33634 JitCompiler._compileComponents @ compiler.js:33634 (anonymous) @ compiler.js:33504 then @ compiler.js:455 JitCompiler._compileModuleAndComponents @ compiler.js:33503 JitCompiler.compileModuleAsync @ compiler.js:33419 CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:230 PlatformRef.bootstrapModule @ core.js:5446 196 @ main.ts:5 __webpack_require__ @ bootstrap 421af4933b4fdf0d0117:54 webpackJsonpCallback @ bootstrap 421af4933b4fdf0d0117:25 (anonymous) @ main.js:1...

[rajkishoreandia]

In my monthview.ngfactory.ts, I am getting the below error saying can't find module 'ionic-angular/components/slides/slides.ngfactory'; . import as import0 from '@angular/core'; import as import1 from '@angular/common'; import as import2 from './monthview'; import as import3 from 'ionic-angular/components/slides/slides.ngfactory'; import as import4 from 'ionic-angular/components/slides/slides'; import as import5 from 'ionic-angular/config/config'; import as import6 from 'ionic-angular/platform/platform'; import as import7 from 'ionic-angular/navigation/view-controller'; import as import8 from 'ionic-angular/components/slides/slide.ngfactory'; import as import9 from 'ionic-angular/components/slides/slide'; import * as import10 from './calendar.service';

[twinssbc]

@rajkishoreandia I feel like you are not using the correct version combination of calendar, ionic and angular. Could you provide your package.json file? If you are using ionic 3.19.1 and Angular 5.0+, you need to use the ionic2-calendar@0.4.x, instead of 0.3.x

[venkatasairamu]

thanks for reply and problem is solved

On Sun, Dec 17, 2017 at 3:26 PM, twinssbc notifications@github.com wrote:

@venkatasairamu https://github.com/venkatasairamu What does your template syntax look like now? ngTemplateOutlet and ngTemplateOutletContext are two different things, they can be replaced from one to another.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/twinssbc/Ionic2-Calendar/issues/246#issuecomment-352244141, or mute the thread https://github.com/notifications/unsubscribe-auth/AcwBQFTzfwklVOxKT-LtJSXr6BSmRGNkks5tBOVhgaJpZM4RDF-G .

[rajkishoreandia]

@twinssbc have done it..........thank you