PDF Viewer for Ionic 2: cannot import or require - javascript

I am trying to build a PDF viewing component for an Ionic 2 app. I have lots of experience of Angular 2, but not of Ionic.
The component will be built using pdf.js and have created the pdf.js asset to be included in my project as described on the github page. However, trying to require this fails — require is not defined —, so I copied the script to the asset folder and tried importing it. It seems the file is not being copied to the build so that fails too.
Anyone have any pointers for requiring or importing a non-weboack non-SystemJS script into an Ionic 2 app?

Create a js folder (or something like this) in the www folder; include the files needed and reference them from there. This folder is not emptied on build.
EDIT
The root of the www folder does not change and you can reference it as someting like ... 'js/need-this.js'.
There should have some references in your index.html file to the build folder and maybe the assets folder (icon); this concept of using a js folder works the same. Only build and assets will change.

I feel that I should point out that you shouldn't copy anything into www since this is autogenerated and any changes will be overwritten. You should copy into assets instead.

Related

Import JS file inside node_modules in Angular

I have an angular app, to this I am trying to add an npm package called svgedit. It gets installed. But when I try to reference a java-script file it says
net::ERR_ABORTED 404 (Not Found)
This is how I am trying to reference it in my index.html in the head section,
<script type="module" src="node_modules/svgedit/svgedit-config-es.js"></script>
I can access this file from within vs code by clicking "ctrl + left mouse". It opens the file properly meaning the reference is proper. But when it runs it gives the above mentioned error in the console. I have also tried switching the type attribute to "text/javascript".
Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.
ng serve will only serve compiled files from your src directory and what''s in the assets folder. It will not serve node_module files directly.
The usual way to add scripts it to add it to the scripts section in angular.json
scripts:
[ //other scripts
"node_modules/svgedit/svgedit-config-es.js"
]
Is your html page in the root directory of your project? if not make sure to navigate to the file correctly. if the html page in the root directory of your project then there must be a typo in the src
Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.
The right way to go about it is to use a bundler like webpack, rollup etc...

Including source files in Cordova project from outside the project's directory hierarchy

tl;dr: I want to include some JavaScript files from another project in another directory into a Cordova project, without (manually) copying those files into my Cordova project directory tree. How?
I am editing an existing Cordova project that makes use of some JavaScript source files originally written for a large web application project.
Currently, I am adding these source files by copying them to a subdirectory of the Cordova project, and by adding a <script> tag with the relative path to an index.html file in the Cordova project. This causes the JavaScript files to integrated in the deployed app, apparently by virtue of Cordova's (or Ionic's?) magic.
Now, it would be preferrable for me to avoid copying the JavaScript files to my Cordova project directory. Instead, I would like to directly link to the files in their original location rather than copying them (so updates from the web application get automatically applied to the Cordova project, as well).
As both the Cordova project and the large web application reside in the same VCS repository, the relative path to the files will always be the same - for the sake of an example, like this:
|-repository/
|-web/
| |-src/
| |-myCode.js
|-cordova
|-src
|-index.html
|-helpers
|-myCode.js // copy of /repository/web/src/myCode.js
Therefore, I have tried setting the relative path in the aforementioned index.html file - but unfortunately, Cordova seems to take over that file verbatim, and thus, the resulting URL will not exist (prompting a 404 error in the console, and causing the code from the file to be unavailable).
How can I have Cordova include and reference files from outside the directory hierarchy of a Cordova project?
Is there maybe at least a way to have Ionic or Cordova automatically copy the files into the Cordova project directory upon building the app?

Can't get gh-pages to work with Angular project

I am working on an Angular project and wanted to host the project through GitHub with gh-pages.
Since the index.html file was not in the root directory, I created an empty branch off of my master and called it gh-pages. I then copied my files into the new branch, so that the index.html file was in the root directory.
I am also using Grunt, so I copied the grunt generated app.js file into the root directory as well. I can now see the project in the browser if I go to http://kelseysteele.github.io/votm3/#/home, however the navigation bar is missing and the other pages, like http://kelseysteele.github.io/votm3/#/overview, are not working properly.
I've been stuck on this for a few days and would really appreciate any assistance with this.
Check your console, you'll see errors: GET http://kelseysteele.github.io/data/overview-data.json 404 (Not Found)
Fix the url here: https://github.com/KelseySteele/votm3/blob/master/src/votm3/Scripts/controllers/overview-controller.js#L10
Because you are using grunt, you will want to build the project before serving the files. This will make the files and code modules build properly before serving the index.html. A popular module you can use is https://github.com/tschaub/grunt-gh-pages an get your builds serving properly.

how to include net web site source files in Visual Studio project

i have downloaded a foreign web solution from my clients httpdoc folder.
Now i need to edit them in Visual Studio 2013/2015 but i dont know how to integrate them.
their htdocs files and folders;
global.asax
package.config
web.config
gruntfile.js bower.json
package.json
./app/components/account/
logincontroller.html
login.js
register.html
registercontroller.js *and some more......)
./app/components/home/
indexcontroller
index.js
and some more......)
./app/components/shared/
headercontroller.js
header.html
more file like this......)
./app/components/
... and more folders
./app/services/
ajaxService.js
services.js and
..a lot more .js files)
./app/vendors/
angular, bootstrap, jquery stuff)
./bin/
EntityFramework.dll
System.web.razor.dll
...and more dll's
For me this looks MVC like, but with a folder structure i do not understand
However, i need to edit, debug and run the sources in VS and i have no idea how to include it. Do i need to create a simple project (type?) and copy and paste or how would this work.
Can you please advice me?
I am not sure if I understand your question but I am guessing you have an ASP.NET MVC project using AngularjS. Right click the path from your existing project on Solution Explorer and add existing files.
Warning: You might need to include dll files as well.
I agree with mason. Probably should just add the files to an existing project.
Looks like an Angular SPA. May have no .Net aspect to it (i.e. VS just used as an editor). Just copy the files into a new VS project. If it has compiled code associated with it, it will be hard to reproduce the .Net code.

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?
Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.

Categories