The problem is that I'm not being able to do this:
<script src="./app/node_modules/tone/build/Tone.js"></script>
<script>
var synth = new Tone.Synth();
</script>
I get this in the console output:
chromium: [INFO:CONSOLE(50)] "Uncaught ReferenceError: Tone is not defined"
Any help will be greatly appreciated.
What could be wrong here:
WebView would not understand that path at all.
node_modules folder won't be available after compilation.
So what you could do
Place your JS file within the same folder where you have your HTML, so you can use relative path.
If you use Webpack make sure the configuration is updated to include those HTML and JS files during build.
Related
I downloaded a custom build for CKEditor open source from the website and followed the documentation to set it up. I put the following in my header.html file which is included in EVERY file:
<script src="./includes/ckeditor/ckeditor.js"></script>
<script>
window.onload = function() {
CKEDITOR.replaceAll();
};
</script>
I was under the impression that this would load the script and then replace all <textarea> fields in forms with the editor but i'm just getting basic editors as default with textarea's. Any idea? All files were uploaded to the root/includes/ckeditor directory when unzipped.
Turns out it was an apache permissions issue. Problem solved.
I am wondering if it is possible to add .scss file in my component in Angular 2?
Let's say I have the following:
#View({
template: `
<div class="button" [ng-class]="{active: isOn, disabled: isDisabled}"
(click)="toggle(!isOn)">
Click me!
</div>`,
styleUrl: ['style.scss'],
directives: [NgClass]
})
Is compiling the scss file to css the only way to achive what I am trying to do?
Thanks
It is possible, but you need to make server able to support this type of files, e.g. compile them on the fly during request, or maybe take precompiled CSS files from cache. In any case, the response when you navigate to
GET /approot/component/path/style.scss
needs to be valid text/css type. By default no webserver is going to do it. It is totally possible with Express, Apache, etc. but it requires configuration.
Another option is to use styles instead of styleUrls and require SCSS with bundlers like webpack:
styles: [require('style.scss')]
Above should work, but the notation is not that nice.
Finally, I would probably go with
styleUrls: ['style.css']
... and use SCSS for development, making sure my watch/build task compiles scss->css and puts style.css just next to style.scss in the same directory (on in the dist, wherever it needs to be). So you work with SCSS and never touch generated CSS, which is there only to be consumed by app.
styleUrls for now must be only css files list, so you need to provide the name of .css file to apply for components, so simple to think about provide the name of compiled .css file from .scss file, I found very helpful link to make that and with very well explained example:
http://www.angulartypescript.com/angular-2-sass/
This even should work in long term, hopefully the angular 2 somehow support the .scss and internally compile it.
I recomend adding scss files through import:
import 'style-loader!./your-scss-file-name.scss';
make sure the file url is correct.
I am using Typescript SDK 0.9.1.1 and WebStorm 7. I have a .ts file with a file watcher transpiling its .js and sourcemap files. I also have an HTML file that looks like this...
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="output">5</p>
<script src="HelloWorld.js"></script>
<script>
var u = new Utils();
document.getElementById('output').innerHTML = u.plusOne(5);
</script>
</body>
</html>
The plusOne function simply takes the number (in this case, 5) and returns that number plus one. My page, javascript and Typescript work fine, because the page says "6" when loaded.
I can set breakpoints in the .js file and they are hit (showing me the Typescript file's equivalent line) but if I set breakpoints in the original .ts file they are not. I've searched for this issue but my problem seems different from others' - I am running locally (not remotely) and I am setting the breakpoints in WebStorm, not Chrome's debug view.
In WebStorm, the Scripts tab shows only the .js and .html files. Should I be seeing more here? If that's the problem, how do I fix it? I've opened the debug configuration but I don't see a way to add the .ts file there.
To those of you that got here via Google:
All I had to do was make sure that sourceMap was set to true in my tsConfig.json like so:
{
...
"compilerOptions": {
...
"sourceMap": true,
...
},
...
}
Turns out this is due to an open bug in WebStorm. In practical terms, the workaround is to reload the HTML page from the browser (which is NOT the same as rerunning the HTML page in debug mode from WebStorm). If you do that then the breakpoints in the .ts file will be hit.
i have the following folder structure
application
assets\
\css
\js
\images
i have all the bootstrap files in the assets folder - css files in the css folder, js files in js folder etc.
My question is this. I have a view that uses the bootstrap.css. I reference it by doing something like:
<script type="text/javascript" scr=<?php base_url()?>assets/css/bootstrap.css> </script>
it find the file just fine. but when i try to use the built in images in bootstrap, they don't display because the bootstrap css is expecting the images to be in
"../img/glyphicons-halfing.png"
But the physical path of the view is something like:
c:\wamp\www\myapp\views\templates\
I guess I could just copy the image folder into the views folder... or i can edit the css to point to the right location. But i just wanted to check to see how others are organizing their folders using codeigniter and bootstrap.
thanks.
It's looking in 'img' - You need to amend it to 'images'
"../images/glyphicons-halfing.png"
Glyphicons goes inside the "assets\font" folder.
Just in case, I'm using CodeIgniter 3.x and Xampp 5.6.x on xubuntu.
assets\
\css\
\js\
\images\
\fonts\
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.woff2
I'm having trouble figuring out why when I create a new MVC 3 application the jQuery intellisence is not working until I alter the script tag in my _Layout page. According to a tutorial I watched, as long as I placed the vsdoc file in my scripts folder, I should have jQuery intellisense but that is not the case, at least thats not happening for me. After creating a new project, here is what the script tag looks like in my _Layout.cshtml page:
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
I have included the vsdoc file in my Scripts folder but I do not have jQuery intellisense. If I do a view sorce on the page here is what I see:
<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
It doesn't look as if the path is correctly resolved.
So I then delete this tag and replace it by dragging and dropping the file to the page and end up with this:
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
Now I get jQuery intellisense. So why do I have to make these changes befeore I get intellisense? Is this something that others have experienced or am I possibly doing something wrong? It seems like the #Url.Content functionality is broke and leads me to wonder if maybe I will have problems with it for other uses like placing images on a form.
As far as I am aware, your vsdoc.js script cannot just exist in the scripts folder. It has to be referenced in every view that will use it.
You should reference it like this:
#if (false) {
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
Note: Check the version of the file that you reference is correct.
The if statement will prevent the browser from actually downloading the file.