search

ocombe / ocLazyLoad

Lazy load modules & components in AngularJS
https://oclazyload.readme.io
MIT License
2.63k stars 510 forks source link

Unknown provider: page1DirectiveProvider <- page1Directive #360

Closed kevincaradant closed 7 years ago

kevincaradant commented 7 years ago

Hi guys,

Since a couples hours, I tried to apply ocLazyLoad on my personal project using Angular 1.5 and webpack 1 but I don't understand something because it's doesnot work :/

This is my webpack.config.js:

var path = require('path'),
webpack = require('webpack'),
libPath = path.join(__dirname, 'lib'),
nodeModulesPath = path.join(__dirname, 'node_modules'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ProgressBarPlugin = require('progress-bar-webpack-plugin'), // To be delete when webpack will accept the flag --progress in the devserver and not only in CMD
WatchIgnorePlugin = require('watch-ignore-webpack-plugin'),
SassLintPlugin = require('sasslint-webpack-plugin');

var cf = {
    entry: {
        app: path.join(libPath, 'index.js'),
        vendor: ['angular', 'oclazyload']
    },
    devtool: 'source-map',

    resolve: {
        root: [path.resolve(__dirname, 'lib'), path.resolve(__dirname, 'node_modules')],
        extensions: ['', '.js', '.json', '.scss']
    },

    debug: true,

    cache: false,

    module: {
        loaders: [{
            test: /\.json$/,
            exclude: /node_modules/,
            loaders: ["raw-loader"]
        },{
            test: /\.html$/,
            exclude: /node_modules/,
            loader: 'ngtemplate!html'
        },{
            test: /\.(jpe?g|gif|png|svg|woff|woff2|ttf|eot|wav|mp3)$/,
            loader: 'file' // inline base64 URLs for <=10kb images, direct URLs for the rest
        },{
            test: /\.less$/,
            exclude: /node_modules/,
            loaders: ['style', 'css', 'less?sourceMap', 'resolve-url']
        },{
            test: /\.scss$|\.css$/,
            exclude: /node_modules/,
            loaders: ['style', 'css-loader', 'resolve-url', 'sass?sourceMap']
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['ng-annotate?add=true&map=true', 'babel', 'eslint-loader']
        }]
    },

    eslint: {
        configFile: './.eslintrc'
    },

    devServer: {
        port: 3001,
        https: false,
        inline: true,
        compress: true,
        hot: true,
        open: true,
        noInfo: true
    },

    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: path.join(libPath, 'index.ejs'),
            title: 'My App',
            cache: false,
            hash: true,
            chunksSortMode: 'auto'
        }),

        new webpack.optimize.OccurenceOrderPlugin(),

        new webpack.optimize.DedupePlugin(),

        new webpack.HotModuleReplacementPlugin(),

        new WatchIgnorePlugin([
            path.resolve( __dirname, './examples/'),
            path.resolve(__dirname, './node_modules/'),
        ]),

        new SassLintPlugin({
            glob: 'lib/**/*.s?(a|c)ss',
            ignorePlugins: [
                'extract-text-webpack-plugin'
            ],
            configFile: '.sass-lint.yml'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.bundle.js'
        }),
        new ProgressBarPlugin({format: '  build [:bar] ' + (':percent') + ' (:elapsed seconds)'})
    ]
};

module.exports = cf;

And my router:


import path from 'path';
import oclazyLoad from 'oclazyload';
import page1Module from './components/page1/page1.module';

export default function routes($stateProvider, $translateProvider, $compileProvider, $httpProvider, $urlRouterProvider) {
    'ngInject';
    $compileProvider.debugInfoEnabled(true);

    $httpProvider.defaults.cache = true;

    $stateProvider
    .state('home', {
        url: '/home',
        views: {
            mainView: {
                component: 'home'
            },
            rightMenuView: {
                component: 'rightMenu'
            }
        }
    })

    .state('page1', {
        url: '/page1',
        views: {
            mainView: {
                component: 'page1'
// I also tried to import the file and then write the import here but it does not work
            },
            rightMenuView: {
                component: 'rightMenu'
            }
        },
        resolve: {
                foo: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
                        let deferred = $q.defer();
                        require.ensure([], function () {
                                let module = page1Module;
                                $ocLazyLoad.load({
                                        name: 'page1'
                                });
                                deferred.resolve(module);
                        });
                        return deferred.promise;
                }]
        }
    })
}

My module to lazyLoad:

import Page1Component from 'components/page1/page1.component';
const PAGE1MODULE = 'page1';

angular.module('page1', [])
.component('page1', Page1Component);

export default 'page1';

And everytime I get this error: angular.js:13920 Error: [$injector:unpr] Unknown provider: page1DirectiveProvider <- page1Directive

I'm lost I don't undertsand why my component is unknow. I tried Addmore, I noticed that page1Module.js, page1.scss, page1.html are in the bundle.js when loading the HOME page but is it normal ? If I lazyload, I think they have to appear only with a chunck when I ask the PAGE1 and not in my case when I'm on HOME page. I don't know if I'm clear :/

For me, I'm really near of this approach that I can find here : https://github.com/ay13/webpack-angular-oclazyload

If the compilation of Webpack can be useful, this is a example :

Build completed in 11.489s

Hash: 9b63c6da3599da11cff6
Version: webpack 1.13.2
Time: 11758ms
                                 Asset       Size  Chunks             Chunk Names
  e18bbf611f2a2e43afc071aa2f4e1512.ttf    45.4 kB          [emitted]
  e79bfd88537def476913f3ed52f4f4b3.eot     143 kB          [emitted]
  9b4deac95cbd0ce5ac572e91b87d82ef.jpg      54 kB          [emitted]
  a1adea65594c502f9d9428f13ae210e1.svg     282 kB          [emitted]
  a37b0c01c0baf1888ca812cc0508f6e2.ttf     128 kB          [emitted]
 3c3d0242794b4682460a3f7c7a2126ee.woff    78.8 kB          [emitted]
29e1bb4218f492854c1601a93d49662f.woff2    44.4 kB          [emitted]
  89889688147bd7575d6327160d64e760.svg     109 kB          [emitted]
  f4769f9bdb7466be65088239c12046d1.eot    20.1 kB          [emitted]
 fa2772327f55d8198301fdb8bcfc8158.woff    23.4 kB          [emitted]
448c34a56d699c29117adc64c43affeb.woff2      18 kB          [emitted]
                      vendor.bundle.js    1.54 MB       0  [emitted]  vendor
                             bundle.js    1.92 MB       1  [emitted]  app
                  vendor.bundle.js.map    1.79 MB       0  [emitted]  vendor
                         bundle.js.map    2.27 MB       1  [emitted]  app
                            index.html  483 bytes          [emitted]
chunk    {0} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.47 MB [rendered]
    [0] multi vendor 64 bytes {0} [built]
    [1] ./~/inherits/inherits_browser.js 672 bytes {0} [built]
    [2] ./~/process/browser.js 5.3 kB {0} [built]
    [3] ./~/debug/browser.js 3.76 kB {0} [built]
    [4] ./~/sockjs-client/lib/event/emitter.js 1.27 kB {0} [built]
    [5] ./~/sockjs-client/lib/utils/url.js 975 bytes {0} [built]
    [6] ./~/json3/lib/json3.js 40.1 kB {0} [built]
    [7] ./~/sockjs-client/lib/utils/event.js 2 kB {0} [built]
    [8] ./~/sockjs-client/lib/transport/lib/ajax-based.js 1.31 kB {0} [built]
    [9] ./~/sockjs-client/lib/utils/random.js 746 bytes {0} [built]
   [11] ./~/sockjs-client/lib/transport/sender/xhr-local.js 352 bytes {0} [built]
   [12] ./~/sockjs-client/lib/utils/browser.js 560 bytes {0} [built]
   [13] ./~/sockjs-client/lib/utils/iframe.js 5.06 kB {0} [built]
   [15] ./~/angular/index.js 48 bytes {0} [built]
   [16] ./~/oclazyload/dist/ocLazyLoad.js 58.7 kB {0} [built]
   [17] ./~/sockjs-client/lib/transport/receiver/xhr.js 1.58 kB {0} [built]
   [18] ./~/sockjs-client/lib/transport/sender/xhr-cors.js 343 bytes {0} [built]
   [24] ./~/sockjs-client/lib/event/event.js 477 bytes {0} [built]
   [25] ./~/sockjs-client/lib/transport/lib/iframe-wrap.js 981 bytes {0} [built]
   [26] ./~/sockjs-client/lib/transport/sender/xdr.js 2.46 kB {0} [built]
   [27] ./~/sockjs-client/lib/utils/object.js 532 bytes {0} [built]
   [28] ./~/url-parse/index.js 9.92 kB {0} [built]
   [29] (webpack)/buildin/module.js 251 bytes {0} [built]
   [34] ./~/sockjs-client/lib/event/eventtarget.js 1.85 kB {0} [built]
   [35] ./~/sockjs-client/lib/info-ajax.js 1.03 kB {0} [built]
   [36] ./~/sockjs-client/lib/info-iframe-receiver.js 791 bytes {0} [built]
   [37] ./~/sockjs-client/lib/location.js 177 bytes {0} [built]
   [38] ./~/sockjs-client/lib/transport/browser/abstract-xhr.js 4.8 kB {0} [built]
   [39] ./~/sockjs-client/lib/transport/browser/eventsource.js 37 bytes {0} [built]
   [40] ./~/sockjs-client/lib/transport/eventsource.js 766 bytes {0} [built]
   [41] ./~/sockjs-client/lib/transport/htmlfile.js 710 bytes {0} [built]
   [42] ./~/sockjs-client/lib/transport/iframe.js 3.83 kB {0} [built]
   [43] ./~/sockjs-client/lib/transport/lib/sender-receiver.js 1.15 kB {0} [built]
   [44] ./~/sockjs-client/lib/transport/xdr-streaming.js 984 bytes {0} [built]
   [45] ./~/sockjs-client/lib/transport/xhr-polling.js 894 bytes {0} [built]
   [46] ./~/sockjs-client/lib/version.js 26 bytes {0} [built]
   [47] (webpack)-dev-server/client?http://localhost:3001 3.97 kB {0} [built]
   [48] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
   [63] ./~/angular/angular.js 1.19 MB {0} [built]
   [64] ./~/ansi-regex/index.js 135 bytes {0} [built]
   [65] ./~/debug/debug.js 4.1 kB {0} [built]
   [75] ./~/ms/index.js 2.33 kB {0} [built]
   [96] ./~/punycode/punycode.js 14.7 kB {0} [built]
   [97] ./~/querystring/decode.js 2.4 kB {0} [built]
   [98] ./~/querystring/encode.js 2.09 kB {0} [built]
   [99] ./~/querystring/index.js 127 bytes {0} [built]
  [100] ./~/querystringify/index.js 1.3 kB {0} [built]
  [103] ./~/requires-port/index.js 753 bytes {0} [built]
  [106] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
  [107] ./~/sockjs-client/lib/event/close.js 295 bytes {0} [built]
  [108] ./~/sockjs-client/lib/event/trans-message.js 292 bytes {0} [built]
  [109] ./~/sockjs-client/lib/facade.js 723 bytes {0} [built]
  [110] ./~/sockjs-client/lib/iframe-bootstrap.js 2.9 kB {0} [built]
  [111] ./~/sockjs-client/lib/info-iframe.js 1.52 kB {0} [built]
  [112] ./~/sockjs-client/lib/info-receiver.js 2.22 kB {0} [built]
  [113] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
  [114] ./~/sockjs-client/lib/shims.js 18.2 kB {0} [built]
  [115] ./~/sockjs-client/lib/transport-list.js 613 bytes {0} [built]
  [116] ./~/sockjs-client/lib/transport/browser/websocket.js 172 bytes {0} [built]
  [117] ./~/sockjs-client/lib/transport/jsonp-polling.js 1.02 kB {0} [built]
  [118] ./~/sockjs-client/lib/transport/lib/buffered-sender.js 2.3 kB {0} [built]
  [119] ./~/sockjs-client/lib/transport/lib/polling.js 1.32 kB {0} [built]
  [120] ./~/sockjs-client/lib/transport/receiver/eventsource.js 1.58 kB {0} [built]
  [121] ./~/sockjs-client/lib/transport/receiver/htmlfile.js 2.2 kB {0} [built]
  [122] ./~/sockjs-client/lib/transport/receiver/jsonp.js 5.57 kB {0} [built]
  [123] ./~/sockjs-client/lib/transport/sender/jsonp.js 2.46 kB {0} [built]
  [124] ./~/sockjs-client/lib/transport/sender/xhr-fake.js 456 bytes {0} [built]
  [125] ./~/sockjs-client/lib/transport/websocket.js 2.71 kB {0} [built]
  [126] ./~/sockjs-client/lib/transport/xdr-polling.js 712 bytes {0} [built]
  [127] ./~/sockjs-client/lib/transport/xhr-streaming.js 1.25 kB {0} [built]
  [128] ./~/sockjs-client/lib/utils/browser-crypto.js 438 bytes {0} [built]
  [129] ./~/sockjs-client/lib/utils/escape.js 2.31 kB {0} [built]
  [130] ./~/sockjs-client/lib/utils/log.js 450 bytes {0} [built]
  [131] ./~/sockjs-client/lib/utils/transport.js 1.35 kB {0} [built]
  [132] ./~/strip-ansi/index.js 161 bytes {0} [built]
  [138] ./~/url-parse/lolcation.js 1.58 kB {0} [built]
  [139] ./~/url/url.js 22.3 kB {0} [built]
  [142] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [143] (webpack)/buildin/amd-options.js 43 bytes {0} [built]
  [144] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
chunk    {1} bundle.js, bundle.js.map (app) 1.87 MB {0} [rendered]
    [0] multi app 52 bytes {1} [built]
   [10] ./~/css-loader/lib/css-base.js 1.51 kB {1} [built]
   [14] ./~/style-loader/addStyles.js 7.15 kB {1} [built]
   [19] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/components/completeBlock/completeBlock.scss 1.37 kB {1} [built]
   [20] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/components/home/home.scss 162 bytes {1} [built]
   [21] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/components/page1/page1.scss 196 bytes {1} [built]
   [22] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/components/rightMenu/rightMenu.scss 162 bytes {1} [built]
   [23] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/scss/style.scss 337 kB {1} [built]
   [30] ./~/angular-animate/index.js 60 bytes {1} [built]
   [31] ./~/angular-ui-router/release/angular-ui-router.js 358 kB {1} [built]
   [32] ./~/bootstrap-material-design-icons/fonts/MaterialIcons-Regular.eot 82 bytes {1} [built]
   [33] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 82 bytes {1} [built]
   [49] ./~/angular-animate/angular-animate.js 151 kB {1} [built]
   [50] ./~/angular-bootstrap-material/dist/angular-bootstrap-material.js 18.3 kB {1} [built]
   [51] ./~/angular-loading-bar/build/loading-bar.js 10.5 kB {1} [built]
   [52] ./~/angular-loading-bar/index.js 72 bytes {1} [built]
   [53] ./~/angular-messages/angular-messages.js 28 kB {1} [built]
   [54] ./~/angular-messages/index.js 62 bytes {1} [built]
   [55] ./~/angular-sanitize/angular-sanitize.js 26.8 kB {1} [built]
   [56] ./~/angular-sanitize/index.js 62 bytes {1} [built]
   [57] ./~/angular-translate-loader-static-files/angular-translate-loader-static-files.js 2.92 kB {1} [built]
   [58] ./~/angular-translate/dist/angular-translate.js 127 kB {1} [built]
   [59] ./~/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js 270 kB {1} [built]
   [60] ./~/angular-ui-bootstrap/index.js 71 bytes {1} [built]
   [61] ./~/angular-ui-router-anim-in-out/anim-in-out.js 4.06 kB {1} [built]
   [62] ./~/angular-ui-router-anim-in-out/index.js 136 bytes {1} [built]
   [66] ./lib/img/image.jpg 82 bytes {1} [built]
   [67] ./~/bootstrap-material-design-icons/fonts/MaterialIcons-Regular.svg 82 bytes {1} [built]
   [68] ./~/bootstrap-material-design-icons/fonts/MaterialIcons-Regular.ttf 82 bytes {1} [built]
   [69] ./~/bootstrap-material-design-icons/fonts/MaterialIcons-Regular.woff 83 bytes {1} [built]
   [70] ./~/bootstrap-material-design-icons/fonts/MaterialIcons-Regular.woff2 84 bytes {1} [built]
   [71] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 82 bytes {1} [built]
   [72] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 82 bytes {1} [built]
   [73] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 83 bytes {1} [built]
   [74] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 84 bytes {1} [built]
   [76] ./lib/components/app/app.component.js 1.38 kB {1} [built]
   [77] ./lib/components/app/app.controller.js 1.46 kB {1} [built]
   [78] ./lib/components/completeBlock/completeBlock.component.js 1.63 kB {1} [built]
   [79] ./lib/components/home/home.component.js 1.3 kB {1} [built]
   [80] ./lib/components/home/home.module.js 742 bytes {1} [built]
   [81] ./lib/components/lang/lang.component.js 1.4 kB {1} [built]
   [82] ./lib/components/lang/lang.controller.js 1.89 kB {1} [built]
   [83] ./lib/components/lang/lang.service.js 1.86 kB {1} [built]
   [84] ./lib/components/page1/page1.component.js 1.39 kB {1} [built]
   [85] ./lib/components/page1/page1.module.js 400 bytes {1} [built] 
   [86] ./lib/components/rightMenu/rightMenu.component.js 1.36 kB {1} [built]
   [87] ./lib/index.config.js 2.12 kB {1} [built] 
   [88] ./lib/index.js 3.49 kB {1} [built]
   [89] ./lib/components/app/app.html 2.11 kB {1} [built]
   [90] ./lib/components/completeBlock/completeBlock.html 1.34 kB {1} [built]
   [91] ./lib/components/home/home.html 1.78 kB {1} [built]
   [92] ./lib/components/lang/lang.html 647 bytes {1} [built]
   [93] ./lib/components/page1/page1.html 271 bytes {1} [built]
   [94] ./lib/components/rightMenu/rightMenu.html 1.42 kB {1} [built]
   [95] ./~/path/path.js 17.1 kB {1} [built]
  [101] ./lib/languages/en.json 785 bytes {1} [built]
  [102] ./lib/languages/fr.json 716 bytes {1} [built]
  [104] ./~/rx-angular/dist/rx.angular.js 21.3 kB {1} [built]
  [105] ./~/rx/dist/rx.all.js 438 kB {1} [built]
  [133] ./lib/components/completeBlock/completeBlock.scss 1.28 kB {1} [built]
  [134] ./lib/components/home/home.scss 1.25 kB {1} [built]
  [135] ./lib/components/page1/page1.scss 1.25 kB {1} [built]
  [136] ./lib/components/rightMenu/rightMenu.scss 1.27 kB {1} [built]
  [137] ./lib/scss/style.scss 1.23 kB {1} [built]
  [140] ./~/util/support/isBufferBrowser.js 203 bytes {1} [built]
  [141] ./~/util/util.js 15.6 kB {1} [built]

Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 538 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./lib/index.ejs 786 bytes {0} [built]
        [1] ./~/lodash/lodash.js 537 kB {0} [built]
        [2] (webpack)/buildin/module.js 251 bytes {0} [built]

Thank you :)

kevincaradant commented 7 years ago

OK I close this issue because I change my way to do. I have some others problems but it's not link anymore with this issue