We Keep Coding

Migrating from weyland.js to grunt.js

I have a legacy asp.net + durandal.js app that is using weyland as a build optimizer. We are trying to upgrade to grunt to use something newer, but I can't get it to generate minified js build file correctly. I have the following weyland-config file:
exports.config = function(weyland) {
weyland.build('main')
.task.jshint({
include:'App/**/*.js'
})
.task.uglifyjs({
include: ['App/**/*.js', 'Scripts/durandal/**/*.js'],
exclude: ['App/main-built.js']
})
.task.rjs({
include:['App/**/*.{js,html}', 'Scripts/durandal/**/*.js'],
loaderPluginExtensionMaps:{
'.html':'text'
},
rjs:{
name:'../Scripts/almond-custom',
insertRequire:['main'],
baseUrl : 'App',
wrap:true,
paths : {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
optimize : 'none',
pragmas: {
build: true
},
stubModules : ['text'],
keepBuildDir: true,
out:'App/main-built.js'
}
});
}
I've been trying to create gruntfile according to this and this and this is what I have:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
jshint: {
include: 'App/**/*.js'
},
durandal: {
main: {
src: [
"App/**/*.*",
"Scripts/durandal/**/*.js"
],
options: {
name: '../Scripts/almond-custom',
baseUrl: './App/',
mainPath: "App/main",
paths: {
'jquery': '../Scripts/jquery-3.6.0',
'text': '../Scripts/text',
'knockout': '../Scripts/knockout-3.4.1',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
},
exclude: [],
optimize: 'none',
out: "App/main.js"
}
}
},
uglify: {
build: {
src: 'App/main.js',
dest: 'App/main-built.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks("grunt-durandal");
// Default task(s).
grunt.registerTask('default', ['durandal', 'uglify']);
};
But when I try to run grunt I get the following error:
Error: TypeError: Cannot read property 'normalize' of undefined
>> at Module.<anonymous> (APP_PATH\node_modules\requirejs\bin\r.js:1218:36)
If I try to only run uglify I get incorrectly minified file (by incorrectly I mean that the application throws errors when trying to use it). Does anybody know how to correctly port it over from weyland to grunt?

How do I include libphonenumber-js in my angular2 app using systemJS?

After installing https://github.com/halt-hammerzeit/libphonenumber-js using npm and updating my systemjs.config.ts to include
map:{
...
'libphonenumber-js': 'node_modules/libphonenumber-js'
},
packages: {
...
'libphonenumber-js': {
main: './custom.es6.js',
defaultExtension: 'js'
}
},
and attempting to use
import { parse, format, asYouType } from 'libphonenumber-js';
in my #Directive, I'm stuck with
Cannot find module 'libphonenumber-js'
How on earth am I supposed to wire this library into my app?
EDIT:
Directory layout:
websiteName
websiteName/index.html
websiteName/node_modules
websiteName/node_modules/libphonenumber-js
websiteName/app
websiteName/app/systemjs.config.ts
Index.html contains:
<script src="/app/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
systemjs.config.ts contains:
declare var System: any;
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// other references
'libphonenumber-js': 'npm:libphonenumber-js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
// other references
'libphonenumber-js': {
main: './bundle/libphonenumber-js.min.js',
defaultExtension: 'js'
}
}
});
})(this);

Your package configuration is incorrect. It needs to point at the source file for libphonenumber-js. Need to update the references to match your project structure.
Try this:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': './node_modules'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// other references
'libphonenumber-js': 'npm:libphonenumber-js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
// other references
'libphonenumber-js': {
main: 'libphonenumber-js.min',
defaultExtension: 'js'
}
}
});
})(this);

Issue in installing ng2-bootstrap in my Angular 2 application

I have been trying to add ng-bootstrap in my Angular 2 application for drop down. I am getting following error in console.
Console error
the following are my System.config.js code,
System.config.js code
Can any one please explain how should I install and use ng2-bootstrap. Thanks.
Updated my system.config.js code,
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Complete copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../../node_modules/#types/"
]
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/common': 'npm:#angular/common#2.2.1/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler#2.2.1/bundles/compiler.umd.js',
'#angular/core': 'npm:#angular/core#2.2.1/bundles/core.umd.js',
'#angular/forms': 'npm:#angular/forms#2.2.1/bundles/forms.umd.js',
'#angular/http': 'npm:#angular/http#2.2.1/bundles/http.umd.js',
'#angular/http/testing': 'npm:#angular/http#2.2.1/bundles/http-testing.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser#2.2.1/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic#2.2.1/bundles/platform-browser-dynamic.umd.js',
'#angular/router': 'npm:#angular/router#3.2.1/bundles/router.umd.js',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
// other libraries
'rxjs': 'npm:rxjs#5.0.0-rc.3',
'ts': 'npm:plugin-typescript#4.0.10/lib/plugin.js',
'typescript': 'npm:typescript#2.0.3/lib/typescript.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
},
// ng2-bootstrap
'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
rxjs: {
defaultExtension: 'js'
}
}
});
if (!global.noBootstrap) { bootstrap(); }
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('#angular/platform-browser-dynamic'),
System.import('app/app.module')
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
})(this);

Looks like, there is a mistake in your packages section. You have added ng2-bootstrap inside app.
Update packages like this-
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
// ng2-bootstrap
'moment': 'node_modules/moment',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
};
// 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': { main: 'index.js', defaultExtension: 'js' },
// ng2-bootstrap
'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' },
};

RequireJS multipage r.js

I have a quite large app built with RequireJS and I'm trying optimise the modules with r.js.
But no matter what I do, I always get the same annoying error.
me: ~/WORK/LAB/require_r_js/js
→ r.js -o build.js
Optimizing (standard.keepLines.keepWhitespace) CSS file: /<path_to_my_js_folder>/js/dist/vendor/tinyscrollbar/tinyscrollbar.css
Tracing dependencies for: utils/Vendor
Error: ENOENT, no such file or directory
'/<path_to_my_js_folder>/js/dist/TweenLite.js'
In module tree:
utils/Vendor
cssplugin
It looks like my path cssplugin is been ignored, here is my build.js file:
{
mainConfigFile : "core/commom.js",
appDir: '.',
baseUrl: ".",
removeCombined: true,
findNestedDependencies: true,
dir: "./dist",
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
}
},
modules: [
{ name: "utils/Vendor" },
{
name: "core/Main",
exclude: ['utils/Vendor']
},
{
name: "controllers/MapsHome"
},
{
name: "controllers/SuperHome"
},
{
name: "controllers/Register"
},
{
name: "controllers/hotel/HotelHome"
}
]
}
Well.. I know it looks a lot of information, but this is my commom.js file (the RequireJS config):
(function() {
requirejs.config({
baseUrl: "../",
waitSeconds: 120,
paths: {
tweenlite: "vendor/greensock/TweenLite.min",
cssplugin: "vendor/greensock/plugins/CSSPlugin.min",
easepack: "vendor/greensock/easing/EasePack.min",
jquery: "vendor/jquery/jquery-1.11.2.min",
jmask: "vendor/igorescobar/jquery-mask-plugin.min",
signals: "vendor/signals/signals",
underscore: "vendor/underscore/underscore-min",
retina: "vendor/retinajs/retina-1.1.0",
tinyscrollbar: "vendor/tinyscrollbar/jquery.tinyscrollbar.min",
async: 'vendor/millermedeiros/requirejs-plugins/async',
simpleWeather: 'vendor/simpleWeather/jquery.simpleWeather.min'
},
shim: {
underscore: {
exports: "_"
},
jquery: {
exports: "jQuery"
},
simpleWeather: {
exports: "simpleWeather",
deps: ["jquery"]
},
facebook: {
exports: 'FB'
}
}
});
}).call(this);
The files are organized in this structure:
Well, in my website the scripts are loaded as this:
<script type="text/javascript">
require([globalServerConf.requireJSConfURL], function() {
require(['core/Main'], function(Main) {
var m = new Main();
// The name of the Page Controller is set by a PHP Variable:
m.init("{{$jsController}}");
});
});
</script>
So, a global JS object (built by a PHP script) has the URL to the requirejs.config object. When commom.js is loaded, RequireJS asks for core/Main.js file. When core/Main is loaded, it will ask first for the utils/Vendor module. This module loads all third part scripts (like jQuery, TweenLite, CSSPlugin, etc etc). Only when these files are loaded, Main.js asks for the page controller file (which makes use of many other files as well).
So, I am trying to build with r.js all these modules:
All third part scripts: utils/Vendor
Main script: core/Main
All other main pages controllers:
controllers/MapsHome, controllers/SuperHome, controllers/Register, controllers/hotel/HotelHome
Every time I run r.js, tweelite or cssplugin makes that error and the optimization is killed.

r.js can't find files for ember-simple-auth shim

When trying to run my main.js through r.js I'm getting file not found errors for the ember-simple-auth shim.
Error: ENOENT, no such file or directory '[path_to_webapp]/components/ember-simple-auth/ember-simple-auth/core.js']
errno: 34,
code: 'ENOENT',
path: '[path_to_webapp]/components/ember-simple-auth/ember-simple-auth/core.js',
syscall: 'open',
fileName: '[path_to_webapp]/components/ember-simple-auth/ember-simple-auth/core.js',
moduleTree: [ 'ember-simple-auth', 'js/main' ]
There is a ember-simple-auth.js in the ember-simple-auth directory in which the core module is bundled. This works for development but not when I run it through the optimizer
The relevant parts (I think) of my main.js looks like this
require.config({
baseUrl: '/',
paths:
{
'ember': 'components/ember/ember',
'ember-simple-auth': 'components/ember-simple-auth/ember-simple-auth',
},
shim:
{
'ember':
{
deps: ['handlebars','jquery'],
exports: 'Ember'
},
'ember-simple-auth' : ['ember']
}
});
require(['ember-simple-auth']);
The build file
compile:
options:
baseUrl: "."
paths:
requireLib: 'components/requirejs/require'
mainConfigFile: "js/main.js"
name: "js/main"
include: ['requireLib']
out: "js/main.min.js"
'compile-css':
options:
cssIn: "css/style.css"
out: "css/style.min.css"

I ended up using the bundles option which in my case looks like this
bundles:
{
'ember-simple-auth': ['ember-simple-auth/core','ember-simple-auth/session','ember-simple-auth/authenticators','ember-simple-auth/authorizers','ember-simple-auth/stores','ember-simple-auth/utils','ember-simple-auth/mixins/application_route_mixin','ember-simple-auth/mixins/authenticated_route_mixin','ember-simple-auth/mixins/authentication_route_mixin','ember-simple-auth/mixins/authentication_controller_mixin','ember-simple-auth/mixins/login_controller_mixin','ember-simple-auth/authenticators/base','ember-simple-auth/authorizers/base','ember-simple-auth/stores/base','ember-simple-auth/stores/local_storage','ember-simple-auth/stores/ephemeral','ember-simple-auth/utils/flat_objects_are_equal','ember-simple-auth/utils/is_secure_url']
},