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
Jamie Spittal
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?
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