AngularClass/NG6-starter

Starter for Angular + ES6 + Webpack

Demetri Ganoff

@dganoff

More specifically I'm wondering at what point do I simply add components to an Angular module rather than create a new Angular module? For example, when I use the gulp component task to create a module and want to add more components related (nested) to that module... Would I simply create aNestedComponent.component.js instead of creating a new Angular module using gulp component --name aNestedComponent

Demetri Ganoff

@dganoff

Anyone?... :)

Sergey Protko

@fesor

@dganoff out of the box?) I use file templates in webstorm)

Demetri Ganoff

@dganoff

Hey @fesor , I actually have the generator working fine. My question was more around the decision to create a new Angular module for a new component or just add it to an existing Angular module

Sergey Protko

@fesor

@dganoff it's up to you. I move components to separate module if and only of I will use it in another project. Or if I have very large application, then I split it to separate modules.

Demetri Ganoff

@dganoff

@fesor So, you typically have just one module for all your components/services in the app (unless they need to be reused in another project)?

smccamley

@smccamley

Hi guys and gal's sorry to be a pain. I've just cloned, installed deps, npm installed and run 'gulp' and I have

/Users/user/.nvm/versions/node/v5.9.1/lib/node_modules/gulp/bin/gulp.js:129
gulpInst.start.apply(gulpInst, toRun);
^

TypeError: Cannot read property 'apply' of undefined
at /Users/user/.nvm/versions/node/v5.9.1/lib/node_modules/gulp/bin/gulp.js:129:19
at _combinedTickCallback (node.js:376:9)
at process._tickCallback (node.js:407:11)
at Function.Module.runMain (module.js:449:11)
at startup (node.js:142:18)
at node.js:939:3

Is there anyone that can help :)

smccamley

@smccamley

No problem here, just needed to remove and reinstall gulp

Thank you if anyone was looking into it for me :)

Javier Ruiz Vázquez

@javarv87

Hey anybody knows how to integrate bower components into my project

Darth Skywalker

@adityaparab

@javarv87 : Yes. What do you want to do?

Javier Ruiz Vázquez

@javarv87

i want to integrate angular-sails and bootstrap

and angular-ui @adityaparab

Javier Ruiz Vázquez

@javarv87

And i want to add and assets folder

for example for de favicon and other images and fonts

Javier Ruiz Vázquez

@javarv87

I could resolve the problem with bootstrap, but i steel with the images path, when i use gulp webpack to production, dont pass my assets folder
I have my project structure like this
client
|--- app
|--- assets
|--- all my images here

EyeAmN8

@mrnatelantz_twitter

Anyone have any issues when running gulp webpack ?
it does not show any errors, but the app doesnt do anything when ran. works from the webpack dev server

Nitin Mishra

@nkmdev

Hi guys, am new to web-pack, I have one question how to use font-awesome in project

Sergey Protko

@fesor

@nitinkumarmishra https://github.com/AngularClass/NG6-starter/pull/129/commits/d6306f76c587fb0890e6e8b2d4de203a77dd2157

Nitin Mishra

@nkmdev

thanks @fesor

Nitin Mishra

@nkmdev

@fesor one more question how to inject a particular js, css file from node_modules like angular-translate.js

Sergey Protko

@fesor

@nitinkumarmishra real about import in JS

ES6 modules

Nitin Mishra

@nkmdev

suppose am using a old js file that does not contain export (in that case)

Sergey Protko

@fesor

@nitinkumarmishra it doesn't metter. It will be executed and since it doesn't uses modules it will expose API as global variable.

Nitin Mishra

@nkmdev

ok let me try

Nitin Mishra

@nkmdev

Hi guys, live reload is not working(any idea)

Darth Skywalker

@adityaparab

@nitinkumarmishra : Code please

Nitin Mishra

@nkmdev

means webpack config file

Nitin Mishra

@nkmdev

@adityaparab problem occurs after font loading

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
devtool: 'sourcemap',
entry: {},
module: {
loaders: [
{ test: /.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
{ test: /.(png)$/, loader: 'url-loader?limit=100000' },
{ test: /.woff(2)?(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /.ttf(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /.eot(\?v=\d+.\d+.\d+)?$/, loader: "file" },
{ test: /.svg(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: /.html$/, loader: 'raw' },
{ test: /.(sass|scss)$/, loader: 'style!css!sass' },
{ test: /.css$/, loader: 'style!css' }
]
},
plugins: [
// Injects bundles in your index.html instead of wiring all manually.
// It also adds hash to all injected assets so we don't have problems
// with cache purging during deployment.
new HtmlWebpackPlugin({
template: 'client/index.html',
inject: 'body',
hash: true
}),

// Automatically move all modules defined outside of application directory to vendor bundle.
// If you are using more complicated project structure, consider to specify common chunks manually.
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module, count) {
    return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
  }
})

]
};

T-G-G

@T-G-G

Hey people prob a noob question but can anyone tell me why webpack is including loads of es6 and es7 modules into the dist code??

Sergey Protko

@fesor

@T-G-G what do you mean?

T-G-G

@T-G-G

This message was deleted

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        //console.log(module.rawRequest);
        console.log(module.resource);
        return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
      }
    })

If you look at the logs of that shows all kinda es6 and 7 stuff being webpacked and the bundles seem comparatively huge compared to vanilla angular stuff.

T-G-G

@T-G-G

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        //console.log(module.rawRequest);
        console.log(module.resource);
        return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1;
      }
    })

If you look at the logs of that shows all kinda es6 and 7 stuff being webpacked and the bundles seem comparatively huge compared to vanilla angular stuff.

T-G-G

@T-G-G

Also found in the vendor.bundle.js.map, its all the core-js modules but don't know what it would have es7 stuff loaded when i changed the .bablerc to have just es2015

Sergey Protko

@fesor

@T-G-G all this shim stuff is added in gulpfile.babel.js

you could turn it off and only use polyfils that you need

T-G-G

@T-G-G

Again prob quiet noobish but how would I do that all i can see in the gulpfile.babel.js is 'babel-polyfill' relating to babel in anyway, how would I make it so that it only loads those that are required or even only the es6 stuff at least?

Sergey Protko

@fesor

is 'babel-polyfill' relating to babel in anyway

this is ALL polyfils, you can import only that you need

T-G-G

@T-G-G

@fesor Cheers!!! playing with the different pre-set's now don't suppose anyone knows a lightweight es2015 as the babel-preset-es2015 is actually bigger weirdly

Sergey Protko

@fesor

@T-G-G AngularClass/NG6-starter#143

T-G-G

@T-G-G

@fesor You sir are a legend!!

Arturo Romero

@arturoromeroslc

Hello Friends!

I am looking for some help. I am trying to import rx-angular into my application by add the following in home.js:

import angular from 'angular';
import homeComponent from './home.component';
import rx from 'rx-angular';

let homeModule = angular.module('home', [
    'firebase',
    rx
])

.component('home', homeComponent)

.name;

export default homeModule;

I am however getting this error from webpack, do ya'll any idea of what I am doing worng. Thanks for the help.

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.components due to:
Error: [$injector:modulerr] Failed to instantiate module home due to:
Error: [$injector:modulerr] Failed to instantiate module {"internals":{},"config":{"longStackSupport":false,"useNativeEvents":false},"helpers":{},"doneEnumerator":{"done":true},"ReactiveTest":{"created":100,"subscribed":200,"disposed":1000}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

proJS

@dssorokin

Hi guys. My problem is that ui-router events $stateChangeStart and $stateChangeSuccess doesn't work in this template. I put this code

$rootScope.$on('$stateChangeStart', function(){
console.log('start');
})
$rootScope.$on('$stateChangeSuccess', function(){
console.log('success');
})
at run function in app.js file. When i change the state nothing happend.

Sergey Protko

@fesor

@dssorokin please read documentation for uiRouter 1.0beta

@dssorokin i didn't tried uiRouter 1.0 yet so can't help you with that. I only know that this is not starter's problem. You could also downgrade to latest stable uiRouter release.

proJS

@dssorokin

@fesor thank you. It turned out that ui-routes events has been deprecated in new version.

Ramy Tamer

@ramytamer

Hi guys, could you please tell me how to import jquery-ui in my project along with all the required css and images from the library?

Where communities thrive

People

Repo info

Activity