AngularClass/angular2-webpack-starter

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

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.

Sorry @leNicDev , i meant the resolve-url-loader

David Newman

@datatypevoid

Evening all! By chance does anyone know if the forms docs are up to date or have a good resource for unbreaking our forms with the recent changes?

Valentin Konusov

@BioSin

Hi everyone, where would be better to add new router config?
As platform provider, or application provider?

Sabbir Rahman

@sabbirrahman

Hello everyone, can someone help me on how to integrate angular-universal with a project developed with this starter?

Nic

@leNicDev

@Luchillo If I'm using the css-loader, my pages are completely unstyled (no errors)

Al Knows

@al_knows_twitter

how do you guys clone the material2 branch?

it doesnt list in "git branch -r"

Carlos Esteban Lopez Jaramillo

@luchillo17

@leNicDev Sorry man, i just jump in without seeing what's the context, how are you calling your styles? like this?:

require('path/to/style.css')

Or in a component?:

@Component({
  templateUrl: '...',
  styles: [ require('path/to/style.css') ]
})

If the first is true, you need to use the style-loader to inline the styles into your js.
If the second is true, you need to use raw loader because the styles property of component only accepts an array of strings.

Carlos Esteban Lopez Jaramillo

@luchillo17

For example i have 1 require that uses the style-loader for the theme css file (with the imports for different lib css files and app-wide styles) and one for each component with the raw-loader.

Carlos Esteban Lopez Jaramillo

@luchillo17

Hi all, i'm about to start trying to implement both Angular-universal and Static Template Compilation.

Any idea where to start? any recommendations?

Bnaya Peretz

@Bnaya

Dose this starter has any server side rendering capabilities?

Carlos Esteban Lopez Jaramillo

@luchillo17

You mean Angular Universal?

Bnaya Peretz

@Bnaya

yeah i thnik so

Carlos Esteban Lopez Jaramillo

@luchillo17

I have a fork and as far as i can tell there's no Angular Universal involved, at least not yet since the repo's server side is webpack-dev-server in dev and http-server in prod, for Angular universal to kick in it needs some config that i don't see anywhere in the repo.

Emil Aasa

@emilaasa

@al_knows_twitter git clone, git checkout material

then deleted master and renamed material

shahzad-0

@shahzad-0

Hi, i'm trying to figure out what the best practice is when loading data from a config file.

I currently have an angular2 service which has constant properties. However, I have noticed that the project comes with a manifest.json in the assets folder. Should I be using that and loading it wherever it's required?

Carlos Esteban Lopez Jaramillo

@luchillo17

Quick question, how do you use app shell in Angular 2 with the new Component router (v 3.0)?, i get that you can use the root component as the app shell and then setup lazy loading for other components, but then how do i ensure that all components are available offline if they are requested on demand?

Can i trigger a fetch from the root component when it finish loading?

Pho Huynh

@shortgiraffe4

Hi, how can I deloy this application>

shahzad-0

@shahzad-0

@shortgiraffe4 I think you just need to run npm run build:prod, and then upload the contents of the dist directory onto your server

Urban Lavbič

@xban1x

Has anyone tried to add web workers to this starter?

Where communities thrive

People

Repo info

Activity