systemjs.config.js:
/**
* 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',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'mystartup_commons': 'npm:mystartup_commons'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
mystartup_commons: {
defaultExtension: 'js'
}
}
});
})(this);
This is the index.js it is pointing to:
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./helpers"));
__export(require("./model2"));
Error in browser :
GET
http://localhost:3000/node_modules/mystartup_commons/dist/src/helpers
404 (Not Found)
GET
http://localhost:3000/node_modules/mystartup_commons/dist/src/helpers
404 (Not Found)
You are pointing mystartup_commons to a file, not a package. Thus the defaultExtension doesn't have much effect.
Try jspm and it will show you how to get things setup.
This issue may also "interest" you as you are working with TS and SystemJS:
https://github.com/systemjs/systemjs/issues/1587
Related
I'm working on File Upload with Angular2 and Node.js with ng2-File-Upload
but while running my project i got an error related to Reflect.getOwnMetadata
here is the error shown :
and here is my systemjs.config.js
(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',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
/** Path for ng2-file-upload */
'ng2-file-upload' : 'npm:ng2-file-upload'
/** Path for ng2-file-upload */
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './transpiled-js/main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
/** Configuration for ng2-file-upload */
'ng2-file-upload' : {
main: './ng2-file-upload.js',
defaultExtension: 'js'
}
/** Configuration for ng2-file-upload */
}
});
})(this);
This is the scenario when I faced the exact same issue:
I had two TypeScript files with the same name (say, FileUploadService.ts) residing in two different locations. One was for handling server logic (residing in a server directory), and the other in a public directory for file upload through an Angular service.
The problem was that I was importing the wrong service in a location where the ng2-file-upload package was used, which in turn depends on Angular modules - which were never being imported.
This meant that the file where Reflect.getOwnMetadata is defined somewhere was unavailable during the Typescript compilation.
Please make sure you reference the correct file in the correct location which might be the case for you too.
I use gulp to watch typescript files and I store translated .js files in public/js. Whenever I start my project, angular2 doesn't work, because of this error:
Cannot get main.js
Here is the Error that I'm getting.
system.config.js
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'public/js',
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
packages: {
app: {
main: './main',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
index.ejs
(I'm using express and all files below are loaded correctly).
<head>
<title>Chat room</title>
<link rel="stylesheet" href="/css/index.css">
<script src="/systemjslib/system.src.js"></script>
<script src="/systemjsconf"></script>
<script src="/shimlib/shim.min.js"></script>
<script src="/zonelib/zone.js"></script>
<script src="/rxjslib/Reflect.js"></script>
</head>
<body>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<my-app>Loading AppComponent content here ...</my-app>
</body>
main.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var platform_browser_dynamic_1 = require("#angular/platform-browser-dynamic");
var app_module_1 = require("./app.module");
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);
Project files structure
I would really appreciate some help. Thanks in advance. If I missed out some files that are important, let me know I will edit this post, I really need this fixed.
I can't get my app to see moment, I have tried everything I've seen via googling and on stackoverflow.
require.config({
baseUrl: 'app',
paths: {
'angular': '../lib/angular.min',
'angularMessages': '../lib/angular-messages.min',
'angularResource': '../lib/angular-resource.min',
//moment stuff
"moment": '../lib/moment',
'momentLocale': '../lib/moment-with-locales',
'angular-moment': '../lib/angular-moment.min',
},
shim: {
angular: {
exports : 'angular'
},
"angular-moment": { "deps": ["momentjs"] }
}
});
require([
'app',
'angular'], function (app) {
require([
'moment',
'momentjs',
'momentLocale',
'angular-moment'], function () {
app.init();
});
});
Yet however I can get this to run no problems
// load moment.js as moment
require(['moment'], function(moment) {
// test if moment is loaded
alert(moment().format('dddd, MMMM Do YYYY, h:mm:ss a'));
});
Note I stripped out the other stuff in my require js as there are no problems whatever with those resources.
I wish to have a centralised Node modules folder (using npm update -g to save to C disk) instead of the usual local folder which is contained in the app, due to Angular2 CLI installing 125mb+ worth of Node modules in the local folder.
So in the typescript files we previously imported the angular core like so:
import { Component } from '#angular/core';
But obviously this doesnt work, is it possible to put a prefix or hard URL somewhere to tell the app to search in the global folder for the modules?
Modify SystemJs configuration (usually systemjs.config.js file), so it maps #angular to you centralized node_modules\#angular folder, instead of local one.
var map = {
'app' : 'app',
'#angular' : 'C:/node_modules/#angular', // path to centralized repo
};
Here is what your systemjs.config file should be :
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'src',
'#angular': 'global location'
};
// 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' },
//can add as per your requirement
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'#angular/router-deprecated',
'#angular/testing',
'#angular/upgrade',
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
})(this);
I have the following directory structure (relevant bits only):
app
- build
- script.js
- js
- lib
- require.js
- jquery-1.10.2.js
- app.js
- index.html
Gruntfile.js
Gruntfile.js contains the following:
module.exports = function (grunt) {
var gruntConfig = {
pkg: grunt.file.readJSON('package.json'),
requirejs: {
compile: {
options: {
name: 'app',
baseUrl: 'app/assets/js',
out: 'app/assets/build/script.js',
include: ['lib/require'],
uglify: {
// beautify: true,
defines: {
DEBUG: ['name', 'false']
}
},
paths: {
jquery: "lib/jquery-1.10.2"
}
}
}
},
};
grunt.initConfig(gruntConfig);
grunt.loadNpmTasks('grunt-contrib-requirejs');
};
app.js contains the following:
require(['jquery'], function ($) {
// Do stuff
});
How do I set it up so that it copies all the JavaScript needed into build/script.js, not just app.js and require.js when I tell it to (erroring when I try to use jQuery)? I also want to be able to add modules without adding them to my Gruntfile, just by adding them to script.js.
You can have a mainConfigFile defined and inside config file have paths to you lib code like this
Contents of gruntfile:
requirejs: {
compile: {
options: {
baseUrl: "app/js/",
mainConfigFile: app/config.js",
out: "build/script.js",
name: "config"
}
}
}
Contents of config file:
require.config({
paths: {
lib: "<path to>/js/lib",
jquery: "<path to>/js/lib/jquery-1.10.2.min",
.
and particular file required
.
}
Requirejs will add the contents of all path files to the optimized code.
Try adding this to your options object:
findNestedDependencies: true
This way grunt-contrib-requirejs (actually just requirejs) will find whatever dependencies are listed on your config file.
Hope it works for you.