trotyl / angular-contrib Goto Github PK
View Code? Open in Web Editor NEWCommunity extension to Angular framework
License: MIT License
Community extension to Angular framework
License: MIT License
ngNoHost
https://github.com/pauldraper/angular-nohost-stack-error
ng serve
http://localhost:4200/ works.
http://localhost:4200/?prod has the error:
core.js:9110 ERROR RangeError: Maximum call stack size exceeded
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
at InterceptingRenderer.renderer.childNodes (angular-contrib-core.js:1574)
Relevant code:
@Component({
selector: 'stuff',
host: { ngNoHost: '' },
template: `
Example
`,
})
export class StuffComponent {}
@Component({
selector: 'util',
template: `
<ng-container *ngTemplateOutlet="content"></ng-container>
`,
})
export class UtilComponent {
@ContentChild(TemplateRef, { static: false })
content: TemplateRef<{}>;
}
@Component({
selector: 'app',
template: `
<util>
<ng-template>
<stuff></stuff>
</ng-template>
</util>
`,
})
export class AppComponent {
@ContentChild(TemplateRef, { static: false })
content: TemplateRef<{}>;
}
I just tried to implement angular-contrib for its ngNoHost functionality and it is causing a conflict which is preventing my Angular 8 project from running.
I'm receiving this error:
ERROR in node_modules/@angular/platform-browser/animations/animations.d.ts(65,22): error TS2720: Class 'ɵangular_packages_platform_browser_animations_animations_f' incorrectly implements class 'Renderer2'. Did you mean to extend 'Renderer2' and inherit its members as a subclass?
Property 'childNodes' is missing in type 'ɵangular_packages_platform_browser_animations_animations_f' but required in type 'Renderer2'.
node_modules/@angular/platform-browser/animations/animations.d.ts(96,22): error TS2720: Class 'ɵAnimationRenderer' incorrectly implements class 'Renderer2'. Did you mean to extend 'Renderer2' and inherit its members as a subclass?
Property 'childNodes' is missing in type 'ɵAnimationRenderer' but required in type 'Renderer2'.
I've traced this back to here. I've tried recreating the bare bones example in my environment, and it still generates the same error. Is there a known incompatibility, am I missing something?
It appears that the npm package @angular-contrib/common does not list @angular-contrib/core as as dependency, but it should.
There is a small conflict with the Renderer2 extension with Angular 9 animations.
ERROR in node_modules/@angular/platform-browser/animations/animations.d.ts:71:22 - error TS2720: Class 'ɵangular_packages_platform_browser_animations_animations_f' incorrectly implements class 'Renderer2'. Did you mean to extend 'Renderer2' and inherit its members as a subclass?
Property 'childNodes' is missing in type 'ɵangular_packages_platform_browser_animations_animations_f' but required in type 'Renderer2'.
71 export declare class ɵangular_packages_platform_browser_animations_animations_f implements Renderer2 {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular-contrib/core/render-extension/render-extension.module.d.ts:5:9
5 childNodes(node: Node): NodeList;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
'childNodes' is declared here.
node_modules/@angular/platform-browser/animations/animations.d.ts:102:22 - error TS2720: Class 'ɵAnimationRenderer' incorrectly implements class 'Renderer2'. Did you mean to extend 'Renderer2' and inherit its members as a subclass?
Property 'childNodes' is missing in type 'ɵAnimationRenderer' but required in type 'Renderer2'.
102 export declare class ɵAnimationRenderer extends ɵangular_packages_platform_browser_animations_animations_f implements Renderer2 {
~~~~~~~~~~~~~~~~~~
node_modules/@angular-contrib/core/render-extension/render-extension.module.d.ts:5:9
5 childNodes(node: Node): NodeList;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
'childNodes' is declared here.
is there anything ng-host can do, that we cant do natively?
we have :host { ... }
for styles and host: { ... }
in the decorator to setup props/events + bindings
It doesn't appear the the instructions on https://github.com/trotyl/angular-contrib/tree/master/projects/common/src/ng-no-host for adding host: { '[attr.ngNoHost]': '' }
works.
Whereas adding host: { ngNoHost: '' }
does work.
The repo has the MIT license, but package.json does not list it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.