I want to include a file called /assets/js/clusterfeaturelayer.js to my project, in which I use SystemJS and WebPack and which has the following structure.
- /app <-- angular app code
- /node_modules <-- npm packages
- /assets/js <-- other third party libraries that are not in NPM
The file is defined in a AMD style and looks like this:
define([ 'dojo/_base/declare', 'dojo/_base/array', 'dojo/_base/lang', 'esri/SpatialReference', 'esri/geometry/Point', 'esri/geometry/Polygon', 'esri/geometry/Multipoint', 'esri/geometry/Extent', 'esri/graphic', ], function (declare, arrayUtils, lang, SpatialReference, Point, Polygon, Multipoint, Extent, Graphic) { }); I would like to use that component from within my code by import ClusterFeatureLayer = require("ClusterFeatureLayer");
But no matter how I try to include this file in my systemjs and webpack configs, it just doesn't find it:
Here is my systemjs config:
(function(global) { // 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', 'ClusterFeatureLayer': 'assets/js' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'boot.js', defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js',defaultExtension:'js' }, 'rxjs': { defaultExtension: 'js' }, 'esri': { defaultExtension: 'js' }, 'ClusterFeatureLayer': { main: 'clusterfeaturelayer.js', defaultExtension: 'js' } }; var ngPackageNames = [ 'common', 'compiler', 'core', 'http', 'platform-browser', 'platform-browser-dynamic', 'router' ]; // 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); and here is the webpack config:
var webpack = require("webpack"); module.exports = { entry: { main: [ './app/boot.ts' // entry point for your application code ], vendor: [ // put your third party libs here "core-js", "reflect-metadata", // order is important here "rxjs", "zone.js", '@angular/core', '@angular/common', "@angular/compiler", "@angular/core", "@angular/forms", "@angular/http", "@angular/platform-browser", "@angular/platform-browser-dynamic", "@angular/router", "@angular/upgrade", "ng2-slim-loading-bar", "ng2-toasty", "ClusterFeatureLayer" ] }, output: { filename: './dist/[name].bundle.js', publicPath: './', libraryTarget: "amd" }, resolve: { extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] }, module: { loaders: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: '' }, // css { test: /\.css$/, loader: "style-loader!css-loader" } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: Infinity }) ], externals: [ function(context, request, callback) { if (/^dojo/.test(request) || /^dojox/.test(request) || /^dijit/.test(request) || /^esri/.test(request) ) { return callback(null, "amd " + request); } callback(); } ], devtool: 'source-map' }; 1 Answers
Answers 1
Do you have an export in your clusterlayerfeature file?
// My Module var myModule = { myFunction: function() { return "Hello!"; } } module.exports = myModule; If you aren't exporting your module, any reference to it will be undefined.
0 comments:
Post a Comment