question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Angular routing and svgPath

See original GitHub issue

Issue Description

Hi, I am trying to run trumbowyg within angularjs app and I found issue that makes it unusable.

This is code from trumbowyg.js that do that: t.svgPath = !!t.doc.querySelector('base') ? window.location.href.split('#')[0] : '';

angularjs html5Mode requires base tag so window.location is used for svgPath, but it is not accurate as angulajs has its own $location. It brakes loading svg icons.

What is the purpose of this statement? Iframe? Thank you

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
LosDcommented, Dec 28, 2017

This probably won’t fix anything for you, since you seem to refer to the old AngularJS (1), while this is for Angular (2+), but since others might run into it, here’s what I did for Angular (with Angular CLI): To get the script working in the first place, it needs to go into .angular-cli.json script section, along with JQuery and plugins:

      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/trumbowyg/dist/trumbowyg.min.js",
        "../node_modules/trumbowyg/dist/plugins/pasteimage/trumbowyg.pasteimage.min.js"
      ],

To get the CSS to a known directory, you need to make sure that the CLI packages it into the app, on a known location, using the assets section (assets and favicon.ico are there by defaults. I left them in for context):

      "assets": [
        "assets",
        "favicon.ico",
        {
          "glob": "icons.svg",
          "input": "../node_modules/trumbowyg/dist/ui",
          "output": "./dist/"
        }
      ],

(One could probably get away with just copying it to assets, but I preferred leaving it in place)

Then, in main.ts, set the trumbowyg svgPath: $.trumbowyg.svgPath = 'dist/icons.svg';

Optional: This doesn’t really work for me, since I have a weird issue where stuff breaks when using JQuery typings with AOT, so I had to go back to any for jQuery plugins, but I made a TypeScript Typings file for Trumbowyg that I believe is reasonably correct: https://gist.github.com/LosD/7d8b7d0c77be2cb92f4b309f1a3353b8

@Alex-D If you know anything about TypeScript, I’d love a review of the typings for correctness, then I can submit them to DefinitelyTyped, so TypeScript users has the typed API (one thing I know I should probably fix, is that only the JQuery interface is in the public namespace).

1reaction
Alex-Dcommented, Dec 22, 2017

OK, sorry, I understand the problem, but you were unclear.

Did you think that can do the job:

t.svgPath = options.svgBasePath || !!t.doc.querySelector('base') ? window.location.href.split('#')[0] : '';

svgBasePath should be your base path.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use routerLink inside SVG path? - Stack Overflow
A way I found to do this is by adding a data attribute to the svg and dynamically assign the onclick event in...
Read more >
SVG as templates - Angular
You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to...
Read more >
How to create a route finder on an SVG map - Gearheart
So, drawPath is pretty straightforward: we create svg path element and set its attributes with the values passed in options argument. What is ......
Read more >
Angular Animate Svg Path (forked) - StackBlitz
A angular-cli project based on rxjs, tslib, core-js, zone.js, @angular/core, @angular/forms, @angular/common, @angular/router, @angular/compiler, ...
Read more >
[Solved]-Angular SVG Path Not Visible-angular.js
Related Query · Angular SVG Path Not Visible · Angular 6 route path not working for direct url when deployed in subdirectory ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found