如何使用Webpack，Components和OclazyLoad

时间：2016-11-03 22:46:38

标签： angularjs angular-ui-router webpack oclazyload

我目前正在尝试将OcLazyLoad与角度组件和ui-router 1.0.0以及Webpack 1一起使用。

但我无法弄清楚如何使用ui-view="MainView"和ui-view="rightMenuView"的视图对象正确显示html视图。 其次，我想直接加载组件而不是templateProvider，controller等（位于ui-router中）。我查看了很多教程和现有项目，但是我没有找到这个用例的任何示例。

以下是我的一些代码段：

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

然后这是我的page1.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-router）：

.....
.....
$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。 我是否要在Webpack中使用具有特定方式的angularCacheCache？ 先感谢您。

BTW：这是视图Page1： enter image description here

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"
  }
}

1 个答案:

答案 0 :(得分：0)

请参阅我的github project。 Demo。这可能会解决您的问题。

简而言之，以下方法用于延迟加载

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);
    }
}

懒惰child.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;

懒惰child.config.js 

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

export default configure;
相关问题
最新问题