Почему Dynamic require (expression) с webpack не работает

Я пытаюсь лениво загрузить свое состояние маршрутов, используя код ниже

//router.js
//usage
$stateProvider
  .state('async', {
    url: '/async',
    templateUrl: require('!!file-loader?name=templates/[name].[ext]!./../../pages/somepage/page.html'),
    controller: 'asyncController',
    resolve: {
      deps: 
      asyncPreloading: resolverProvider.lazyload('../../pages/somepage/page.module.js')
    }
  })

«resolverProvider.lazyload( path) » когда пытается требовать (path), я получаю предупреждение, как

Критические зависимости:
30: 34-55 запрос зависимости является выражением

или

Критические зависимости:
30: 34-41 функция require используется таким образом, что зависимости не могут быть статически извлечены

ниже приведен код resolverProvider

//provider.js
'use strict';
export default function (app) {
  app.provider('resolver', resolverProvider);

  function resolverProvider() {
      this.$get = () => this;
      this.lazyload = lazyload;
  }

  function lazyload(module) {
    return (($q, $ocLazyLoad) => {
      "ngInject";

      const deferred = $q.defer();

      require.ensure([], function (require) {
          console.log(module);
          const asyncModule = require('../../pages/somepage/page.module.js'); // it works
          const asyncModule = require(module); // doesn't work
          $ocLazyLoad.load({
              name: asyncModule.name,
          });
          deferred.resolve(asyncModule.controller);
      });
      return deferred.promise;
    });
  }
}

Есть ли у кого-нибудь решение этой проблемы динамически требовать (выражение);

1 ответ

  1. решение С require.contextи webpack.

    Я создал webpackConfig.resolve.aliasуказывая на мой appRoot.

    Когда я делаю то require(path)я прохожу мой путь как Ан как Ан regex.

    //provider.js

    const asyncModule = require('_appRoot/' + moduleRegExp + '.js');

    checkout webpack подробнее.

    Моя конфигурация webpack выглядит так:

    // resolves modules
    resolve: {
      extensions: ['', '.js'],
      modulesDirectories: ['node_modules'],
      alias: {
        _appRoot:     path.join(_path, 'src', 'app'),
        _images:      path.join(_path, 'src', 'app', 'assets', 'images'),
        _stylesheets: path.join(_path, 'src', 'app', 'assets', 'styles'),
        _scripts:     path.join(_path, 'src', 'app', 'assets', 'js')
      }
    },
    

    и мои маршруты состояние, какasyncPreloading: resolverProvider.lazyload('pages\/async-page-example\/async.module')