How to call a named module from a bundle - ecmascript-6

I have a project with ASP.NET 5 and TypeScript. basically this is my wwwroot folder
-wwwroot
|-app
||-person.js
||-employee.js
||-init.js
|-js
||-libraries.js // Contains: systemjs, ...etc
||-app.bundle.js
person.js is an es6 module which exports class Person.
employee.js imports person.js and exports class Employee.
init.js just imports employee.js, creates a new Employee object and console his name.
//init.js
import { Employee } from "./employee";
var p = new Employee();
console.log(p.name);
Now I bundled the three files into app.bundle.js which is located in the js folder using systemjs-builder which produced three named System.register calls:
System.register("wwwroot/app/person.js",...
System.register("wwwroot/app/employee.js",...
System.register("wwwroot/app/init.js"...
In my index.cshtml view file I have these script tags:
<script type="text/javascript" src="./js/libraries.js"></script>
<!-- 2. Configure SystemJS -->
<script type="text/javascript">
System.config({
packages: {
js: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('js/app.bundle')
.then(null, console.error.bind(console));
</script>
apparently since I have named modules, whatever is in the init.js is not being called.
So my question is, how can I call a named System.register call ?
Note: I am new to es6 modules, so this is a test project to get the idea right.

From this wiki page, I solved my problem with this:
<script type="text/javascript">
System.config({
bundles: {
'app.bundle.js': ['wwwroot/app/init']
},
packages: {
wwwroot: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('wwwroot/app/init')
.then(null, console.error.bind(console));
</script>
To explain:
The bundle extension will automatically download a bundle as soon as an attempt to import any module in that bundle is made.
So all I need to do is to tell systemjs to register the init module to my bundle and it will download the bundle and execute whatever is in the init module.

Related

How to add popper.js in an oracle JET project

I am trying to include bootstrap in my OJET project where I use ojet v6 library.
I got an error saying ojmodule failed due to "popper is required".
What I have Tried
I have added the popper.js in lib folder.
I have included the lib in main.js file inside require.js configPath array.
requirejs.config({
// Path mappings for the logical module names
paths:
//injector:mainReleasePaths
{
'popper' : 'libs/popper/popper.min' ,
'bootstrap' : 'libs/bootstrap4/js/bootstrap.min',
//other libs goes here
Added the "popper" reference in shim object of main.js
shim: {
'jquery': {
exports: ['jQuery', '$']
},
'Popper' : {
exports : ['Popper', 'popper']
}
}
added the popper reference in an ojet module. by
define(['ojs/ojcore', 'knockout', 'appController','popper','bootstrap'],
function (oj, ko, app, popper,bootstrap) {
Still get an error failed to load ojet module "popper is needed by require.js". Please help or suggest any edit.
Bootstrap 4 uses popper.js and jquery as its dependency. It should be loaded before bootstrap. As I can see you have added in shim and assuming that the path provided in the require.config is correct It should work;
If it is not working you can have a workaround like instead of adding the dependency separately to the project add the bootstrap bundle directly.
requirejs.config({
// Path mappings for the logical module names
paths:
//injector:mainReleasePaths
{
'jquery': 'libs/jquery/jquery-3.3.1',
'bootstrap' : 'libs/bootstrap4/js/bootstrap.bundle.min',
Note the bootstrap.bundle.min.js contains popper but not jquery. So you need to load jquery before bootstrap.
I tried to include underscore.js and followed below steps:
npm i underscore.js, we can install any module because it runs on node
modify path_mapping.json:
"underscore": {
"cdn": "3rdparty",
"cwd": "node_modules/underscore",
"debug": {
"src": "underscore.js",
"path": "libs/underscore/underscore.js",
"cdnPath": "underscore/underscore.1.0"
},
"release": {
"src": "underscore.min.js",
"path": "libs/underscore/underscore.min.js",
"cdnPath": "underscore/underscore.1.0"
}
}
modify main.js
'underscore': 'libs/underscore',
use in viewModels:
define([
"require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojconverterutils-i18n", "ojs/ojarraydataprovider", "ojs/ojcolor", "ojs/ojconverter-datetime", "underscore","ojs/ojknockout", "ojs/ojbutton", "ojs/ojinputtext", "ojs/ojcollapsible", "ojs/ojinputnumber", "ojs/ojradioset", "ojs/ojcheckboxset", "ojs/ojselectcombobox", "ojs/ojselectsingle", "ojs/ojdatetimepicker", "ojs/ojswitch", "ojs/ojslider", "ojs/ojcolorspectrum", "ojs/ojcolorpalette", "ojs/ojlabel", "ojs/ojformlayout", "ojs/ojlabelvalue","ojs/ojaccordion","ojs/ojactioncard"
],
function (require, exports, ko, Bootstrap, ojconverterutils_i18n_1, ArrayDataProvider, Color, ojconverter_datetime_1,_) {
function EmployeesViewModel() {
_.each([1, 2, 3], console.log);
var self=this;
self.logMsg = ko.observable("none");
self.actionHandler = (event) => {
this.logMsg("Action handler invoked - " + event.currentTarget.id);
};
}
return EmployeesViewModel;
});
instead of adding bootstrap.min.js add bootstrap.bundle.min.js to your require path.

application can't find a .js file

I have a Play application. The UI of the application is in Angular. I have created a folder ui which is the top level Angular directory.
build.sbt
`ui-dev-build` := {
implicit val UIroot = baseDirectory.value / "ui"
if (runDevBuild != Success) throw new Exception("Oops! UI Build crashed.")
}
def runDevBuild(implicit dir: File): Int = ifUiInstalled(runScript("npm run build"))
package.json
"build": "ng build --output-path ../public/ui",
When the Angular application is build, I transfer the output to the public folder of the Play framework. From there, Play transfers the contacts of the public folder to target folder for deployment. In the index.html (homepage html file), I access angular by including the scripts created in Angular build.
<script src="#routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
This works fine.
I want to use ng-ace2-editor in my application - https://github.com/fxmontigny/ng2-ace-editor. I have added it in package.json - "ng2-ace-editor": "0.3.9" and I can see that ng2-ace-editor directory is present in node_modules.
When I run the application, I get error
GET http://localhost:9000/mode-html.js net::ERR_ABORTED 404 (Not Found)
exports.loadScript # index.js:3802
exports.loadModule # index.js:4174
setMode # index.js:10152
push../node_modules/ng2-ace-editor/src/component.js.AceEditorComponent.setMode
I can't understand how to make my application find mode-html.js. The file is present at location "./node_modules/ace-builds/src-min/mode-html.js. I have added this path in "script":[] of package.json but I still get the error.
"scripts":[
"./node_modules/ace-builds/src-min/ace.js",
"./node_modules/ace-builds/src-min/theme-eclipse.js",
"./node_modules/ace-builds/src-min/mode-html.js"
]
Interestingly, things work if I include ace.js in the homepage file
<script src="#routes.Assets.versioned("ui/runtime.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/vendor.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/styles.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/main.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("ui/scripts.js")" type="text/javascript"></script>
<script src="#routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script> <!-- this makes things work-->
So I know that issue is that my mode-html.js file is not getting served and most likely it is the path resolution issue but I can't figure out what is it.
Further analysis shows that the following code in ace.js causes the error.
exports.loadModule = function(moduleName, onLoad) {
var module, moduleType;
if (Array.isArray(moduleName)) {
moduleType = moduleName[0];
moduleName = moduleName[1];
}
try {
module = require(moduleName);
} catch (e) {}
if (module && !exports.$loading[moduleName])
return onLoad && onLoad(module);
if (!exports.$loading[moduleName])
exports.$loading[moduleName] = [];
exports.$loading[moduleName].push(onLoad);
if (exports.$loading[moduleName].length > 1)
return;
var afterLoad = function() {
require([moduleName], function(module) {
exports._emit("load.module", {name: moduleName, module: module});
var listeners = exports.$loading[moduleName];
exports.$loading[moduleName] = null;
listeners.forEach(function(onLoad) {
onLoad && onLoad(module);
});
});
};
if (!exports.get("packaged"))
return afterLoad();
net.loadScript(exports.moduleUrl(moduleName, moduleType), afterLoad);
reportErrorIfPathIsNotConfigured();
};
var reportErrorIfPathIsNotConfigured = function() {
if (
!options.basePath && !options.workerPath
&& !options.modePath && !options.themePath
&& !Object.keys(options.$moduleUrls).length
) {
console.error(
"Unable to infer path to ace from script src,",
"use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes",
"or with webpack use ace/webpack-resolver"
);
reportErrorIfPathIsNotConfigured = function() {};
}
};
Why does explicitly calling <script src="#routes.Assets.versioned("javascripts/common/vendor/ace/src-min/ace.js")" type="text/javascript"></script> make the code work. Should this script be already available in ui/scripts.js as per Angular packaging method https://upgradetoangular.com/angular-news/the-angular-cli-is-a-great-way-to-build-your-angular-app-but-what-it-does-can-be-a-mystery-what-are-those-files-it-generates/?
I finally was able to make my code work. My setup is different. I build my Angular application and the it is served from my Play server. The angular build is stored in Play's /public/ui folder. The requests should be in format /assets/ui/.. which gets mapped to /public/ui/... due to a rule in Play routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
When I ran the code, I got error.
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/worker-javascript.js' failed to load.
at blob:http://localhost:9000/3df21e42-fecb-4026-8bd6-f2b0d1d0540a:1:1
Earlier, I also got error Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver
It seems ng-ace-editor imports .js scripts (theme, mode, worker) based on the theme and mode of the editor. The theme and mode js files can be included in scripts.js but some worker-.js files can't be (I don't know why, maybe because worker ones are loaded dynamically using importScript.
The scripts section in Angular.json is (this will all get bundled in scripts.js in Angular's final bundle)
"scripts": [
"./node_modules/ace-builds/src/ace.js",
"./node_modules/ace-builds/src/theme-eclipse.js",
"./node_modules/ace-builds/src/theme-monokai.js",
"./node_modules/ace-builds/src/mode-html.js"
]]
To include worker-.js files, I added this rule because it seems angular-cli can't load from node_modules. So I had to copy the files from node modules to root of my ui build - How to include assets from node_modules in angular cli project
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "./node_modules/ace-builds/src/",
"output": "/"
}
],
When I executed the code, I found error that http://localhost:9000/worker-javascript.js can't be loaded. I realised that my files are loaded in /assets/ui/ path and not in the server's root directory. So I set the basepath to /assets/ui in the component's .ts file
import * as ace from 'ace-builds/src-noconflict/ace';
ace.config.set('basePath', '/assets/ui/');
ace.config.set('modePath', '');
ace.config.set('themePath', '');
In summary
basePath seem to be what is used to load scripts dynamically (eg worker scripts)
modePath and themePath are / as the mode and theme scripts are bundled in scripts.js and are available at root level
need to copy worker-.js files outside node_modules as angular_cli can't copy assets from node_modules

Generate Shorten classnames

How to shorten class names in html and in css files
I have this class name
.profile-author-name-upper
And want to change this like this
.p-a-n-u
or
.panu
I'm usinig js task runner GruntJS
So what you need is uglification
This is just part from tutorial I copied online from grunt-contrib-uglify grunt plugin
Simple Configuration
npm install grunt grunt-contrib-uglify --save-dev
This will install grunt as well uglifyjs in your node_modules devDependencies as well as update package.json
Inside your Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/minified.js': ['src/jquery.js', 'src/angular.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); // load the given tasks
grunt.registerTask('default', ['uglify']); // Default grunt tasks maps to grunt
};
From the command line:
*$ grunt
Running "uglify:my_target" (uglify) task
1 file created.
Done, without errors*

Control order of source files

I'm using Gulp and the main-bower-files to bundle my bower dependencies.
I need to ensure that jQuery is included before AngularJS, but since the Angular bower package does not actually depend on jQuery it is included after.
Is there a way to push jQuery to the top of source list or override Angular's dependency so it does require jQuery?
I tried using the gulp-order plugin to do this but it messes up the original order of the remaining files:
gulp.task('bower', function () {
var sources = gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js'])); // don't include min files
return sources
// force jquery to be first
.pipe(plugins.order([
'jquery.js',
'*'
]))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.concat('libs.min.js'))
.pipe(plugins.uglify())
.pipe(plugins.sourcemaps.write('./'))
.pipe(gulp.dest(config.output))
.pipe(plugins.notify({ message: 'Bower task complete' }));
});
You can override angulars dependencies in your project bower.json:
https://github.com/ck86/main-bower-files#overrides-options
{
...
"overrides": {
"angular": {
"dependencies": {
"jquery": "~1.8"
}
}
}
}
I haven't used main-bower-files but one trick I can think of is to just include the jquery file directly and don't load it in the main bower files array, e.g.
var glob = ['/path/to/jquery.js'].concat(mainBowerFiles(['**/*.js', '!/path/to/jquery.js']));
var sources = gulp.src(glob);

Building durandaljs with gulp fails for external modules

I'm using gulp-durandal to build our durandal app. It fails on our first module which has a depeendecy to knockout through:
define(['knockout',....
[09:35:27] Durandal Error: ENOENT, no such file or directory 'C:\xxxxx\app\knockout.js'
In module tree:
company/viewmodels/edit
at Object.fs.openSync (fs.js:438:18)
I have knockout defined as a patch in config.js (standard requirejs way) but it seems gulp-durandal does not resolve paths from config.js ?
'knockout': '../Scripts/lib/knockout/knockout-2.3.0',
How do you get gulp-durandal to use our config paths instead of trying to resolve the modules directly under the app folder ? I tried using options.extraModules but that only allows you to add paths to modules, not symbolic names for the module so that doesn't seem to be the correct way.
The basic structure of my durandaljs app follows the standard guidelines I believe, I have a config.js and main.js under the App folder.
My config.js:
define([], function() {
return {
paths: {
'text': '../Scripts/lib/require/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
My main.js
require(['config'], function(config) {
require.config(config);
require(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/widget', 'custombindings'],
function(system, app, viewLocator, widget) {
..... app code here.....
}
gulpfile.js:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
gulp.task('durandal', function(){
durandal({
baseDir: 'app', //same as default, so not really required.
main: 'main.js', //same as default, so not really required.
output: 'main.js', //same as default, so not really required.
almond: true,
minify: true,
require:true
})
.pipe(gulp.dest('dir/to/save/the/output'));
});
I guess the question is how do I load my config.js paths into gulp so the paths are resolved correctly ? I tried:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
But it seems require only wants a string as input (I guess require function in gulp != require from require.js)
I believe the issue is that your gulp-durandal task needs configuration to mimic the config.js file. If you need further assistance please provide more code from your gulp-durandal task.