angular - Angular2: Stuggling to understand this strange behavior -
i have widgetcomponent use in angular2 app. app in fact 2 different apps within one: desktop version (boot-desktop) , mobile version (boot-mobile). widgetcomponent have used in desktop version, , working on mobile version , want use widgetcomponent in mobile version.
however, error when attempt utilize widgetcomponent in mobile version:
browser_adapter.ts:78error: uncaught (in promise): typeerror: cannot read property 'query' of null @ resolvepromise (zone.js:538) @ zone.js:515 @ zonedelegate.invoke (zone.js:323) @ object.ngzoneimpl.inner.inner.fork.oninvoke (ng_zone_impl.ts:67) @ zonedelegate.invoke (zone.js:322) @ zone.run (zone.js:216) @ zone.js:571 @ zonedelegate.invoketask (zone.js:356) @ object.ngzoneimpl.inner.inner.fork.oninvoketask (ng_zone_impl.ts:56) @ zonedelegate.invoketask (zone.js:355)
this error not occur in desktop version of app.
so tried experiment. cloned widgetcomponent, ie created 2 identical versions of - same code , mark - follows:
app/shared/widget widget.html widget.component.ts app/shared/widget2 widget.html widget.component.ts
now, when in mobile app reference widget component follows:
import { component } "@angular/core"; import { widgetcomponent } "./../../shared/widget2/widget.component"; // import { widgetcomponent } "./../../shared/widget/widget.component"; @component({ directives: [widgetcomponent], selector: "some-component", templateurl: "app/path/some.html" }) export class somecomponent { constructor() {} }
it works!
but if following, doesn't work:
import { component } "@angular/core"; // import { widgetcomponent } "./../../shared/widget2/widget.component"; import { widgetcomponent } "./../../shared/widget/widget.component"; @component({ directives: [widgetcomponent], selector: "some-component", templateurl: "app/path/some.html" }) export class somecomponent { constructor() {} }
i baffled going on here. ideas?