Как загрузить компонент с помощью ui-router с помощью Webpack, Components и OclazyLoad

В настоящее время я пытаюсь использовать OcLazyLoad с компонентом angular и ui-router 1.0.0 и Webpack 1.

Но я не могу понять, как правильно отображать представление html, используя объект представлений с ui-view="MainView" и ui-view="rightMenuView". Во-вторых, я хотел бы загрузить компонент напрямую вместо templateProvider, контроллера и т. д. (находится в ui-маршрутизаторе). Я просмотрел множество руководств и существующих проектов, но не нашел ни одного примера для этого варианта использования.

Вот некоторые из моих фрагментов кода:

веб-пакет.config.js:

.......
.......
.......
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']
        }]
    },
......
......
......

Тогда это моя страница1.component.js:

import Page1View from './page1.html';
import './page1.scss';

class Page1 {
    static detailsComponent() {
        return {
            templateUrl: Page1View,
            controller: function () {
                this.name = 'Hello Page1';
            }
        };
    }
}

export default Page1.detailsComponent();

Затем модуль page1.module.js:

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

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

export default PAGE1MODULE;

Тогда это config.js (ui-маршрутизатор):

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

    .state('page1', {
        url: '/page1',
        views: {
            mainView: {
                templateProvider: ($q) => {
                    return $q((resolve) => {
                        // lazy load the view
                        require.ensure([], () => resolve(require("./components/page1/page1.html")));
                    });
                },
                controller: function () {
                    this.name = 'Hello Page1';
                }
            },
            rightMenuView: {
                templateProvider: ($q) => {
                    return $q((resolve) => {
                        // lazy load the view
                        require.ensure([], () => resolve(require("./components/rightMenu/rightMenu.html")));
                    });
                }
            }
        },
        resolve: {
            loadPage1Component: ($q, $ocLazyLoad) => {
                return $q((resolve) => {
                    require.ensure([], () => {
                        // load whole module
                        let module = require('./components/page1/page1.module');
                        $ocLazyLoad.load({name: 'page1'});
                        resolve(module.component);
                    });
                });
            }
        }
    })

Как видите, я переписал без component: 'page1', потому что не знаю, как мне это сделать, если я не загрузил component page1. Если вы видите лучший способ, я слушаю. Основная проблема заключается в том, что шаблон в templateProvider не отображается. Я вижу только URL. Должен ли я использовать templateCache angular определенным образом в Webpack? Заранее спасибо.

Кстати: это вид Страница 1: введите здесь описание изображения

И часть сборки Webpack:

....
....
chunk    {1} 1.bundle.js, 1.bundle.js.map 3.52 kB {0} [rendered]
   [20] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/components/page1/page1.scss 196 bytes {1} [built]
   [23] ./lib/components/page1/page1.html 271 bytes {1} {2} [built]
   [83] ./lib/components/page1/page1.component.js 1.39 kB {1} [built]
   [84] ./lib/components/page1/page1.module.js 408 bytes {1} [built]
  [133] ./lib/components/page1/page1.scss 1.25 kB {1} [built]
chunk    {2} 2.bundle.js, 2.bundle.js.map 271 bytes {0} [rendered]
   [23] ./lib/components/page1/page1.html 271 bytes {1} {2} [built]
....
....

Я вижу page1.html дважды, я не знаю, как этого избежать, но, похоже, он не блокирует, я думаю.

И, наконец, это мой package.json, возможно, это может быть полезно:

  "name": "",
  "version": "",
  "description":"",
  "main": "index.js",
  "scripts": {
    "prod": "rm -rf dist/* && cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
  },
  "dependencies": {
    "angular": "1.5.8",
    "angular-animate": "1.5.8",
    "angular-bootstrap-material": "0.1.4",
    "angular-loading-bar": "0.9.0",
    "angular-messages": "1.5.8",
    "angular-sanitize": "1.5.8",
    "angular-translate": "2.12.1",
    "angular-translate-loader-static-files": "2.12.1",
    "angular-ui-bootstrap": "2.2.0",
    "angular-ui-router": "1.0.0-beta.2",
    "angular-ui-router-anim-in-out": "1.0.2",
    "bootstrap": "3.3.7",
    "bootstrap-material-design": "0.5.10",
    "bootstrap-material-design-icons": "2.2.0",
    "cross-env": "3.1.3",
    "http-server": "0.9.0",
    "oclazyload": "^1.0.9",
    "rx": "4.1.0",
    "rx-angular": "1.1.3"
  },
  "devDependencies": {
    "angular-mocks": "1.5.8",
    "autoprefixer": "6.5.1",
    "babel-core": "6.17.0",
    "babel-loader": "6.2.5",
    "babel-plugin-transform-runtime": "6.15.0",
    "babel-polyfill": "6.16.0",
    "babel-preset-es2015": "6.16.0",
    "babel-runtime": "6.11.6",
    "css-loader": "0.25.0",
    "eslint": "3.8.1",
    "eslint-config-xo": "0.17.0",
    "eslint-loader": "1.6.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.24.0",
    "image-webpack-loader": "3.0.0",
    "imagemin-webpack-plugin": "1.2.1",
    "isparta-loader": "2.0.0",
    "jasmine-core": "2.5.2",
    "karma": "1.3.0",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.0.2",
    "karma-phantomjs-launcher": "1.0.2",
    "karma-sourcemap-loader": "0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "1.8.0",
    "less": "2.7.1",
    "less-loader": "2.2.3",
    "ng-annotate-loader": "0.2.0",
    "ng-annotate-webpack-plugin": "0.1.3",
    "ngtemplate-loader": "1.3.1",
    "node-sass": "3.10.1",
    "optimize-css-assets-webpack-plugin": "1.3.0",
    "path": "0.12.7",
    "postcss-loader": "1.0.0",
    "progress-bar-webpack-plugin": "1.9.0",
    "protractor": "4.0.9",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "1.6.0",
    "sass-lint": "1.9.1",
    "sass-loader": "4.0.2",
    "sasslint-webpack-plugin": "1.0.4",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "watch-ignore-webpack-plugin": "1.0.0",
    "webpack": "1.13.2",
    "webpack-dev-server": "1.16.2"
  }
}

webpack angularjs angular-ui-router oclazyload
person kevin caradant    schedule 03.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пожалуйста, обратитесь к моему проекту github. Демо. Это может решить вашу проблему.

Вкратце, для ленивой загрузки используются следующие методы.

parent.config.js

function configure($stateProvider) {
    $stateProvider.state("lazyChild", {
        lazyLoad: loadLazyState(function (resolve, $ocLazyLoad) {
            require.ensure([], function () {
                let lazyModule = require('./lazy-child/lazy-child.module');
                resolveLazyState(lazyModule, resolve, $ocLazyLoad);
        }, "lazyChild");
    });
})

util.js

export function loadLazyState(callback) {
    return (transition) => {
        let injector = transition.injector();
        let $ocLazyLoad = injector.get('$ocLazyLoad');
        let $q: IQService = injector.get('$q');
        return $q((resolve) => callback(resolve, $ocLazyLoad));
    };
}

export function resolveLazyState(lazyModule) {
    if (lazyModule && lazyModule.default) {
        $ocLazyLoad.load({ name: lazyModule.default });
        resolve(lazyModule);
    }
}

ленивый ребенок.module.js

import lazyChildComponent from './lazy-child.component';
import lazyChildConfig from './lazy-child.config';

const lazyChild = module('lazy-child', [])
    .component('lazyChildComponent', lazyChildComponent)
    .config(lazyChildConfig)
    .name;

export default lazyChild;

ленивый ребенок.config.js

function configure($stateProvider) {
    $stateProvider.state("lazyChild",{
        parent: "lazyParent",
        component: "lazyChildComponent",
    });
}

export default configure;
person Georgekutty Antony    schedule 07.11.2016