"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

There is no way to convert a strongly typed object into an observable object using MobX

I have been utilizing the MobX library in conjunction with ReactJS, and it has integrated quite smoothly. Currently, I am working with an observable array structured as follows: @observable items = []; When I add an object in the following manner, everyt ...

javascripttypescriptobservablemobxmobx-react

Just starting out with Angular and struggling to understand how to fix the TS(2322) error

Main Code: export class TodosComponent implements OnInit{ todos!: Todo[]; localItem: string; constructor(){ const data = localStorage.getItem("todos"); this.localItem = data; if(this.localItem == null){ this.todos = []; } ...

angulartypescriptvisual-studio-codecompiler-errors

Incorporate Angular frontend into current website or project

I've successfully built a website using bootstrap, but now I'm looking to integrate Angular in order to transform it into a single page application. The goal is that when a user clicks on a link, only the necessary content will be loaded from the ...

javascriptnode.jsangularexpress

Ensure that the value of a variable in the Ionic/Angular template has been properly initialized

I am currently facing an issue: I have an array of blog posts. Some of them have photos, while others do not. I aim to display the first photo if any are set. How can I verify whether the URL value in my array is set? <ion-header> <ion-navbar& ...

angulartypescriptionic-framework

Handling a callback after the completion of another action in Angular 2

I am facing an issue where I need to delete an item from a list and then update the page to reflect that change. The current code handles the deletion of the item using DELETE_APPLICATION and then fetches the updated list using GET_INSIGHT_APPLICATIONS. Ho ...

angularangular2-templateangular2-servicespublish-subscribeangular2-directives

Prevent the array from altering its values

I am utilizing a mock-service that is configured in the following way: import { Article } from "./article"; export const ARTICLES: Article[] = [ new Article( 1, 'used', 5060639120949, 'Monster Energy& ...

angulartypescript

Switch button - reveal/conceal details

I am looking for assistance in toggling the visibility of information when clicking on an arrow icon. I have attempted to use JavaScript, but it was unsuccessful. My goal is to hide the information below by clicking on the downward-facing arrow image , an ...

javascripthtmlcssangulartypescript

Navigating Timezones with PrimeNG Calendar Component <p-calendar>

I am experiencing an issue with PrimeNG in a multi-user environment where each user is in a different timezone. I need all users to submit their form data in EST, but it seems like the browser is converting the dates to the user's local timezone upon ...

angulardateprimeng

The value returned by a mocked Jest function is ignored, while the implemented function is not invoked

Having an issue with mocking the getToken function within my fetchData method in handler.ts while working with ts-jest. I specifically want to mock the response from getToken to avoid making the axios request when testing the fetchData method. However, des ...

javascripttypescriptunit-testingjestjsts-jest

Comparing Angular 2 with Angular.js, React.js, and Typescript

Hello there, I am a fresh-faced web developer looking to create a modest website for my personal use. However, my knowledge is limited when it comes to JavaScript and jQuery concepts. In order to expand my skills and build an enhanced website, I decided ...

angularjsreactjstypescriptangular

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications? <div class="input-group input-group text-center in ...

javascripthtmlangular

I recently made the switch to Angular 9.0 for my project, but when I ran the build using yarn, I encountered some warnings. Despite the

I encountered this issue on both Ubuntu 16.04 and 18. I have tried various solutions such as reinstalling yarn, node, and clearing the cache, but the warnings persist. For every build using a script, the node_modules folder is deleted and then reinstalled ...

angularwarningsangular9

Ways to expand a TypeScript interface and make it complete

I'm striving to achieve the following: interface Partials { readonly start?: number; readonly end?: number; } interface NotPartials extends Partials /* integrate Unpartialing in some way */ { readonly somewhere: number; } In this case, NotPar ...

javascripttypescript

Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

What is the most efficient method to display a duplicated column with the same data side by side without altering the JSON or using separate matColumnDef keys? Data: const ELEMENT_DATA: PeriodicElement[] = [ {position: 1, name: 'Hydrogen', wei ...

angulartypescriptangular-material

Error in typescript: The property 'exact' is not found in the type 'IntrinsicAttributes & RouteProps'

While trying to set up private routing in Typescript, I encountered the following error. Can anyone provide assistance? Type '{ exact: true; render: (routerProps: RouterProps) => Element; }' is not compatible with type 'IntrinsicAttribu ...

javascriptreactjstypescript

Checking to see if a string meets the criteria of being a valid ARGB value

How do I verify that a string represents a valid ARGB value, such as #ffffffff for ARGB 255,255,255,255? Is there a way to validate this using TypeScript and C#? ...

c#typescript

Guide to importing a function from a Javascript module without declaration

Currently, I am utilizing a third-party Javascript library that includes Typescript type declarations in the form of .d.ts files. Unfortunately, as is often the case, these type declarations are inaccurate. Specifically, they lack a crucial function which ...

typescript

What is the procedure for utilizing custom .d.ts files in an Angular 15 project?

Currently, within my Angular 15 project, I am utilizing a package called bootstrap-italia. This particular package is dependent on the standard Bootstrap package and includes additional custom components and types. However, it should be noted that this pac ...

angulartypescript.d.tstype-definition

Using NgRx to observe state changes in a service instead of relying on an Effect

Is it possible for a service to monitor state changes and make HTTP calls based on the state value without being triggered by an effect (NgRx)? In other words, can a service react to a portion of the store and eliminate the need for an effect to be involve ...

angularngrxngrx-effects

What is the process for transferring a function to reducers in Redux Toolkit?

In one of my files called Main.tsx, I have a function that sends a request and retrieves data: async function fetchProducts(productsPage = 1, id?: number) { const itemsPerPage = 5 let url: string if (id) { url = `https://reqres.in/api/ ...

reactjstypescriptredux-toolkit