angularleafletrollupangular-seed

'latLng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js' Rollup build fails on leaflet


I'm using angular-seed by Minko.Also using @asymmetrik/angular2-leaflet.The normal production build works well.When running npm run build.prod.rollup.aot it fails with error.

dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (23:21) 'tile
Layer' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (41:22) 'latL
ng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (68:31) 'circ
le' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (6:32)
'latLng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (20:21)
 'map' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/layers/control/leaflet-control-la
yers.wrapper.js (13:31) 'control' is not exported by 'node_modules/leaflet/dist/leaflet-
src.js'

project.config.ts Rollup named import

this.ROLLUP_NAMED_EXPORTS = [
      ...this.ROLLUP_NAMED_EXPORTS,
      {'node_modules/leaflet/dist/leaflet.js': [  'leaflet' ]},

    ];

Additional packages

let additionalPackages: ExtendPackages[] = [
      {
        name: 'leaflet',
        path: 'node_modules/leaflet/dist/leaflet.js'
      },
      {
        name: '@asymmetrik/angular2-leaflet',
        path: 'node_modules/@asymmetrik/angular2-leaflet/dist/bundles/angular2-leaflet.js'
      }
     ];

Rollup config (build.bundles.app.rollup.aot.ts)

import Config from '../../config';
import { writeFile } from 'fs';
import { join } from 'path';

const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
const includePaths = require('rollup-plugin-includepaths');
const rollup = require('rollup');

const alias = require('rollup-plugin-alias');


const config = {
  entry: join(Config.TMP_DIR, Config.BOOTSTRAP_FACTORY_PROD_MODULE),
  sourceMap: true,
  treeshake: true,
  moduleName: 'main',
  plugins: [
    includePaths({
      include: {},
      paths: [join(Config.TMP_DIR, 'app')],
      external: [],
      extensions: ['.js', '.json', '.html', '.ts']
    }),
    alias({
            jszip: join(__dirname, '../../../node_modules/jszip/dist/jszip.min.js')
        }),
    nodeResolve({
      jsnext: true, main: true, module: true
    }),
    commonjs({ //See project.config.ts to extend
      include: Config.ROLLUP_INCLUDE_DIR,
      namedExports: Config.getRollupNamedExports()
    })
  ]
};
export = (done: any) => {
  rollup.rollup(config)
    .then((bundle: any) => {
      const result = bundle.generate({
        format: 'iife'
      });
      const path = join(Config.TMP_DIR, 'bundle.js');
      writeFile(path, result.code, (error: any) => {
        if (error) {
          console.error(error);
          process.exit(0);
        }
        done();
      });
    })
    .catch((error: any) => {
      console.error(error);
      process.exit(0);
    });
};

Solution

  • The problem was with the rollup build.When I run npm run build.prod.rollup.aot those above errors began to appear.But I fixed the issue.The problem was with named exports. leaflet-src.js was not exporting the required modules.So i added the missing things named exports in project.config.ts.

    this.ROLLUP_NAMED_EXPORTS = [
          ...this.ROLLUP_NAMED_EXPORTS,
          {'node_modules/leaflet/dist/leaflet.js': [  'leaflet' ]},
          {'node_modules/leaflet/dist/leaflet-src.js': [  'latLng', 'map','control' ]},
    
        ];
    

    Now its working as expected.