问如何使用Webpack、组件和OclazyLoad使用ui-router加载组件
EN

Stack Overflow用户

提问于 2016-11-03 22:46:38

回答 1查看 1.8K关注 0票数 2

我目前正在尝试使用带有angular组件和ui的OcLazyLoad -router 1.0.0和Webpack 1。

但是我不知道如何正确地使用带有ui-view="MainView"和ui-view="rightMenuView"的views对象来显示html视图。其次，我想直接加载组件，而不是templateProvider、控制器等(位于ui路由器中)。我看了很多教程和现有的项目，但我没有找到这个用例的任何示例。

下面是我的一些代码片段：

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;

然后是路由器(ui- config.js )：

.....
.....
$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中以特定的方式使用angular的templateCache吗？提前谢谢你。

顺便说一下:这是视图Page1：

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

oclazyload

angularjs

angular-ui-router

webpack

回答 1

Stack Overflow用户

发布于 2016-11-07 07:11:00

请参考我的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);
    }
}

lazy-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;

lazy-child.config.js

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

export default configure;