Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 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
  • Jul 21 14:14
    FilipLitwora commented #958
  • Jul 09 11:40
    Sanafan commented #1713
  • Jul 05 11:41
    hoang-innomizetech commented #2053
  • Jul 05 07:32
    Jilaba commented #1824
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?
or is it somewhere else that we are requiring angular2
I have a simple crud app with api on laravel. Need help with build angular 2 app with webpack. Who can help?
Hi, providers: [ ...FORM_PROVIDERS ], what means the "..." in the array ?
ah thx
Jason Miazga
i cloned the latest, and when i run 'npm run e2e' i get the following error
SyntaxError: missing ) after argument list
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:404:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:429:10)
at Object.<anonymous> (C:\Users\j136783c\Desktop\angular2-webpack-starter\node_modules\ts-node\src\bin\ts-node.ts:121:12)
at Module._compile (module.js:397:26)
at Object.Module._extensions..js (module.js:404:10)
at Module.load (module.js:343:32)
and ideas?
Hello everyone :)
Has anyone tried redux with angular 2?
hey @datoml sure, check out this https://github.com/ngrx/store
and its gitter room as well
and here's comparison to redux ngrx/store#16 (tl;dr it's the api same, except ngrx is leveraging ng2's use of rxjs)
@fxck Thanks for the link. I'll have a look at it :)
Zarko Susnjar

Hi guys,

Anyone knows why would Selenium/Cucumber tests stop working after upgrading from beta.1 to beta.6, and latest starter?
Basically all changes to UI forms are not triggering changes in model driven form control s... :(

It got painfully slow on subsequent builds since I updated to version 3.0.0. Any ideas?
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
5362ms build modules
5ms seal
104ms optimize
30ms hashing
139ms create chunk assets
86ms additional chunk assets
4599ms optimize chunk assets
16695ms optimize assets
43ms emit
Hash: 6fd3c185387ef5015abd
Version: webpack 1.12.14
Time: 28032ms