Again. How to include jQuery/(dialog.pollyfil) without magic in actual version of universal-starter?

[zmnv]

Hello.

In last version of this universal-starter I see new file structure (new routing method?):
+home
+about
+todo

And that directories have their own routing.ts file.

In that situation, how to use "/:slug" routing? And how to change titles?

Because, code of standart angular2 app about 'set.Title' doesnt works correctly (It works, but then universal cache not work).

Can you prepare best practicals for actual time?

[zmnv]

SOLVED

Just dublicate +home and rename to +kitty-detail (replace the component and module names inside also).

For example: kitty-detail.component.ts allows to use :slug and change title without error Parse5DomAdapter: getElementsByTagName

import { Component, Injectable, Inject, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import {ModelService} from "../../shared/model/model.service";
import {ActivatedRoute, Router, Params} from "@angular/router";
import { DOCUMENT } from '@angular/platform-browser'

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'kitty-detail',
  template: 'Kitty DETAIL! {{data | json}}'
})
export class KittyDetailComponent {
  data: any = {};
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    public model: ModelService,
    @Inject(DOCUMENT) private _document: any
  ) {

    // we need the data synchronously for the client to set the server response
    // we create another method so we have more control for testing
    this.universalInit();
  }

  universalInit() {

    this.route.params.forEach((params:Params) => {

      let slug = params['slug'];
      console.log('SLUG — '+slug);

      this.model.get(`http://localhost/vlako/wp-json/wp/v2/posts?slug=${slug}`).subscribe(data => {
        this.data = data[0];
        console.log('DATA: '+this.data);
      });

      this.setTitle('HELLO UNIVERSAL!');

    });
  }

  /**
   * Sets the title of the page
   */
  setTitle(title: string) {
    this._document.title = title
  }

}

by #287

[zmnv]

Don't manipulate the nativeElement directly. Use the Renderer.
And what is that mean?

There are NINE THOUTHANDS posts how to use jQuery with angular universal, but some are working, some not. And I dont understand it.

For example

index.html (at the bottom)

  <script async src="/main.bundle.js"></script>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

  <script  src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Smooth-Mouse-Scrolling-scrollSpeed/jQuery.scrollSpeed.js"></script>
  <script  src="/assets/scripts/lightbox.min.js"></script>
  <script  src="/assets/scripts/myScript.js"></script>

app.component.ts

var $ = require("jquery");
....
  constructor(...) {
....
    setTimeout(() => {
      // run jQuery stuff here
    }, 1);
  }

myScript.js

$('.superbutton').click(function() {
  $('.overlay-menu').css("height","100vh");
});

$('#close-navigation').click(function() {
  $('.overlay-menu').css("height","0vh");
});

Problem: if I paste button with class «superbutton» in index.html, IT WORKS, but if I put that button in (for example) app.component.html — it doesn't.

Please, help ;)

[MarkPieszak]

You typically want to add the Plugin for $ in webpack so that its global, then you can do

import * as $ from 'jquery'; // in the component

Make sure you wrap any jQuery you're doing in components etc in the isBrowser conditional.

import { isBrowser } from 'angular2-universal';

// anywhere jQuery needs to go
if (isBrowser) { /* jQuery here */ }

Also if you want to add additional plugins and such within your webpack bundles, only import them in your app.client NgModules at the top somewhere.

import 'some-jQuery-plugin'; // as an example

Hope that helps!

I'll be making a write up on This soon since it's pretty common problem people run into! (In any SSR solution framework)

[zmnv]

SOLVED

It's worked only when I call the jquery event like .click() by some functions ( yourFunction() or ngOnInit) in **.component.ts

0. Include jQuery library in webpack like this wiki page [not necessary]

1. Then

index.html

 <script async src="/main.bundle.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

home.component.ts

import {Component, ChangeDetectionStrategy, ViewEncapsulation, OnInit } from '@angular/core';

import { ModelService } from '../shared/model/model.service';

import * as $ from 'jquery';
import { isBrowser } from 'angular2-universal';

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'home',
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  data: any = {};
  constructor(public model: ModelService) {

    // we need the data synchronously for the client to set the server response
    // we create another method so we have more control for testing
    this.universalInit();
  }

  universalInit() {
    this.model.get('/data.json').subscribe(data => {
      this.data = data;
    });

  }

  ngOnInit() {

    if (isBrowser) {
      console.log('IS BROWSER ngOnInit');
      /* jQuery here */
      $("#test-button").click(function () {
        alert('WOOOW');
        $(this).css("background","#000");
      });
    }

  }

}

or worked also

home.component.html

<button id="test-button" (click)="opyDopy()">Test-Button</button>

home.component.ts

import {Component, ChangeDetectionStrategy, ViewEncapsulation, OnInit} from '@angular/core';
import { ModelService } from '../shared/model/model.service';

import * as $ from 'jquery';
import { isBrowser } from 'angular2-universal';

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'home',
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
  data: any = {};
  constructor(public model: ModelService) {
    this.universalInit();
  }

  universalInit() {
    this.model.get('/data.json').subscribe(data => {
      this.data = data;
    });
  }

  opyDopy() {
    if (isBrowser) {
      console.log('IS BROWSER CLICKED');
      /* jQuery here */
      $("#test-button").click(function () {
        alert('WOOOW');
        $(this).css("background","#000");
      });
    }
  }

}

[zmnv]

@MarkPieszak Where I can past that code?
import 'some-jQuery-plugin'; // as an example

However, thank you! Waiting tutorials about include jQuery, custom .js files, and etc..

[zmnv]

@MarkPieszak there are so many open and closed issues, but I cant understand one more thing.

Is Angular 2 Universal supports MaterialDesign (MaterialModule)? Because in files node.module.ts and browser.module.ts I can see the code in imports
// MaterialModule.forRoot() should be included first

So nowtime, I had to use external material (getmdl.io), but I want to use standart material modules.

If I delete comments in that two files and add code
<button md-button>Button</button>
that button Its not make 'material'.

[MarkPieszak]

Glad you got it working!
One warning, if possible I'd suggest weening off of jQuery if at all possible 🙈 you'll be happy you did In the long run!

If you were adding jQuery plugins you'd want to import that line in your "Client.ts" file, the browser bootstrap one basically. That way the server just completely ignores it.

As for Material it's still in Beta but I believe sometime after Universal moving to Core it'll work better with Universal, it doesn't currently without rather heavy workarounds. You can track the issue over in material here : angular/components#308

[zmnv]

@MarkPieszak I'm agree with you about jQuery, but where is an analog?

I don't see (for example) image slider, for angular 2 universal, also thouthends of plugins. There are modules for angular 2, but in now time a lot of that modules doesn't work with universal (?) like Material. I just dont know, which of it works correctly and dont want to spent time for fixes.

Maybe we don't want to use jQuery, but we have to.

All hopes for a new version of Angular with Universal in Core.