Adding a UI framework

[manavsehgal]

This issue combines several prior issues around Scss/jQuery/Bootstrap integration.

Angular community has a choice of UI frameworks to consider. Bootstrap, Semantic UI, Ionic, Material UI... among others. Can we showcase (with sample components, webpack integration...) integration of one UI framework using best practices followed by the starter...

• Using Scss in modular way - selective UI framework components for minimal payload.
• Integrating UI framework JS modules honoring Angular and Webpack requirements.

We need to vote on one such framework for integration, before considering the implementation.

• Bootstrap, Material will most likely be implemented in a project similar to Angular Bootstrap or Angular Material...
• Ionic is self-contained and already implementing Angular 2 + Ionic 2 integration on their own...
• Among the UI frameworks I find Semantic UI to be most comprehensive and flexible in terms of integration and customization surface...

+1 Semantic UI

[RainingNight]

+1 Angular Material

[PatrickJS]

I have a version of the repo with ng2-material working. I ended up not merging it since there was a lot of overhead. I probably need to write a how to extend wiki

[manavsehgal]

Writing a wiki to explain integration with various UI frameworks seems a good idea as well.

[quanterion]

I vote for Material Design. Also It would very helpful to add authentication with UI. IMHO it is very useful in starter kits.

[manavsehgal]

@RemKolomna Thanks for voting. Auth seems to be a separate thread, I agree an important one.

[fesor]

I agree, there is not so many examples of how to implement it with angular. At least some strategies should be described in wiki.

[manavsehgal]

Official Angular guidance doc for ng-material 2.

[MurhafSousli]

I vote for angular2 material

[manavsehgal]

Thanks for adding Wiki on Bootstrap 4 integration

[manavsehgal]

Just started coding a sample app forking this starter. Demo use of sass/scss at app level and component level (see feature component). Simple example introducing theming and flexbox layouts using scss. https://github.com/manavsehgal/AngularPages

[dsebastien]

+1 for Angular material :)

[manavsehgal]

Quick count on votes, wiki and issues:

Angular Material = 5 votes > Bootstrap 4 = 1 wiki, 2 issues > Semantic UI = 1 vote
Sass/Scss = 5 issues > Less = 1 issue

[PatrickJS]

I rather include instructions on how to install either one than force developers to start off with one

[ollwenjones]

+1 for instructions / example to add either one. A good starter project shouldn't be saddled with too many dependencies a dev may or may not need for his/her next project.

[phil-lgr]

+1 for instructions / example to add either one, I think it is better to
show example on how to install sass css, fonts (as new to Webpack, it was
not so easy to load fonts) and let devs decide :)

On Fri, Jan 22, 2016 at 9:23 AM, Sam Jones notifications@github.com wrote:

+1 for instructions / example to add either one. A good starter project
shouldn't be saddled with too many dependencies a dev may or may not need
for his/her next project.

—
Reply to this email directly or view it on GitHub
#199 (comment)
.

Philippe Léger

Programmer (front-end) | [image: LinkedIn]
https://ca.linkedin.com/pub/philippe-l%C3%A9ger/29/57/14b|
pleger2@gmail.com | 514-799-8461

[phil-lgr]

@manavsehgal thank you for https://github.com/manavsehgal/AngularPages, really helped me figure out how to generate style for components! Potentially a great addition to the boilerplate..

[manavsehgal]

@phil-lgr cheers for the note. I will discuss with @gdi2290 for inclusion into core (smiles).

[clouless]

regarding boostrap 4. I think there is a little mistake in the doc:
https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

You should not use bootstrap-sass package since it is bootstrap 3. And use config file .bootstraprc to tell bootstrap-loader that it is bootstrap v4 (which already contains scss files): https://github.com/shakacode/bootstrap-loader/blob/master/.bootstraprc-4-default

I will try to figure it out myself but it will take some time.

UPDATE: ✅ I got it working without bootstrap-sass by adding the following to main.ts

import 'zone.js';
import 'reflect-metadata';
import 'jquery';
import 'bootstrap-loader';

Without zone and reflect-metadata angular won't run. With the two lines included it runs but I got some other weird errors which I will ignore for now.

I used:

  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "bootstrap": "^4.0.0-alpha.2",
    "bootstrap-loader": "^1.0.8",
    "es7-reflect-metadata": "^1.5.5",
    "zone.js": "0.5.14"
...

[NickClark]

My biggest issue right now with styles, is keeping the source maps. Otherwise, I've been opting for the following config:

{ test: /\.scss$/,  loaders: ['to-string', 'css?sourceMap', 'sass?sourceMap'] },

This allows me to keep using the css-loader to resolve url()s.

[cagataycivici]

How about PrimeNG?

http://www.primefaces.org/primeng/

[alvipeo]

Let's add every UI lib to the project! ;)

[fesor]

@alvipeo this is actually good idea, it just means that we should make yoman generator.

[alvipeo]

Exactly. Let's leave the project alone and not make it fat.

[joshwiens]

Having done quite a bit of this lately and I would suggest going the route @gdi2290 suggested.

Fork it and create a walkthrough on how to add, material2/ng2-bootstrap/sass/whatever
Open a PR for the readme and have the repo added to a list of projects that have been extended.

It simplifies pulling in updates from the upstream repository ( this one ) and still provides value to the community using it without bloating upstream.

[MurhafSousli]

@cagataycivici did you find a way to integrate it? I can't get it to work

[msegers]

Sooo where did Material2 go It's gone from the project?

[PatrickJS]

there's a material2 branch that is always up-to-date
https://github.com/AngularClass/angular2-webpack-starter/tree/material2

[VivekWisdom]

So Just to confirm we need to clone the material2 branch to use the material UI?

[joshwiens]

@VivekWisdom - You need to checkout the material2 branch. The modifications you need to use @angular-material2 exist there.

[holms]

Anyone PLEASE can tell me where the hell is material2 branch???

[VivekWisdom]

Looks to me that material 2 is integrated in default branch :)

[romelgomez]

@holms it was deleted #1199 , To add material see this gist: https://gist.github.com/romelgomez/106625de08bbf68a2ca2b5c8aa93dcc8