These are chat archives for AngularClass/angular2-webpack-starter

2nd
Mar 2016
Artur Rozwalak
@arozwalak
Mar 02 2016 08:39
hi guys, I was wondering if it's possible to configure webpack for production version to keep angular 2 components in separate files rather than putting everything in one big file?
I'm quite new to webpack and still can't understand vision about packing everything inline ;)
matthew harwood
@matthewharwood
Mar 02 2016 11:52
You package everything inline for file size. If you want non inline code just don't use build.
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:28
@Spittal appears there is an issue with the latest package.json dependencies. Explicitly add "reflect-metadata": "0.1.2" should solve that.
"dependencies": { "angular2": "2.0.0-beta.7", "bootstrap": "^3.3.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "es7-reflect-metadata": "1.5.5", "ng2-bootstrap": "^1.0.5", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" }, "devDependencies": { "compression-webpack-plugin": "^0.3.0", "copy-webpack-plugin": "^1.1.1", "css-loader": "^0.23.1", "es6-promise-loader": "^1.0.1", "exports-loader": "^0.6.2", "expose-loader": "^0.7.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.8.1", "http-server": "^0.8.5", "imports-loader": "^0.6.5", "istanbul-instrumenter-loader": "^0.1.3", "json-loader": "^0.5.4", "karma": "^0.13.19", "karma-chrome-launcher": "^0.2.2", "karma-coverage": "^0.5.3", "karma-jasmine": "^0.3.7", "karma-mocha-reporter": "^1.1.5", "karma-phantomjs-launcher": "^1.0.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "1.7.0", "node-sass": "^3.4.2", "phantomjs-polyfill": "0.0.1", "phantomjs-prebuilt": "^2.1.4", "protractor": "^3.0.0", "raw-loader": "0.5.1", "reflect-metadata": "0.1.2", "remap-istanbul": "^0.5.1", "rimraf": "^2.5.1", "sass-loader": "^3.1.2", "source-map-loader": "^0.1.5", "style-loader": "^0.13.0", "ts-helper": "0.0.1", "ts-loader": "^0.8.1", "ts-node": "^0.5.5", "tsconfig-lint": "^0.5.0", "tslint": "^3.3.0", "tslint-loader": "^2.1.0", "typedoc": "^0.3.12", "typescript": "1.7.5", "typings": "^0.6.7", "url-loader": "^0.5.7", "webpack": "^1.12.13", "webpack-dev-server": "^1.14.1", "webpack-load-plugins": "^0.1.2", "webpack-md5-hash": "^0.0.4" },
Jamie Spittal
@Spittal
Mar 02 2016 21:29
@jkyoutsey Holy crap! what impecible timing
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:29
This works for dev for me. I can't get a prod build to run though. OOM errors.
Jamie Spittal
@Spittal
Mar 02 2016 21:29
Well, I’m getting things to build all well and good… but I’m getting errors on Prod from es7-reflect-metadata
in particular it’s failing with Uncaught TypeError: crypto.randomBytes is not a function
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:29
Ah, yeah, that too. "1.5.5"
Later versions have the crypto issue.
Jamie Spittal
@Spittal
Mar 02 2016 21:30
I see
1.5.5 will fix it up hey?
That’s nice to know
thanks
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:30
Can you npm run build:prod ?
Jamie Spittal
@Spittal
Mar 02 2016 21:30
I can, yes
let me send you my package (I’ve added a few postcss things)
"dependencies": {
    "angular2": "2.0.0-beta.7",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.33.3",
    "es7-reflect-metadata": "^1.5.5",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15",
    "ng2-translate": "^1.7.2"
  },
  "devDependencies": {
    "compression-webpack-plugin": "^0.3.0",
    "copy-webpack-plugin": "^1.1.1",
    "css-loader": "^0.23.1",
    "es6-promise-loader": "^1.0.1",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.9.0",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.21",
    "karma-chrome-launcher": "^0.2.2",
    "karma-coverage": "^0.5.3",
    "karma-jasmine": "^0.3.7",
    "karma-mocha-reporter": "^1.1.6",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.7.0",
    "phantomjs-polyfill": "0.0.1",
    "phantomjs-prebuilt": "^2.1.4",
    "protractor": "^3.1.1",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.5.1",
    "rimraf": "^2.5.2",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.0",
    "ts-helper": "0.0.1",
    "ts-loader": "^0.8.1",
    "ts-node": "^0.5.5",
    "tsconfig-lint": "^0.6.0",
    "tslint": "^3.3.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.3.12",
    "typescript": "1.8.2",
    "typings": "^0.6.8",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1",
    "webpack-load-plugins": "^0.1.2",
    "webpack-md5-hash": "^0.0.5",
    "webpack-validator": "^1.0.0-beta.4",
    "postcss-cssnext": "^2.4.0",
    "postcss-import": "^8.0.2",
    "postcss-loader": "^0.8.0",
    "postcss-reporter": "^1.3.1"
  },
Dave
@aios
Mar 02 2016 21:35
anyone included jwt tokens with router in angular2-webpack-starter?
Jamie Spittal
@Spittal
Mar 02 2016 21:35
@aios haven’t yet, but will be doing so later on today
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:35
@Spittal If you use es7-reflect-metadata: ^1.5.5 you'll get a later version. Lose the ^
Jamie Spittal
@Spittal
Mar 02 2016 21:35
Yeah!
Literally just did that
hahah
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:36
:thumbsup:
Jamie Spittal
@Spittal
Mar 02 2016 21:36
Thanks for double checking
hahah
Jamie Spittal
@Spittal
Mar 02 2016 21:43

oh boy @jkyoutsey

Uncaught TypeError: crypto.randomBytes is not a function
Uncaught TypeError: Cannot assign to read only property 'length' of function 'function Map() {
        this._keys = [];
        this._values = [];
        this._cache = exports.cacheSentinel;
    }'

I’m getting both of those now with 1.5.5

Jared Youtsey
@jkyoutsey
Mar 02 2016 21:43
@Spittal how big is your app? I've built a login service and component and a few others. Build just gets slower and slower, and prod build hangs at 90% optimize assets
Jamie Spittal
@Spittal
Mar 02 2016 21:44
Mine is pretty big. Over 30 components
2 services.
a lot of ui
I’ve had 3 developers on it full time
We have yet to push to staging though because of this crypto bug.
The prod build isn’t too bad at all
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:46
Hmm, must be related to something else.
That error is coming from typescript. 1.8x has it. 1.7.5 does't
does not
If you don't need something asap in 1.8 go back to 1.7.5 and that will all go away.
Jamie Spittal
@Spittal
Mar 02 2016 21:47
thakns
Thanks
Awesome
You’re a magnate
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:48
I think I'm more of a magnet the past few days. Everything wrong that can happen... :D
Jamie Spittal
@Spittal
Mar 02 2016 21:48
Hahaha
Killing the puns
I’m already so sold on Angular2 and wouldn’t go back to 1
but man, I miss the stability.
Thank goodness for resources like this chat.
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:49
Yeah, it's a bit like DLL hell from the 2000's
Jamie Spittal
@Spittal
Mar 02 2016 21:51
Hahaha
Oh man, more errors have you seen this before in your webpack log now
(7,8): error TS2656: Exported external package typings file '/var/www/apps/sexyhair-community.com/node_modules/es7-reflect-metadata/es7-reflect-metadata.d.ts' is not a module. Please contact the package author to update the package definition.
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:52
webpack logs?! really? where and how?
but, no, haven't seen that error.
Jamie Spittal
@Spittal
Mar 02 2016 21:53
Well like in terminal, when I run webpack.
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:54
This works for me:
"dependencies": { "angular2": "2.0.0-beta.8", "bootstrap": "^3.3.6", "es6-promise": "^3.1.2", "es6-shim": "^0.33.3", "es7-reflect-metadata": "1.5.5", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" }, "devDependencies": { "compression-webpack-plugin": "^0.3.0", "copy-webpack-plugin": "^1.1.1", "css-loader": "^0.23.1", "es6-promise-loader": "^1.0.1", "exports-loader": "^0.6.3", "expose-loader": "^0.7.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.9.0", "http-server": "^0.9.0", "ie-shim": "^0.1.0", "imports-loader": "^0.6.5", "istanbul-instrumenter-loader": "^0.2.0", "json-loader": "^0.5.4", "karma": "^0.13.21", "karma-chrome-launcher": "^0.2.2", "karma-coverage": "^0.5.3", "karma-jasmine": "^0.3.7", "karma-mocha-reporter": "^1.1.6", "karma-phantomjs-launcher": "^1.0.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "1.7.0", "node-sass": "^3.4.2", "phantomjs-polyfill": "0.0.1", "phantomjs-prebuilt": "^2.1.4", "protractor": "^3.1.1", "raw-loader": "0.5.1", "reflect-metadata": "0.1.2", "remap-istanbul": "^0.5.1", "rimraf": "^2.5.2", "sass-loader": "^3.1.2", "source-map-loader": "^0.1.5", "style-loader": "^0.13.0", "ts-helper": "0.0.1", "ts-loader": "^0.8.1", "ts-node": "^0.5.5", "tsconfig-lint": "^0.6.0", "tslint": "^3.3.0", "tslint-loader": "^2.1.0", "typedoc": "^0.3.12", "typescript": "1.7.5", "typings": "^0.6.8", "url-loader": "^0.5.7", "webpack": "^1.12.14", "webpack-dev-server": "^1.14.1", "webpack-load-plugins": "^0.1.2", "webpack-md5-hash": "^0.0.5" },
ugh, markdown isn't working for me...
Jamie Spittal
@Spittal
Mar 02 2016 21:54
Oh yeah?
That’s a shame
it’s okay I’ll format it
Thanks for the help
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:54
  "dependencies": {
    "angular2": "2.0.0-beta.8",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.33.3",
    "es7-reflect-metadata": "1.5.5",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "compression-webpack-plugin": "^0.3.0",
    "copy-webpack-plugin": "^1.1.1",
    "css-loader": "^0.23.1",
    "es6-promise-loader": "^1.0.1",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.9.0",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "json-loader": "^0.5.4",
    "karma": "^0.13.21",
    "karma-chrome-launcher": "^0.2.2",
    "karma-coverage": "^0.5.3",
    "karma-jasmine": "^0.3.7",
    "karma-mocha-reporter": "^1.1.6",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.7.0",
    "node-sass": "^3.4.2",
    "phantomjs-polyfill": "0.0.1",
    "phantomjs-prebuilt": "^2.1.4",
    "protractor": "^3.1.1",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.2",
    "remap-istanbul": "^0.5.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^3.1.2",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.0",
    "ts-helper": "0.0.1",
    "ts-loader": "^0.8.1",
    "ts-node": "^0.5.5",
    "tsconfig-lint": "^0.6.0",
    "tslint": "^3.3.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.3.12",
    "typescript": "1.7.5",
    "typings": "^0.6.8",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1",
    "webpack-load-plugins": "^0.1.2",
    "webpack-md5-hash": "^0.0.5"
  },
Jamie Spittal
@Spittal
Mar 02 2016 21:55
What does your polyfills.ts file look like,
because my package looks the same unfortunately.
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:58
I'm getting hammered by this:
> webpack --config webpack.prod.config.js --progress --profile --colors --display-error-details --display-cached

 10% 0/2 build modulests-loader: Using typescript@1.7.5 and /Users/JARVIS/src/project7/tsconfig.json
18359ms build modules     
67ms seal
123ms optimize
436ms hashing
70ms create chunk assets
7ms additional chunk assets 
4939ms optimize chunk assets
 90% optimize assets
<--- Last few GCs --->

   81872 ms: Mark-sweep 1358.8 (1456.5) -> 1359.1 (1456.5) MB, 1716.3 / 0 ms [allocation failure] [GC in old space requested].
   83524 ms: Mark-sweep 1359.1 (1456.5) -> 1359.1 (1456.5) MB, 1651.6 / 0 ms [allocation failure] [GC in old space requested].
   85263 ms: Mark-sweep 1359.1 (1456.5) -> 1355.6 (1456.5) MB, 1738.9 / 0 ms [last resort gc].
   86894 ms: Mark-sweep 1355.6 (1456.5) -> 1359.1 (1456.5) MB, 1631.7 / 0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0xa915bfb4629 <JS Object>
    1: objectTypeRelatedTo(aka objectTypeRelatedTo) [/Users/JARVIS/src/project7/node_modules/typescript/lib/typescript.js:17942] [pc=0x754a6af1f69] (this=0xa915bf041b9 <undefined>,source=0x18bdb47a2fa9 <a TypeObject with map 0x3c40f0b41669>,target=0x226293bc3a19 <a TypeObject with map 0x3c40f0b41039>,reportErrors=0xa915bf04251 <false>)
    2: isRelatedTo(aka isRelatedTo) [/Users/JARVIS/src/proje...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
Abort trap: 6
Jamie Spittal
@Spittal
Mar 02 2016 21:59
oh boy...
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:59
This happens on any npm run build:prod or on any subsequent hot recompile.
Jamie Spittal
@Spittal
Mar 02 2016 21:59
Looks like a OOM
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:59
yep
Jamie Spittal
@Spittal
Mar 02 2016 21:59
Are you running this in a VM?
Jared Youtsey
@jkyoutsey
Mar 02 2016 21:59
nope
System isn't taxed. It's something wrong with node/webpack
Jamie Spittal
@Spittal
Mar 02 2016 22:00
Hmm. Maybe node/webpack isn’t allocing what it needs?
Jared Youtsey
@jkyoutsey
Mar 02 2016 22:01
I see others filing issues about it. So at least I'm not alone
Jamie Spittal
@Spittal
Mar 02 2016 22:03
Dang I wish I could be as much help to you as you were to me
Jared Youtsey
@jkyoutsey
Mar 02 2016 22:04
ah, that's life