ERROR in leafletMaps.loader.ts

[cristianmtr]

• I'm submitting a ...
  [X] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
• Do you want to request a feature or report a bug?

Report a bug

• What is the current behavior?

Cannot load page. npm start gives an error:

ERROR in ./src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts
Module not found: Error: Cannot resolve module 'leaflet/dist/leaflet.css' in /mnt/Ddrive/tmp/ng2-admin/src/app/pages/maps/components/leafletMaps
 @ ./src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts 2:0-48

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
• installed global tools
• cloned the repo
• ran npm install and npm run
• What is the expected behavior?

There should not be any errors with npm run.

• What is the motivation / use case for changing the behavior?

To fix it.

• Please tell us about your environment:
• Angular version: 2.0.0-rc.1
• Browser: Chrome Google Chrome 50.0.2661.75
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

stack trace:

[1182] ./~/font-awesome-sass-loader/index.js 84 bytes {2} [built]
       [0] 0ms -> [816] 2952ms -> factory:349ms building:155ms = 3456ms
 [1188] ./~/lodash/lodash.js 516 kB {2} [built]
       [0] 0ms -> [816] 2952ms -> factory:55ms building:266ms = 3273ms
 [1243] ./~/style-loader!./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/source-map-loader!./~/bootstrap-loader/no-op.js 1.35 kB {2} [built]
       [0] 0ms -> [816] 2952ms -> [1025] 669ms -> [817] 1135ms -> factory:475ms building:1ms dependencies:55ms = 5287ms
 [1244] ./~/style-loader!./~/css-loader!./~/sass-loader!./~/font-awesome-sass-loader/font-awesome-sass-styles.loader.js!./~/font-awesome-sass-loader/font-awesome-sass.config.js 1.19 kB {2} [built]
       [0] 0ms -> [816] 2952ms -> [1182] 504ms -> factory:485ms building:10ms = 3951ms
 [1247] ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3 84 bytes {2} [built]
       [0] 0ms -> [816] 2952ms -> [1182] 504ms -> [1244] 495ms -> [820] 4108ms -> factory:431ms building:297ms = 8787ms
 [1248] ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3 83 bytes {2} [built]
       [0] 0ms -> [816] 2952ms -> [1182] 504ms -> [1244] 495ms -> [820] 4108ms -> factory:446ms building:283ms = 8788ms

ERROR in ./src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts
Module not found: Error: Cannot resolve module 'leaflet/dist/leaflet.css' in /mnt/Ddrive/tmp/ng2-admin/src/app/pages/maps/components/leafletMaps
 @ ./src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts 2:0-48
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 519 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 2.91 kB {0} [built]
           factory:25ms building:31ms = 56ms
        [1] ./~/lodash/lodash.js 516 kB {0} [built]
           [0] 56ms -> factory:248ms building:358ms = 662ms
        [2] (webpack)/buildin/module.js 251 bytes {0} [built]
           [0] 56ms -> [1] 606ms -> factory:2633ms building:68ms = 3363ms
Child extract-text-webpack-plugin:
                                    Asset     Size  Chunks             Chunk Names
     2c2ae068be3b089e0a5b59abb1831550.eot   121 kB          [emitted]  
     621bd386841f74e0053cb8e67f8a0604.svg   334 kB          [emitted]  
     24712f6c47821394fba7942fbb52c3b2.ttf   189 kB          [emitted]  
    05acfdb568b3df49ad31355b19495d4a.woff  67.9 kB          [emitted]  
    chunk    {0} extract-text-webpack-plugin-output-filename 67.9 kB [rendered]
        [0] ./~/css-loader!./~/sass-loader!./src/app/theme/initial.scss 66.1 kB {0} [built]
           factory:0ms building:5010ms = 5010ms
        [1] ./~/Ionicons/fonts/ionicons.eot?v=2.0.0 82 bytes {0} [built]
           [0] 5010ms -> factory:14ms building:238ms = 5262ms
        [2] ./~/Ionicons/fonts/ionicons.svg?v=2.0.0 82 bytes {0} [built]
           [0] 5010ms -> factory:15ms building:238ms = 5263ms
        [3] ./~/Ionicons/fonts/ionicons.ttf?v=2.0.0 82 bytes {0} [built]
           [0] 5010ms -> factory:14ms building:238ms = 5262ms
        [4] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
           [0] 5010ms -> factory:0ms building:1ms = 5011ms
        [5] ./~/Ionicons/fonts/ionicons.woff?v=2.0.0 83 bytes {0} [built]
           [0] 5010ms -> factory:15ms building:238ms = 5263ms
webpack: bundle is now VALID.
[default] Checking started in a separate process...
[default] Ok, 1.69 sec.

Should I add all of it?

[nnixaa]

Hi @cristianmtr, could you provide your npm and node versions. Also, are you seeing the leaflet module folder under node_modules directory? Thank you.

[Dodobibi]

You can comment the line :

require('leaflet-map'); // require('style-loader!leaflet/dist/leaflet.css');

in ./src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts

[cristianmtr]

Seems I had an older version of npm, at 2.something. Updated it to 3.x and all is good.

[ex7r3me]

I had this problem even after upgrading to npm 3.9 and node 4.4, solved it with "npm install leaflet" now it's working.