Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Dec 09 18:21
    JediSange commented #782
  • Dec 09 16:50
    JediSange commented #782
  • Dec 09 16:50
    JediSange commented #782
  • Dec 05 21:45
    saiMedavarapu commented #1997
  • Nov 07 08:26
    testacp commented #1853
  • Nov 07 08:26
    testacp commented #1853
  • Oct 30 15:24
    emanuelcoelho1986 closed #2011
  • Oct 30 10:43
    sameerpallav commented #2025
  • Oct 15 15:20
    alanhg commented #1997
  • Sep 30 15:12
    bbrink68 commented #2049
  • Aug 23 13:34
    SouravKumar89 edited #2058
  • Aug 23 13:27
    SouravKumar89 opened #2058
  • Aug 22 00:04

    PatrickJS on master

    Update README.md (compare)

  • Aug 13 17:17
    ramsunvtech commented #1925
  • Aug 12 22:58
    terrancecorley commented #770
  • Aug 09 02:30
    jindovu commented #2049
  • Aug 09 02:22
    jindovu opened #2057
  • Aug 08 10:49
    krawinkelm commented #2053
  • Jul 21 14:14
    FilipLitwora commented #958
  • Jul 21 14:14
    FilipLitwora commented #958
had a question about adding a backend server
it looks like webpack allows proxy but I can't for the life of me get it to work with the angular2 starter pack
proxy: {
'/api/*' : {
target: {
host: 'localhost',
port: 3002
that worked
Zahadi Eslicho
Hi, anyone knows how to fix symlink issue? AngularClass/angular2-webpack-starter#315
Peter Pisljar
hey everyone, does anyone know what the end to end tests are supposed to look like?
I ran the e2e:live and it just says :
Starting debugger agent.
Debugger listening on port 5858
Jamie Spittal
That’s going to live watch for e2e changes.
I generally use npm run ci to run the suite of tests
but you can see all the scripts available and what they do in the package.json file.
if you do want to use e2e live
you can use this (as found in README.md)
npm run webdriver:start
# in another terminal
npm run e2e:live
^ @jasonboggess
Is it possible to turn off optimize assets (at least for dev server)? After installing ng2-bootstrap, it takes a long time to process
Jamie Spittal
Did you change the devtool in web pack?
eval is significantly faster than source-map
Even after changing it, it still takes a long time. It gets stuck on that optimize assets
Takes about 25 seconds to complete

The current setting doesn't fail the tests when a JS error is thrown. For example this test succeeds:

it('should init',
        injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            return tcb.createAsync(TestCmp).then((fixture: any) => {

                let component: TestCmp = fixture.debugElement.componentInstance;
                let compiled = fixture.debugElement.nativeElement;

                console.log(component.viewChild); // LOG: undefined
                expect(component.viewChild.checkedValidity).toBe(false);  // should throw an error

Any ideas what to do?

Artur Rozwalak

hi guys, I just downloaded v3.0.0. I have a problem when trying to add new component in app.ts


import {Component} from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';

import {Topbar} from './_components/topbar/topbar';
import {Home} from './home/home';

    selector: 'app',
    directives: [ ...ROUTER_DIRECTIVES, Topbar ],
    template: `<topbar></topbar>
    { path: '/', component: Home, name: 'Index' },
    { path: '/**', redirectTo: ['Index'] }
export class App {
    constructor() {


import {Component} from 'angular2/core';

    selector: 'topbar',
    templateUrl: require('./topbar.html')
export class Topbar {
    constructor () {}


when I run webpack dev server I get this error
EXCEPTION: Template parse errors:
Unexpected closing tag "head" ("
    <link rel="stylesheet" href="/assets/css/styles.css">

[ERROR ->]</head>

"): Topbar@16:0
Unexpected closing tag "html" ("

<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>
[ERROR ->]</html>
"): Topbar@30:0
BaseException {message: "Template parse errors:↵Unexpected closing tag "hea…/script></body>↵[ERROR ->]</html>↵"): Topbar@30:0", stack: "Error: Template parse errors:↵Unexpected closing t…ttp://localhost:3000/polyfills.bundle.js:6302:11)"}message: "Template parse errors:↵Unexpected closing tag "head" ("↵    <link rel="stylesheet" href="/assets/css/styles.css">↵↵[ERROR ->]</head>↵↵<body>↵"): Topbar@16:0↵Unexpected closing tag "html" ("↵↵<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>↵[ERROR ->]</html>↵"): Topbar@30:0"stack: "Error: Template parse errors:↵Unexpected closing tag "head" ("↵    <link rel="stylesheet" href="/assets/css/styles.css">↵↵[ERROR ->]</head>↵↵<body>↵"): Topbar@16:0↵Unexpected closing tag "html" ("↵↵<script src="polyfills.bundle.js"></script><script src="main.bundle.js"></script></body>↵[ERROR ->]</html>↵"): Topbar@30:0↵    at new BaseException (http://localhost:3000/main.bundle.js:841:24)↵    at TemplateNormalizer.normalizeLoadedTemplate (http://localhost:3000/main.bundle.js:21528:20)↵    at http://localhost:3000/main.bundle.js:21517:66↵    at Zone.run (http://localhost:3000/polyfills.bundle.js:7283:25)↵    at Zone.run (http://localhost:3000/main.bundle.js:11140:43)↵    at zoneBoundFn (http://localhost:3000/polyfills.bundle.js:7260:27)↵    at lib$es6$promise$$internal$$tryCatch (http://localhost:3000/polyfills.bundle.js:6508:18)↵    at lib$es6$promise$$internal$$invokeCallback (http://localhost:3000/polyfills.bundle.js:6520:19)↵    at lib$es6$promise$$internal$$publish (http://localhost:3000/polyfills.bundle.js:6491:13)↵    at http://localhost:3000/polyfills.bundle.js:6163:11↵    at microtask (http://localhost:3000/main.bundle.js:11180:30)↵    at Zone.run (http://localhost:3000/polyfills.bundle.js:7283:25)↵    at Zone.run (http://localhost:3000/main.bundle.js:11140:43)↵    at zoneBoundFn (http://localhost:3000/polyfills.bundle.js:7260:27)↵    at MutationObserver.lib$es6$promise$asap$$flush (http://localhost:3000/polyfills.bundle.js:6302:11)"__proto__: __constructor: BaseException(message)toString: ()__proto__: DefineError.bi(anonymous function) @ main.ts:34Zone.run @ zone-microtask.ts:20zoneBoundFn @ zone-microtask.ts:20Zone.run @ zone-microtask.ts:20zoneBoundFn @ zone-microtask.ts:20lib$es6$promise$$internal$$tryCatch @ zone-microtask.ts:20lib$es6$promise$$internal$$invokeCallback @ zone-microtask.ts:20lib$es6$promise$$internal$$publish @ zone-microtask.ts:20lib$es6$promise$$internal$$publishRejection @ zone-microtask.ts:20(anonymous function) @ zone-microtask.ts:20microtask @ ng_zone.ts:410Zone.run @ zone-microtask.ts:20(anonymous function) @ ng_zone.ts:371zoneBoundFn @ zone-microtask.ts:20lib$es6$promise$asap$$flush @ zone-microtask.ts:20
I noticed that in webpack dev config file files with .html extension are loaded as raw files
Sam Jones
@arozwalak The key thing is that '.html files are loaded as raw files' : You can't use templateUrl since that html file isn't being fetched asynchronously at run-time, but converted to a "raw" string at web-pack bundle time (like compile time), so you need to use template not templateUrl
Sam Jones
also nothing like angular 1 template cache going on. Webpack is bundling that html file as a string literal into the topbar class.
Jason Miazga
how can I add javascript files to webpack? under src/assets I have some javascript files than need to be included
Artur Rozwalak
@ollwenjones thnx, that's what I missed
Thai Huynh
what's the best way to achieve this... I have a common repo that has all the "core" functionalities ... then I have "client" projects that will be using the core... how do I get autocomplete for typing after I've install that core package into my client project
how I do get it to recognize my core files
Jamie Spittal
This is much more of a generic typescript question.
I believe this will point you in the right direction
but full disclosure @thuynh I’m fairly new to Typescript myself so I’m not 100% sure.
Attila Egyed
I installed materializecss via npm and added a require('materialize-css/dist/css/materialize.min.css'); in app.ts, it seems like the styles havent got loaded, any ideas on this one?
i even tried to load it in the @component decorator as local styles, styles: [require('materialize-css/dist/css/materialize.min.css')] but no effect at all, i don't receive any errors
Nathan Erickson
Hey guys I was wondering if anyone has run into duplicate Identifiers when installing es6-shim through npm at the same time as typescript?
what would be the right way to tell webpack to transfer a CSS file in a node_module (toastr in my case) to the assets directory. I could copy it there manually but that's not so nice

Hey guys, working on a node project and after having installed the dependencies I couldn't run the application (my first time) ...

Error: "webpack-dev-server" is not recognized as an internal or external command

Nathan Erickson
@thomasbee with webpack if you install the css-loader, sass-loader, and style-loader you can target any type of css file for requiring in your TS file, the loader will inject the css into the page. What I like to do is have a main scss file then in the scss file i use an import statement to include my node_module css files @import "~animate.css/animate.css";; and in my main entry ts require('./app.scss');

this would be your css loader config in webpack.config.js

{ test: /\.css$/, loader: 'style!css' }

this would be your scss loader config

{ test: /\.scss$/, loader: 'style!css!sass' }
the ~ on a import statement is a shortcut that tells the loader to look in your node_modules folder
Hi! How i can make Laravel 5.2 + Angular2-Webpack-Starter chain? By laravel 5.2 api - and jwt tokens i doesnt make any questions. But Ng2... Anybody can take newspaper where i can read about it. And sorry for bad english.
Anybody is hear?
Raj Krishna Maharjan
How to hide # in url in prod mode ?
How can i use pathlocationstrategy instead of # strategy?
Raj Krishna Maharjan
when i put pathlocationstrategy the url localhost:8080/about doesn't work
Nathan Erickson
I noticed that at no point does the angular 2 starter to a require('angular2'), I don't see an import loader for webpack either that add requires to import statements. Does webpack already recognize the an import statement as a require?