AngularClass/NG6-starter

Starter for Angular + ES6 + Webpack

Oskar Kosowski

@okosowski

@laedanthehuman It nice to discover how you can write the code. But for commercial project I
suggests write all from zero :)

Sergey Protko

@fesor

@okosowski well... I use ng6-starter in commercial projects, but with webpack

and it tuned for my needs

Manoel Freitas

@manoeljosefneto

@fesor how did you tuned your projects?

Sergey Protko

@fesor

@laedanthehuman less instead of stylus, bootstrap by default, uiRouter 1.0 beta, component as single file (i.e. template + controller + component definition in a dingle js file).

I don't use templateUrl since it allows developers to build large HTML and putting it into js file forces to keep templates small

Manoel Freitas

@manoeljosefneto

@fesor wow, cool i get sass instead of stylus, but i'm don't get bootstrap by default yet

@fesor how do u get that ?

Sergey Protko

@fesor

@laedanthehuman just installed)

Manoel Freitas

@manoeljosefneto

npm install bootstrap o.O

or bootstrap loader ?

Sergey Protko

@fesor

angular-ui-bootstrap + less loader + configure file/url loader to correctly handle icons

Manoel Freitas

@manoeljosefneto

just instaled right ?

Sergey Protko

@fesor

https://github.com/AngularClass/NG6-starter/pull/129/commits/d6306f76c587fb0890e6e8b2d4de203a77dd2157 - most complicated part

Manoel Freitas

@manoeljosefneto

hummm, i see

Hamed Nourhani

@hamednourhani

hi must i use socket.io alongside angular to connect server socket or there is a builltin functionality with ng?

Sergey Protko

@fesor

@hamednourhani nothing builtin, use socket-io

@nikita-bosenko or one of adapter for angular

Demetri Ganoff

@dganoff

Anyone here able to answer a quick question about nesting components with ng6-starter out of the box?

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

]
};

Where communities thrive

People

Repo info

Activity