search

PatrickJS / NG6-starter

:ng: An AngularJS Starter repo for AngularJS + ES6 + Webpack
https://angularclass.github.io/NG6-starter
Apache License 2.0
1.91k stars 1.35k forks source link

[feature request] integration with ocLazyLoad #123

Closed samithaf closed 8 years ago

samithaf commented 8 years ago

When developing large scale application it is good to lazy load modules. Therefore it will be nice if there is an example how to integrate with ocLazyLoad

fesor commented 8 years ago

@samithaf we already cover this in wiki: https://github.com/AngularClass/NG6-starter/wiki/Lazy-Loading

As for feature request, in most of the cases you don't need lazy loading at all. This is very advanced use case. Even if app is very large, it is easier just to split it up into several applications and make use of http cache for assets. Also angular 1.6 will be able to load modules after application bootstrapping.

Closing this for now, but we can continue discussion.

diegochavez commented 8 years ago

I've tried the lazy loading demo and looks like is not working, is not loading the component, if just add regular HTML code on the template did render, but the component is not available.

This is my code based on the demo

https://gist.github.com/diegochavez/7dba5061795965b43d370246586d1b17

oric01 commented 8 years ago

@diegochavez Same as you. The component is loaded (about.js then about.component) but it seems that the controller is loaded but not compiled (constructor is not invoked).

fesor commented 8 years ago

@oric01, @diegochavez could you provide your use case? Why do you even need to lazy loading for single component?

As for issue, could you prepare plunker example?

diegochavez commented 8 years ago

@fesor @oric01 Here's a basic demo, i just pulled a brand new repo clone and add the lazy load to the about component.

demo http://volumens.com/proyectos/ng6-lazy-load/

The reason why i'm looking the lazy load is because i'm using this route components as a container components then i load a bunch of dum components inside so it make sense load async if you are working with components like a.1.js a.2.js -> a.bundle.js b.1.js b.2.js -> b.bundle.js

fesor commented 8 years ago

@diegochavez will look at it tomorrow, thanks.

As for your usecase... does your container components + deps > 50Kb in size (uglified + gzipped)?

diegochavez commented 8 years ago

@fesor Thanks for your time mate, right now is not a really big code base but i have some implementations which uses D3.js, NvD3.js with custom charts, I hope this could be lazy loaded inside of a lazy component.

fesor commented 8 years ago

@diegochavez well this is a good case, thanks!

jefflequeux commented 8 years ago

Can you fork the repo to see your entire code and help you to debug your use case?

diegochavez commented 8 years ago

@darkange69 Thanks,

Is not a problem related to my project is the implementation of the ocLazyLoad but you can just follow the instruction on the wiki and got the error by yourself on a fresh git clone of this repo.

Steps to setup lazy component. https://github.com/AngularClass/NG6-starter/wiki/Lazy-Loading

Take a look at this gist, this is how I'm using My use case https://gist.github.com/diegochavez/7dba5061795965b43d370246586d1b17

oric01 commented 8 years ago

@diegochavez did you upgrade to babel 6 ?

oric01 commented 8 years ago

I just downgraded back to babel 5 and its working

diegochavez commented 8 years ago

@oric01 Good catch, could you share the package.json this should be pointed on the wiki docs.

oric01 commented 8 years ago

Sure. Just be aware that it contains dependencies that match my own needs. Sorry also, because at the moment my code is on a private repo (a POC for my current company) and I can't share my work...


{
  "name": "ng6-starter",
  "version": "0.0.1",
  "description": "Starter for Angular + ES6 + (Webpack or JSPM)",
  "main": "index.js",
  "dependencies": {
    "angular": "^1.5.0",
    "angular-ui-router": "^0.2.15",
    "lodash": "^4.11.2",
    "normalize.css": "^4.1.1",
    "oclazyload": "^1.0.9"
  },
  "devDependencies": {
    "angular-mocks": "^1.5.0",
    "babel-core": "^5.4.2",
    "babel-loader": "^5.0.0",
    "bootstrap-styl": "^5.0.5",
    "browser-sync": "^2.11.1",
    "chai": "^3.4.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.23.1",
    "css-modules-require-hook": "^4.0.0",
    "dirty-chai": "^1.2.2",
    "eslint": "^2.7.0",
    "eslint-config-airbnb": "^8.0.0",
    "eslint-config-angular": "^0.5.0",
    "eslint-plugin-angular": "^1.0.1",
    "eslint-plugin-disable": "^0.3.0",
    "eslint-plugin-react": "^5.0.1",
    "file-loader": "^0.8.5",
    "fs-walk": "0.0.1",
    "gulp": "^3.9.0",
    "gulp-eslint": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-template": "^4.0.0",
    "gulp-util": "^3.0.7",
    "html-webpack-plugin": "^2.16.1",
    "isparta-loader": "^2.0.0",
    "karma": "^0.13.9",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^1.0.1",
    "karma-coverage": "^1.0.0",
    "karma-html-reporter": "^0.2.7",
    "karma-mocha": "^1.0.1",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.4",
    "karma-webpack": "^1.5.1",
    "merge": "^1.2.0",
    "minimist": "^1.2.0",
    "mocha": "^2.3.0",
    "ng-annotate-loader": "0.1.0",
    "node-libs-browser": "^1.0.0",
    "node-string-pad": "0.0.4",
    "phantomjs-prebuilt": "^2.1.7",
    "q": "^1.4.1",
    "raw-loader": "^0.5.1",
    "run-sequence": "^1.1.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.0.0",
    "supports-color": "^3.1.2",
    "webpack": "^1.9.5",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.6.0",
    "yargs": "^4.6.0"
  },
  "scripts": {
    "test": "karma start"
  },
  "keywords": [
    "angular",
    "webpack",
    "es6"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/angularclass/NG6-starter.git"
  },
  "author": "AngularClass",
  "license": "Apache-2.0"
}
oric01 commented 8 years ago

Just be aware that now, due to babel 5 roll back, my karma.conf is broken...

diegochavez commented 8 years ago

@oric01 Thanks mate

fesor commented 8 years ago

@oric01 you can just roll back on 37bf3bee9c53eebda68afb7a96e182facce29374 which uses babel 5.

diegochavez commented 8 years ago

@oric01 @fesor I think rollback is not the best solution, could cause some limitations on use of some libraries, i'll try to work on the latest version and see what happen. because i added the the rollback version but some dependencies got broken.

Thanks guys, really appreciate time and effort, I hope we can came out with a good solution.

_babelCore.OptionManager is not a function at compile (/Users/u/Documents/apps/NG6-starter/node_modules/babel-register/lib/node.js:112:14) at loader (/Users/u/Documents/apps/NG6-starter/node_modules/babel-register/lib/node.js:158:14) at Object.require.extensions.(anonymous function) [as .js] (/Users/u/Documents/apps/NG6-starter/node_modules/babel-register/lib/node.js:168:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Liftoff.handleArguments (/Users/u/.nvm/versions/node/v4.4.4/lib/node_modules/gulp/bin/gulp.js:116:3) at Liftoff.<anonymous> (/Users/u/.nvm/versions/node/v4.4.4/lib/node_modules/gulp/node_modules/liftoff/index.js:193:16) at module.exports (/Users/u/.nvm/versions/node/v4.4.4/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)