Angular routing and svgPath

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

[LosD]

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).

[Alex-D]

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.