I'm working on Angular-CLI based project.
I need to include OpenLayers3 into my project using systemjs.
When I setup systemjs on my project for including Openlayers javascript file I had error ReferenceError: ol is not defined.
This is my system-config.ts file
const map: any = {
'ol': 'vendor/openlayers/dist/ol.js'
};
/** User packages configuration. */
const packages: any = {
'tether': {
defaultExtension: 'js',
},
'vendor/ng2-slimscroll': {
defaultExtension: 'js',
},
'ol': {
defaultExtension: 'js'
}
};
This error happens, but I still find that ol.js file has been called in my browser network debugger.
Also, this error gone when I define ol.js using regular <script> tag in head of my index page.
Related
I have an ASP.NET MVC application that is using Angular 4. In my layout I have a base tag that looks like this:
<base href="/src/">
I am setting everything up and I just added Angular Routing. Now right after my base component loads my URL is appended with 'src'.
Here is my routes file:
import { Routes } from '#angular/router';
import { HomeComponent } from './Components/Home/home.component';
export const AppRouting: Routes = [
{ path: '', component: HomeComponent }
];
I did not see this prior to adding the routing.
The key purpose of the base tag is for routing. This is from the docs:
Most routing applications should add a element to the
index.html as the first child in the tag to tell the router how
to compose navigation URLs.
If the app folder is the application root, as it is for the sample
application, set the href value exactly as shown here.
https://angular.io/guide/router#base-href
At development time, it is most often set to "/" so the routes will run from root. At deployment, you change it to the folder on the server containing your application.
I was able to fix this. For reference, my app folder is under a src directory, not in the root of my project. Here is what I did.
Change the base tag to:
<base href="/">
Update my main.js call from:
<script>
System.import('main.js').catch(function (err) { console.error(err); });
</script>
to:
<script>
System.import('src/main.js').catch(function (err) { console.error(err); });
</script>
Then in my systemjs.config.js I had to change these lines:
map: {
//app is within the app folder
'app': 'app',
to:
map: {
//app is within the app folder
'app': 'src/app',
and I also had to change:
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
to:
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'src/systemjs-angular-loader.js'
}
}
},
Here is my Razor page code:
#using System.Web.Optimization;
#{ BundleTable.Bundles.Add(
new ScriptBundle("~/Scripts/Vuejs")
.Include("~/Static/Scripts/Vuejs/vue.min.js")); }
#section Scripts {
#Scripts.Render("~/Static/vue/assets/bundle.js")
#Scripts.Render("~/Scripts/Vuejs")
}
<div id="app_container">
{{text}}
</div>
and here is the entry of the webpack javascript:
import Vue from 'vue';
const v = new Vue({
el: '#app_container',
data: { text: 'abcdefg' }
});
Webpack config:
export default {
entry: [
'babel-polyfill',
'./src/index.js'
],
output: {
filename: 'bundle.js',
path: 'C:/WebSandbox/Static/vue/assets',
publicPath: '/vue/assets/'
},
devtool: 'source-map',
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.json$/, loader: 'json' },
{ test: /\.txt/, loader: 'raw' }
]
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
APP_ENV: JSON.stringify('browser')
}
})
]
};
All the javascript files are in place and when open the page I can see the mapped code from Developer Tools of Chrome. And if I make a break point in the javascript code, it will be hit.
But the text displayed is "{{text}}", not "abcdefg".
If I added following code after the div:
<script>
const v = new Vue({ el: "#app_container", data: { text: "abcdefg" } });
</script>
or add following code and remove the javascript file from #section Scripts part
<script src='~/Static/vue/assets/bundle.js'></script>
It works.
So how can I make my webpack bundle work with the #Scripts.Render in Razor page?
OK, now I found why the bundle not working:
Because the #RenderSection("Scripts", false) was written in the header of _Layout.cshtml. So the bundle JavaScript file will be referenced in the header. But when I switch to the raw reference (script tag), it will be after my div tag where it should be.
When I change the bundle part to:
#section ScriptBlock {
#Scripts.Render("~/Static/vue/assets/bundle.js")
}
It works.
The #RenderSection("ScriptBlock", false) was written in the bottom of the _Layout.cshtml right after the closing tag of body.
I use vuejs with asp.net with browserify rather than webpack.
And the packing should be an independent build step.
I setup a gulp task to take my vue code and bundle it up and place it in the scripts folder of asp.net.
I think you need to do something similar here.
I try to use Electon's webview tag inside my Angular2 app, but when I add the src attribute binded to an Angular2 variable, the following error occurs:
Can't bind to 'src' since it isn't a known native property
This is the index.html:
<head>
<!-- cut out stylings, metatags, etc. -->
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
const electron = require('electron');
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<MainComponent>Loading...</MainComponent>
</body>
This is the systemjs.config.js:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'angular',
'#angular': '../node_modules/#angular',
'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api',
'rxjs': '../node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
This is the Angular2 component template I (want to) use webview in:
<div class="stage-component component">
<webview *ngIf="iFrameUrl" src="{{iFrameUrl}}"></webview>
</div>
How can I introduce the webview element to Angular2?
If this appears, use "attr" before.
<webview *ngIf="iFrameUrl" attr.src="{{iFrameUrl}}"></webview>
That is strange. It sounds like you maybe have a version issue. You can try to use the loadUrl api instead and see if that helps.
<script>
onload = () => {
const webview = document.getElementById('foo');
webview.loadUrl('http://example.com')
</script>
I am using Almond and the r.js optimizer to combine all my scripts in a single file for a Backbone.js-based Single Page Application.
My build file:
({
name: '../bower_components/almond/almond',
include: ['main'],
insertRequire: ['main'],
baseUrl: 'src',
optimize: 'uglify2',
mainConfigFile: 'src/main.js',
out: 'javascripts/scripts.js',
preserveLicenseComments: false,
paths: {
jquery: '../bower_components/jquery/dist/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone',
kineticjs: '../bower_components/kineticjs/kineticjs',
'jquery-ui': '../bower_components/jquery-ui/ui',
'jquery.layout': '../bower_components/jquery.layout/dist/jquery.layout-latest'
},
shim: {
'jquery.layout': {
deps: [
'jquery-ui/core',
'jquery-ui/draggable',
'jquery-ui/effect',
'jquery-ui/effect-slide'
],
exports: 'jQuery.fn.layout'
}
}
})
In my Backbone view I initialize the jquery-layout plugin:
define(['backbone', 'underscore', 'jquery.layout'], function(Backbone, _) {
'use strict'
return Backbone.View.extend({
el: $('#application'),
initialize: function() {
this.$el.layout({
west: {
size: '50%',
closable: false,
slidable: false,
resizable: true
}
});
}
});
});
The panes show up correctly, however I cannot resize any of them. I found that $.fn.draggable (JQuery UI Draggable widget) is not being initialized at the time when the jquery-layout plugin is declared.
This indicates that probably the widget is not being loaded. So I checked the combined source file and noticed that the JQuery UI Draggable widget code appears before the jquery-layout plugin code, which means the dependencies are inserted in the correct order. Printing $.fn.draggable in the Firebug console also shows that the widget is available, at least after the document is ready.
jQuery, underscore, backbone, jQuery UI are all AMD modules. jquery-layout has no AMD compatibility, hence the shim config. It depends on JQuery UI's ui.core and ui.draggable per their docs.
For all of this to not sound too abstract, here is a demo of the jquery-layout plugin.
I have "wasted" over 8 hours trying to figure this out in vain, any help on how to fix this would save my day. Most probably this would involve only some fix of my shim config in the build file.
I solved the problem by making the non AMD-aware jquery-layout plugin AMD-compatible. I used the onBuildWrite hook of the r.js optimizer in the build file. This way the jQuery UI dependency ui.draggable is initialized before the code of the non AMD-aware plugin loads:
({
name: '../bower_components/almond/almond',
include: ['main'],
insertRequire: ['main'],
baseUrl: 'src',
optimize: 'uglify2',
mainConfigFile: 'src/main.js',
out: 'javascripts/scripts.js',
preserveLicenseComments: false,
paths: {
jquery: '../bower_components/jquery/dist/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone',
kineticjs: '../bower_components/kineticjs/kineticjs',
'jquery-ui': '../bower_components/jquery-ui/ui',
'jquery.layout': '../bower_components/jquery.layout/dist/jquery.layout-latest'
},
shim: {
'jquery.layout': {
deps: ['jquery', 'jquery-ui/draggable', 'jquery-ui/effect', 'jquery-ui/effect-slide'],
exports: 'jQuery.fn.layout'
}
},
onBuildWrite: function(moduleName, path, contents) {
if (moduleName == 'jquery.layout') {
contents = "define('jquery.layout', ['jquery', 'jquery-ui/draggable', 'jquery-ui/effect', 'jquery-ui/effect-slide'], function(jQuery) {" + contents + "});";
}
return contents;
}
})
Following the answer from #Genti and using latest jquery-ui, following shim worked for me.
shim: {
'jquery.layout': {
deps: ['jquery', 'jquery-ui/core', 'jquery-ui/widgets/draggable', 'jquery-ui/effect', 'jquery-ui/effects/effect-slide', 'jquery-ui/effects/effect-drop', 'jquery-ui/effects/effect-scale'],
exports: 'jQuery.fn.layout'
}
}
I am building an AngularJS application using RequireJs, AngularUI and jQuery UI.
I occasionally get the following error when using the slider:
TypeError: Object [object Object] has no method 'slider'
at init (http://example.com/Assets/js/lib/angular-ui/slider.js?v=635137928871837150:18:29)
at ngModel.$render (http://example.com/Assets/js/lib/angular-ui/slider.js?v=635137928871837150:55:25)
at Object. (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:140:131)
at Object.e.$digest (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:86:286)
at Object.e.$apply (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:88:506)
at e (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:95:38)
at p (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:98:123)
at XMLHttpRequest.t.onreadystatechange (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:99:259)
angular.min.js?v=635137928871837150:62
(anonymous function) angular.min.js?v=635137928871837150:62
(anonymous function) angular.min.js?v=635137928871837150:52
e.$digest angular.min.js?v=635137928871837150:87
e.$apply angular.min.js?v=635137928871837150:88
e angular.min.js?v=635137928871837150:95
p angular.min.js?v=635137928871837150:98
t.onreadystatechange angular.min.js?v=635137928871837150:99
If I refresh the page the error goes away and it only happens occasionally anyway.
I am using:
Require version 2.1.8.js
Current version of Angular Ui Slider (https://github.com/angular-ui/ui-slider/blob/master/src/slider.js)
The relevant parts of my Require Config are:
require.config({
shim: {
jqueryui: {
deps: ['jquery']
},
'angular': { 'exports': 'angular' },
angularResource: { deps: ['angular'] },
angularMocks: { deps: ['angular'] },
angularSortable: { deps: ['angular', 'jquery', 'jqueryui'] },
angularSlider: { deps: ['angular', 'jquery', 'jqueryui'] }
},
paths: {
angular: '/Assets/js/lib/angular-1.0.7/angular.min',
angularResource: '/Assets/js/lib/angular-1.0.7/angular-resource.min',
angularMocks: '/Assets/js/lib/angular-1.0.7/angular-mocks',
angularSortable: '/Assets/js/lib/angular-ui/sortable',
angularSlider: '/Assets/js/lib/angular-ui/slider',
jquery: '/Assets/js/lib/jquery-1.9.1.min',
jqueryui: '/Assets/js/lib/jquery-ui-1.10.0'
}
});
I am bootstrapping my application like so:
require(['require', 'jquery', 'jqueryui', 'angular', 'angularResource', 'angularSortable', 'angularSlider'],
function (require, $, jqueryui, angular) {
'use strict';
var contentApp = angular.module('testApp', ['ngResource', 'ui.sortable', 'ui.slider']);
require(['TestController'],
function () {
$(document).ready(function () {
var $angularRootElement = $('#wrapper');
angular.bootstrap($angularRootElement, [contentApp['name']]);
$angularRootElement.addClass('ng-app');
});
});
}
);
I presume the problem is that occasionally jQuery UI hasn't loaded before the Angular UI slider code runs. Although, I can see in the network tab in Chrome that jQuery UI was downloaded before the slider.
Can anyone give me some ideas on how to debug this?
Thanks