"Pairing AngularJS 2 with Vaadin for a winning combination

Good day,

I'm currently following a tutorial but encountering some challenges with integrating Vaadin and Angularjs2 into my Joomla Backend project. The error message I am facing is as follows:

 polymer-micro.html:196 Uncaught TypeError: Cannot read property 'instanceCount' of undefined
 at HTMLStyleElement.createdCallback (polymer-micro.html:196)  createdCallback @ polymer-micro.html:196

 polymer-micro.html:118 Uncaught TypeError: Cannot read property '_makeReady' of undefined
 at polymer-micro.html:118 (anonymous) @ polymer-micro.html:118 index.php?option=com_stackcommerce:57 

 ZoneAwareError {stack: "(SystemJS)   Cannot read property 'useShadow' of und… nts/com_stackcommerce/assets/dist/dev/app/main.js", message: "(SystemJS)  Cannot read property 'useShadow' of und… nts/com_stackcommerce/assets/dist/dev/app/main.js", originalStack:  "Error: (SystemJS) Cannot read property 'useShadow'…/assets/node_modules/zone.js/dist/zone.js:349:25)",     zoneAwareStack: "Error: (SystemJS) Cannot read property 'useShadow'… ode_modules/zone.js/dist/zone.js:349:25) [<root>]", name: "Error"…}
  (anonymous) @ index.php?option=com_stackcommerce:57 ZoneDelegate.invoke @ zone.js:242 Zone.run @ zone.js:113 (anonymous) @  zone.js:535 ZoneDelegate.invokeTask @ zone.js:275 Zone.runTask @ zone.js:151 drainMicroTaskQueue @ zone.js:433 ZoneTask.invoke @ zone.js:349

The code from my index.php file is provided below:

 // No direct access
 defined('_JEXEC') or die;

 $document = JFactory::getDocument();
 $document->setBase(JURI::base());
 $document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/bower_components/webcomponentsjs/webcomponents.min.js');
 $document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/core-js/client/shim.min.js');
 $document->addScriptDeclaration("window.Polymer = {dom: 'shadow'};");

 $document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/zone.js/dist/zone.js');
 $document->addScript(JUri::root() . 'administrator/components/com_stackcommerce/assets/node_modules/reflect-metadata/Reflect.js');
 ...
...

Here's a glimpse of my systemjs.conf.js file for further reference:

 (function(global) {
     var paths = {
         'npm:': 'components/com_stackcommerce/assets/node_modules/'
    };

    var map = {
    app: 'components/com_stackcommerce/assets/dist/dev/app',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    ...
...

I would greatly appreciate any insights or suggestions on how to resolve the error I'm currently facing within my browser while running the application.

angulartypescriptpolymervaadinsystemjs

Answer №1

It appears that there may be an issue with the order of scripts and imports in your code.

The problem likely stems from Joomla's structure, which separates where <link> and <script> tags are inserted into the document head in a predetermined sequence. This means that any <link> tags added with the addHeadLink method will come before any <script> tags added using the addScript or addScriptDeclaration methods.

To resolve this issue, I recommend adjusting your index.php file so that all Angular and Polymer imports and initial settings are included as a single block of HTML. By doing this, you can ensure that everything is loaded in the correct order.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The information is failing to display properly within the mat-menu

Recently, I've been working on creating a navbar that includes a submenu. Even though the navigation bar data is loading properly, I am facing some issues with the submenu functionality. As a beginner in this area, I would appreciate any help or guida ...

htmlangularangular-material

What is the best way to utilize a union of interfaces in TypeScript when working with instances?

Review this TypeScript snippet: class A {public name: string = 'A';} interface B {num: number;} class Foo { get mixed(): Array<A | B> { const result = []; for (var i = 0; i < 100; i ++) { result.push(Mat ...

typescript

Angular 2 - Can a Content Management System Automate Single Page Application Routing?

I am interested in creating a single-page application with an integrated content management system that allows users to edit all aspects of the site and add new pages. However, I have found it challenging to configure the SPA to automatically route to a n ...

angularexpresscontent-management-systemangular2-routing

Maximizing the potential of process.hrtime.bigint

Whenever I include the following code: const a = process.hrtime.bigint(); The linter says it's okay, but during compilation, I encounter this error message: error TS2339: Property 'bigint' does not exist on type 'HRTime'. This ...

node.jstypescript

When the admin clicks the start button, redirect all users to the designated page

Currently, I am developing a voting application that features both an admin and users. My goal is for the voting campaign to kick off as soon as the admin clicks on the start button. Upon starting the voting process, I aim to redirect all users to a diff ...

javaangularspringspring-boot

Waiting for variable to become false using Angular 7 Observable

The observable below highlights the authentication process: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { CookieService } from 'ngx-cookie-service'; import { Observabl ...

angulartypescriptpromiseobservableangular7

What is the best way to retrieve the value of this object?

In my project, I am utilizing Angular 8 to extract data from a radio input. However, when I transmit this data to Node.js and then to a MongoDB database, it is not being properly registered. The entry in the database collection appears as follows: "__v" : ...

jsonangularmongodbtypescript

The absence of @angular/compiler in the bundle file is causing an issue with Angular es

I've developed a shell application that operates using and https://github.com/systemjs/systemjs to manage its various micro-frontends. Recently, I created a new Angular application and aimed to integrate it with the esBuild builder tool. Upon runni ...

angularangular-climicro-frontendesbuild

Bringing in Data with Angular

For my Angular projects, I attempted to utilize csv files in the following manner: import * as data1 from "./data.csv"; import * as data2 from "./data2.csv"; These files are situated in the same directory as the .ts file that I am trying to access them w ...

angular

An exploration of distributing union types within conditional type arrays in TypeScript

One interesting challenge I am facing involves a conditional type that utilizes a generic type T in order to determine an Array<T> type. For example: type X<T> = T extends string ? Array<T> : never; The issue arises when I input a union ...

typescriptdiscriminated-union

Embed the getServerSideProps function within a helper method

I have multiple pages that require protection using firebase admin methods: const getServerSideProps = async (ctx: GetServerSidePropsContext) => { try { const cookies = nookies.get(ctx); const token = await firebaseAdmin.auth().verifyIdToken(c ...

reactjstypescriptnext.js

Fixing prop passing issues in Vue.js components to prevent errors

My Vue-cli install with TypeScript is set up to render JSX using a boilerplate. However, I am facing an issue when trying to pass a property to the HelloWorld component. Here's what my code looks like: export default Vue.extend({ name: 'App&apo ...

typescriptvue.jspropertiesjsx

Exploring the power of TypeScript for authenticating sessions with NextJS

Utilizing next-auth's getSession function in API routes looks something like this for me: const mySession = await getSession({ req }); I have confirmed that the type of the mySession is outlined as follows: type SessionType = { user: { email: s ...

javascriptnode.jstypescriptnext.jsnext-auth

Exploring the integration of Angular framework with Laravel

Currently, I am coding in Laravel 7 and Angular 10 separately. However, for my upcoming project, I will be incorporating both Laravel and Angular together. My plan is to integrate Angular into my Laravel application and leverage Angular for my JavaScript t ...

phpangularlaravel

Is there a way to determine the distance in miles and feet between various sets of latitude and longitude coordinates?

I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points. const latsLngs = [ { lat: 40.78340415946297, lng: -73.971427388 ...

javascriptangulartypescript

Error in Protractor Typescript: The 'By' type does not share any properties with the 'Locator' type

https://i.stack.imgur.com/8j2PR.png All the different versions Error. Protractor version : 5.2.0 npm : 3.10.10 node :6.9.5 typescript :2.6.0 The 'By' type does not share any properties with the 'Locator' type What is the solution to ...

typescriptprotractor

The specified "ID" type variable "$userId" is being utilized in a positional context that is anticipating a "non-null ID" type

When attempting to execute a GraphQL request using the npm package graphql-request, I am exploring the use of template literals. async getCandidate(userId: number) { const query = gql` query($userId: ID){ candidate( ...

typescriptgraphqltemplate-strings

Employing various Class Methods based on the chosen target compiler option

Is there a way to instruct TypeScript to utilize different implementations of methods within the same class, based on the specified target option in the tsconfig.json file? I am currently transitioning one of my scripts to TypeScript to streamline managem ...

javascripttypescriptclass

Is the Scope Staying Static in AngularJS 1.4 when Input Text Changes and Two-Way Binding is Enabled?

Encountering a strange issue with AngularJS 1.4 (TypeScript). The problem lies within the controller where a variable is set and displayed in an input text box. Oddly, when attempting to edit the value in this text box and clicking on a button, the variabl ...

angularjstypescriptangularjs-directiveangularjs-scope

Angular Binding issue - Unable to bind to 'ngModel' as it is not recognized as a valid property of 'input' element, despite the property being present

I have developed a component class like the one below and I am attempting to link the class fields to the template, but encountered the following error: ERROR in src/app/admin/projects/projects.component.html: 41:34 - error NG8002: Can't bind to &ap ...

c#angular