2

I'm trying to integrate fineuploader library inside Angular 4. I was referring to https://stackoverflow.com/a/44067445/4261569. My question is too wide to comment there and it looks like the answer is for Angular 2. There is lot of things that has been changed since Angular released it's 4th version.

Moving back to my question: Fineuploader uses

<script type="text/template" id="qq-template">Template code goes here..</script>

However, if I try to include it in my uploader.component.html file. It just stips of the script tag. When I researched more on it, I found that, it's default behaviour of angular apps. It strips of all script tag in component.

Is there any alternate way of integrating fineuploader inside angular? I really need to use that library as it is the only thing which is supported in IE9 and provides direct S3 upload feature.

Edit Question is not about integrating third party libraries in angular. It's about having inside mycomponent.component.html file. I know for security reasons angular is striping the script tags but using script tag for displaying template is something needed by third party libraries like fineuploader.

Sahil Purav
  • 1,324
  • 4
  • 19
  • 32
  • Possible duplicate of [angular 2 - adding 3rd party libs](https://stackoverflow.com/questions/35796961/angular-2-adding-3rd-party-libs) – jonrsharpe May 29 '17 at 12:07
  • You'll need to be more specific about how you're bundling your app and what's going wrong for a more specific answer. You will need to move any script elements to the index HTML, but may be able to avoid them altogether. – jonrsharpe May 29 '17 at 12:11
  • @jonrsharpe Not duplicate... Because, I was able to integrate the 3rd party libs. The problem is Angular strips – Sahil Purav Jun 01 '17 at 10:08
  • Then please [edit] to provide enough context to answer. The below answer will work if you're using the Angular CLI, but that's not clear from the question. Whatever bundles your app should be able to include scripts, or you can put them in the index HTML, etc., but without context nobody can tell. – jonrsharpe Jun 01 '17 at 10:10
  • Fine Uploader does _not_ need to use script tags for templates. – Ray Nicholus Jun 07 '17 at 00:56
  • @RayNicholus https://docs.fineuploader.com/quickstart/01-getting-started.html scroll down and check for templates – Sahil Purav Jun 07 '17 at 06:51
  • 1
    Nowhere does it say a script tag is required. I suggest you read the actual templates feature page https://docs.fineuploader.com/branch/master/features/styling.html – Ray Nicholus Jun 07 '17 at 11:58
  • That's correct. I just replaced script tags with normal div tags and it started working! – Sahil Purav Jul 08 '17 at 11:39

2 Answers2

2

install fine uploader npm package 

 npm install fine-uploader

add loader.js to your assets folder then in your angular-cli.json

"scripts": ["./node_modules/fine-uploader/fine-uploader/fine-uploader.min.js"]

then add this to your typings.d.ts

 declare var fineuploader:any;

and you should be able to use it in your components

Hamed Baatour
  • 6,664
  • 3
  • 35
  • 47
0

Solution is just to replace to . Although, I wasn't able to find the solution to keep script tag inside component but for fineuploader, replacing the element did the trick for me.

Sahil Purav
  • 1,324
  • 4
  • 19
  • 32
  • This should not accept as an answer. See @Hamed solution below. That should be the standard way to include some third-party library. – Manzurul Mar 15 '19 at 21:15
  • Just so no one is confused here, the question is not about including a third party library. This is is the correct answer. Instead of using a script tag, use a `
    ` or anything else you want.
     – mcheah Nov 20 '19 at 20:17