AngularClass/angular2-webpack-starter

An Angular 2 Webpack Starter kit featuring Angular 2, Router, TypeScript, and Webpack by AngularClass

Paul van den Berg

@bergvandenp

@Nyctohylophobia the result of a webpack build is a js file. It's only that js file that you need to send to aws, right/

Sean Larkin

@TheLarkInn

It can also emit additional static assets

raparlasiva

@raparlasiva

in my angualr 2 project we are using bootstrap 4 and ng2 bootstrap

i tried to use datepicker but the icons are loading properly

it's loading glyicons

whereas in bootstrap 4 there are not glyicons..

any help would be appreciated

raparlasiva

@raparlasiva

how can i change the theme from bootstrap 3 to bootstrap 4

the datepicker styles defaults to bootstrap 3..wondering is there a theme change to apply to change it to bootstrap 4

Alex

@alvipeo

hi! I built the proj for production and I see it sends from requests every 2 sec. where is this coming from and why?

@Nyctohylophobia

@bergvandenp @TheLarkInn Yeah, after running build on the webpack, there is an assets folder and several .js .map files. Do I transfer these files directly to AWS?

Sean Larkin

@TheLarkInn

Well yeah, I think there actually is a S3 webpack plugin

That you can use

@Nyctohylophobia

@TheLarkInn I am using EC2 but thanks alot for the help. It worked!

Gerson Sosa

@haghar

Hello everyone, which router is used in this starter?

Gerson Sosa

@haghar

My question goes to the fact that the router in angular2 is gonna change and there is no stable version yet so how this is gonna be handled in this starter when new router is ready?

Alex

@alvipeo

guys, I'm trying to use new and shiny "@angular/router": "3.0.0-alpha.3" and I get this when build the project:

[default] d:/Documents/Visual Studio 2015/Projects/NewsNotifier/node_modules/@angular/router/directives/router_outlet.d.ts:10:5
    Duplicate identifier 'readonly'.
[default] d:/Documents/Visual Studio 2015/Projects/NewsNotifier/node_modules/@angular/router/directives/router_outlet.d.ts:10:14
    '=' expected.
[default] d:/Documents/Visual Studio 2015/Projects/NewsNotifier/node_modules/@angular/router/directives/router_outlet.d.ts:10:14
    Cannot find name 'isActivated'.
[default] d:/Documents/Visual Studio 2015/Projects/NewsNotifier/node_modules/@angular/router/directives/router_outlet.d.ts:10:25
    ';' expected.
[default] d:/Documents/Visual Studio 2015/Projects/NewsNotifier/node_modules/@angular/router/directives/router_outlet.d.ts:11:5
    Duplicate identifier 'readonly'.

and so on. any idea on the cause?

99% Cocoa

@rjlee7

Hi all! I'm trying to access a function in an external JS file (untyped), in my home component. First I’ve imported the file into vendor.ts with the import 'assets/js/agglinechart.js’; statement. The agglinechart.js basically contains a giant aggLineChart function (function aggLineChart() {.... }). How do I access this function within the home component environment? Would really appreciate your help..

Joe

@foxjazz

Any idea why the class alignright isn't honored?

<table class="herotable">
                    <tr>
                    <td>ask </td>    
                    <td class="alignright">volume </td>
                    <td>bid </td>
                    <td class="alignright">volume </td>
                    <td>range </td>
                    </tr>
                    <tr class="herotable" *ngFor="let md of data.l2pricedata" width="100em">
                        <td>{{md.priceSell}}(isk) </td>
                        <td class="alignright">{{md.volSell}} </td>
                        <td>{{md.priceBuy}}(isk) </td>
                        <td class="alignright">{{md.volBuy}} </td>
                        <td>{{md.Buyrange}} </td>
                    </tr>
                </table>


 .herotable .table{
        width: 100%;
        left: 5em;
    }
    .herotable .tr{
        width: 110em;
        color: #c0c9c7;

    }
    .alignright .td{
      text-align: right;
       color: #c0c9c7;
        margin: .08em .25em;
        border: 1px solid red;
        border-collapse: collapse;
        padding: 10px;
    }
    .herotable .th .td{
        color: #c0c9c7;
        margin: .08em .25em;
        border: 1px solid red;
        border-collapse: collapse;
        padding: 10px;
    }

Joe

@foxjazz

ok figured it out...

what about this:

 <td *ngIf="md.priceSell !== null">{{md.priceSell}} (isk) </td>

Joe

@foxjazz

events.js:160
      throw er; // Unhandled 'error' event
      ^
 Error
    at new JS_Parse_Error (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1526:18)
    at js_error (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:1534:11)
    at croak (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2026:9)
    at token_error (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2034:9)
    at unexpected (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2040:9)
    at semicolon (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2060:56)
    at simple_statement (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2240:73)
    at eval (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2113:19)
    at eval (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2073:24)
    at eval (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2827:23)
    at Object.parse (eval at <anonymous> (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:22:1), <anonymous>:2837:7)
    at J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:64:33
    at Array.forEach (native)
    at Object.exports.minify (J:\a5\evemonkey\node_modules\uglify-js\tools\node.js:59:15)
    at J:\a5\evemonkey\node_modules\gulp-uglify\minifier.js:65:22
    at trycatch (J:\a5\evemonkey\node_modules\gulp-uglify\minifier.js:15:12)
    at DestroyableTransform.minify [as _transform] (J:\a5\evemonkey\node_modules\gulp-uglify\minifier.js:64:19)
    at DestroyableTransform.Transform._read (J:\a5\evemonkey\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (J:\a5\evemonkey\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:147:83)
    at doWrite (J:\a5\evemonkey\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:313:64)
    at writeOrBuffer (J:\a5\evemonkey\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:302:5)
    at DestroyableTransform.Writable.write (J:\a5\evemonkey\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:241:11)

anotherjsguy

@kuldeepkeshwar

i’m using angular2- webpack-starter, build produces a single bundle.js , can anybody help me out to
configure build to produce vendor.js(contains vendor specific js) and application.js(application specfic)

Shahinur Islam

@mshahin364

How to add font-awesome in the project. Can any one please help me out?

Eric Kisner

@exk0730

@mshahin364 I'm not sure if this is the correct way, but I downloaded the font-awesome sass library, put all of the _*.scss files into the app/styles directory, then I put the .otf, .svg, .woff, etc etc font files into assets/fonts directory

then you need to change _variables.scss: $fa-font-path to be whatever the relative path to assets/fonts is

@alvipeo I'm having the same problems..... couldn't get any help from the angular2 gitter chat either

Shahinur Islam

@mshahin364

Thanks @exk0730 I will try in your way.

Andrey

@solovieff

hey, should installed from git demo look like the page at https://angularclass.github.io/angular2-webpack-starter/?

I got it working but it's not as beautiful

Nic

@leNicDev

Does anyone know why I can't use css-loader instead of raw-loader?

{
                test: /\.css$/,
                loaders: ['raw-loader', 'css-loader'],
                exclude: /node_modules/
            }

This leaves my page completely unstyled.

Sean Larkin

@TheLarkInn

@leNicDev just use raw loader no CSS.

Also, take the 10 minutes to look at what the two loaders do in the src code. Most loaders are simply one function that takes a source and returns a new modified source. It should help you understand why you don't need to chain CSS loader to raw loader.

Jaroslaw Ivanov

@ivanovjaroslaw

Hello! I can't understand how to inject js 3rd party libs. For example,

import * as d3 from 'd3';

So, all works fine, but when I compile this I got

[default] /app/components/app.component.ts:8:21 
    Cannot find module 'd3'.

But all works fine. Only this message is annoying me :) Can I fix this error message?

Sean Larkin

@TheLarkInn

https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/vendor.browser.ts#L1-L4

@ivanovjaroslaw ^^

https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/custom-typings.d.ts#L1-L34

Jaroslaw Ivanov

@ivanovjaroslaw

@TheLarkInn It doens't help. I add this to vendor.ts

import 'd3';

And add this to typings.d.ts

declare let d3: any;

Jaroslaw Ivanov

@ivanovjaroslaw

And it seems, that, when I try to

import * as d3 from 'd3';

in some specific component, d3 object is available at the global level from other components.
For example, inject d3 into c1.component.ts. Then, in c2.component.ts type something like

console.log(d3);

And it works! Awfull!

Can you help me with this? Can I inject some js 3rd party lib from node_modules into some file in the project without pollute global scope?

timathon

@timathon

Hello. Please any one guide on how to set up the coverage reporter. When I run npm run watch:test, the coverage report only covers app/, app/about/, app/home/, app/home/x-large. How do I include other folder/files? Thanks.

timathon

@timathon

After writing more specs, other files starting to show up in the coverage report. I just started learning how to unit test.

Nic

@leNicDev

@TheLarkInn But raw-loader doesn't resolve paths like background-image: url('./image.png');

Jeremy Fensch

@jFensch

Any plans to migrate the starter to the new forms module in the near future?

Sean Larkin

@TheLarkInn

You should put in a PR

Julio Vasquez Gamarra

@juliovg

Hello everybody
i'm trying to resolve a problem that i explain on this link: http://stackoverflow.com/questions/37800356/is-it-possible-configure-ng2-translate-with-angular-2-and-webpack
can anybody help me ?

Thanks

Carlos Esteban Lopez Jaramillo

@luchillo17

@leNicDev Then just use the url-loader before the css-loader, then use raw-loader.

Where communities thrive

People

Repo info

Activity