qdouble/angular-webpack-starter

A complete Angular 6 and Webpack 4 starter seed with minimal and full featured branches. Full featured branch includes: Material Design 2 (Bootstrap 4 branch available as well), @ngrx, HMR, DLLs and optional use of Universal for server-side rendering - Supports AOT (offline) compilation, sync and lazy loading. Karma/Protractor for e2e/unit tests.

angular-webpack-starter's Issues

Include ngrx-store-localstorage

Hi there :-)

I just tried to sync my state to the local storage, so after a page reload, I can reproduce the state from the local storage.

I used this plugin:
https://github.com/btroncone/ngrx-store-localstorage

What I tried is use the provideStore like this:

import { RouterStoreModule } from '@ngrx/router-store';
import { StoreModule, combineReducers } from '@ngrx/store';
import { compose } from '@ngrx/core/compose';

import { rootReducer } from './reducers';
import { StoreDevToolsModule } from './features/store-devtools.module';

import { localStorageSync } from 'ngrx-store-localstorage';
export const APP_IMPORTS = [
...
  // StoreModule.provideStore(rootReducer),
    StoreModule.provideStore(
      compose(
          localStorageSync(['finder, auth']),
          combineReducers
      )(rootReducer)
  ),
...
]

Unfortunately after this, my reducer state isn't available at all.

Does somebody have an idea?

Some warnings on app start

Hi @qdouble. I've just cloned the repo again, installed deps and ran npm start. There are some warning on bundle verification. Please check out the image.

Support optional proxy to backend

It would be nice to be able to use a real backend api during development. May not be useful always, but certainly useful times.

'.' is not recognized as an internal or external command

This change introduced a bug for windows users.

"ngc": "\"./node_modules/.bin/ngc\" -p src && npm run rimraf -- output", throws '.' is not recognized as an internal or external command error.

It should be "ngc": "./node_modules/.bin/ngc -p src && npm run rimraf -- output",.

Non Internet applications

Please remove all Internet references from index.html since some applications may don't have access to Internet

Move e2e test files to top level

It would be good to move the e2e test files to a folder named e2e at the same level as src. Because e2e spec are not specific to a component, it does not look clean to keep them aside component file.

Material Design Lite

I came across to Material Design Lite what are your thoughts, maybe we can implement that in this package?

npm run universal throws EXCEPTION: document is not defined

I'm trying to run this repo as a universal app. The app runs on the client browser, but node console throws the following exception:

[nodemon] startingnode dist/server/index.js Listening on: http://192.168.1.100:8000 EXCEPTION: document is not defined ORIGINAL STACKTRACE: ReferenceError: document is not defined at new RippleRenderer (C:\WORK\angular2webpack2-starter\node_modules\@angular\material\material.umd.js:193:31) at new MdRipple (C:\WORK\angular2webpack2-starter\node_modules\@angular\material\material.umd.js:327:32) at AppView._View_MdButton1.createInternal (MdButton.ngfactory.js:63:24) at AppView.create (C:\WORK\angular2webpack2-starter\node_modules\@angular\core\bundles\core.umd.js:9399:25) at TemplateRef_.createEmbeddedView (C:\WORK\angular2webpack2-starter\node_modules\@angular\core\bundles\core.umd.js:7487:18)

Also, the html rendered by node is not complete - it does not have the target route html.

app.css missing

Module not found: Error: Can't resolve './app.css' in 'E:\Temp_delete\angular2webpack2-starter\src\app'
@ ./src/app/app.ts 40:21-41
@ ./src/app/app.module.ts
@ ./src/main.browser.ts
@ multi main

Renamed app.scss to app.css and works fine!

'rm' is not recognized as an internal or external command - Windows

Just cloned the repo on Windows 10 and run 'npm run build'. And got this:

'rm' is not recognized as an internal or external command

But it worked like 8 hours ago!

Universal crashes in AOT mode

hello
I am getting the following error when i try to compile universal.

> nodemon dist/server/index.js

[nodemon] 1.10.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /Projects/SL/dist/**/*
[nodemon] starting `node dist/server/index.js`
/Projects/SL/node_modules/@angular/platform-browser/src/browser/browser_adapter.js:13
import { setRootDomAdapter } from '../dom/dom_adapter';
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.23 (/Projects/SL/dist/server/index.js:6:14071)
    at t (/Projects/SL/dist/server/index.js:1:177)
[nodemon] app crashed - waiting for file changes before starting...

serve 2 different applications with the same codebase

I would like to handle 2 types of application with the same codebase (a "consumer" variation and a "admin" variation).

What would be necessary to get this done?

Question: Use of mdl css in index.html

@qdouble What is the use of mdl css in index.html. As we use material2 I think we don't need the mdl css.

Usage of Angular CLI

Hey there,
Is it possible to use AngularCLI?

Sorry for opening an issue.. This question is maybe better for a chat like slack/gitter.

Bootstrap v4 Support?

Is bootstrap v4 supported through the bootstrap-loader?

I included it via direct include inside my app.style.scss, but I think that's not the right way...

@types/protractor is missing from package.json

Universal Issues

Running the app in universal mode via npm run universal and going to localhost:8000 does not seem to fully work. It seems to load the page but any click on the page adds a grey overlay and does nothing after.

Feature request: Preload lazy loaded bundles

https://www.softwarearchitekt.at/post/2016/10/02/optimizing-performance-with-preloading-and-the-new-angular-router.aspx

Feature: HMR support

I've just started to use your starter kit; and it is awesome.

I saw that on every change the page is reloaded. So I'd like to ask you about HMR support. Is it possible to add it using webpack2/Tree Shaking/AOT?

Pug Support?

Hi guys,
When I switched from the Angularclass Webpack Starter to this one, my .pug templates are still compiled but all the vowels etc. are not shown properly.

e.g.
äöä
becomes
üÜü

Before everything worked fine =/

I use the pug loader like this:

exports.MY_CLIENT_RULES = [
  { test: /\.pug$/, loader: 'pug-html-loader' },
]

Maybe is there some other workaround?
e.g. in the .scss files you also compile it first and include the .css files directly.

Maybe this is a stupid question sorry ^^

Watch options causing high CPU usage

I have noticed that with recent watch option changes, CPU usage for nodejs is touching 70% constantly. I have removed the watch options and it came down. OS Windows

Align with angular2 style guide

@qdouble This is one of the best angular2 seeds out there. Thank you. Any chance we can align this to follow the style guide. I am happy to raise a PR if you don't have time but OK with the idea.

Feel free to close it if you don't like the idea.

Feature Request: Integrate AotPlugin

New @ngtools/webpack version was released. I think you can try to integrate it.

https://github.com/angular/angular-cli/blob/master/packages/webpack/README.md

How is tree shaking achieved?

My understanding is that webpack 2 can tree shake code via the UglifyJs plugin only if you set module: es2015 in the tsconfig.json. This repo isn't doing this, so I'm wondering how tree shaking is possible here.

Moreover, this issue with UglifyJS leads me to believe that tree shaking isn't currently possible when targeting es5.

Could you explain how tree shaking is achieved?

if/else/javascript logic inside index.html

Hey guys,
Before I used AngularClass Webpack starter.

There, inside the index.html I could use a syntax like this:

<% if (webpackConfig.metadata.isDevServer || ENV === 'test' || ENV === 'local') { %> 
<!-- show some html based on the conditions above -->
<%= } %>

Unfortunately this syntax isn't working anymore =/

Do I have to include something or is there another syntax now?

Best Regards and 1000x thx for this awesome project!

smith

Provider not found if CanActivateChild Guard is only declare within the module.

This error goes away if the DumGuard is added to app.providers.ts , but this defeat the purpose of the module which can be configured to be loaded lazily.

features/sync/dum-guard.service.ts

@Injectable()
export class DumGuard implements CanActivateChild, CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return true;
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return true;
  }
}

features/sync/index.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    SyncComponent,
    ChildComponent
  ],
  providers: [
    DumGuard
  ]
})
export class SyncModule {}

features/sync/sync.routing.ts

export const routes: Routes = [
  {
    path: '',
    component: SyncComponent,
    children: [
      {
        path: '',
        canActivateChild: [ DumGuard ],
        children: [
          { path: '', component: ChildComponent }
        ]
      }
    ]
  }
];

error_handler.js:52 Error: Uncaught (in promise): Error: No provider for DumGuard!
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:429:31)
    at eval (webpack:///./~/zone.js/dist/zone.js?:406:13)
    at ZoneDelegate.invoke (webpack:///./~/zone.js/dist/zone.js?:203:28)
    at Object.onInvoke (webpack:///./~/@angular/core/src/zone/ng_zone_impl.js?:44:37)
    at ZoneDelegate.invoke (webpack:///./~/zone.js/dist/zone.js?:202:34)
    at Zone.run (webpack:///./~/zone.js/dist/zone.js?:96:43)
    at eval (webpack:///./~/zone.js/dist/zone.js?:462:57)
    at ZoneDelegate.invokeTask (webpack:///./~/zone.js/dist/zone.js?:236:37)
    at Object.onInvokeTask (webpack:///./~/@angular/core/src/zone/ng_zone_impl.js?:35:37)
    at ZoneDelegate.invokeTask (webpack:///./~/zone.js/dist/zone.js?:235:42)
  -------------   Elapsed: 9 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at eval (webpack:///./~/zone.js/dist/zone.js?:406:13)
    at eval (webpack:///./~/@angular/router/src/router.js?:505:25)
    at ZoneDelegate.invoke (webpack:///./~/zone.js/dist/zone.js?:203:28)
  -------------   Elapsed: 0 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at SafeSubscriber.eval [as _error] (webpack:///./~/zone.js/dist/zone.js?:406:13)
    at SafeSubscriber.__tryOrUnsub (webpack:///./~/rxjs/Subscriber.js?:223:16)
    at SafeSubscriber.error (webpack:///./~/rxjs/Subscriber.js?:184:26)
  -------------   Elapsed: 8 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at eval (webpack:///./~/zone.js/dist/zone.js?:462:17)
    at ZoneDelegate.invokeTask (webpack:///./~/zone.js/dist/zone.js?:236:37)
    at Object.onInvokeTask (webpack:///./~/@angular/core/src/zone/ng_zone_impl.js?:35:37)
  -------------   Elapsed: 0 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at eval (webpack:///./~/zone.js/dist/zone.js?:462:17)
    at ZoneDelegate.invokeTask (webpack:///./~/zone.js/dist/zone.js?:236:37)
    at Object.onInvokeTask (webpack:///./~/@angular/core/src/zone/ng_zone_impl.js?:35:37)
  -------------   Elapsed: 14 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at ZoneAwarePromise.then (webpack:///./~/zone.js/dist/zone.js?:536:17)
    at RuntimeCompiler._compileComponents (webpack:///./~/@angular/compiler/src/runtime_compiler.js?:173:49)
    at RuntimeCompiler._compileModuleAndComponents (webpack:///./~/@angular/compiler/src/runtime_compiler.js?:80:37)
    at RuntimeCompiler.compileModuleAsync (webpack:///./~/@angular/compiler/src/runtime_compiler.js?:71:21)
  -------------   Elapsed: 3 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at eval (webpack:///./~/zone.js/dist/zone.js?:462:17)
    at ZoneDelegate.invokeTask (webpack:///./~/zone.js/dist/zone.js?:236:37)
    at Object.onInvokeTask (webpack:///./~/@angular/core/src/zone/ng_zone_impl.js?:35:37)
  -------------   Elapsed: 0 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at eval (webpack:///./~/zone.js/dist/zone.js?:462:17)
    at ZoneDelegate.invokeTask (webpack:///./~/zone.js/dist/zone.js?:236:37)
    at Object.onInvokeTask (webpack:///./~/@angular/core/src/zone/ng_zone_impl.js?:35:37)
  -------------   Elapsed: 3 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at eval (webpack:///./~/zone.js/dist/zone.js?:462:17)
    at ZoneDelegate.invokeTask (webpack:///./~/zone.js/dist/zone.js?:236:37)
    at Object.onInvokeTask (webpack:///./~/@angular/core/src/zone/ng_zone_impl.js?:35:37)
  -------------   Elapsed: 0 ms; At: Sun Oct 02 2016 00:45:37 GMT+0800 (MYT)   -------------  
    at Object.onScheduleTask (webpack:///./~/zone.js/dist/long-stack-trace-zone.js?:76:18)
    at ZoneDelegate.scheduleTask (webpack:///./~/zone.js/dist/zone.js?:213:49)
    at Zone.scheduleMicroTask (webpack:///./~/zone.js/dist/zone.js?:150:39)
    at scheduleResolveOrReject (webpack:///./~/zone.js/dist/zone.js?:460:14)
    at resolvePromise (webpack:///./~/zone.js/dist/zone.js?:424:21)
    at eval (webpack:///./~/zone.js/dist/zone.js?:406:13)
    at webpackJsonpCallback (http://localhost:3000/index.js:21:29)
    at http://localhost:3000/0.index.js:1:1

Feature: Universal Support

Hi @qdouble,

Now with Angular 2.0.0 and Angular Universal 2.0.0 is out, is there any plan to add it to this kit?

Or could you provide some guidance how to make it?

npm fails when installing new packages

when trying to install ANY npm package, such as lodash, jquery etc, the following error happens:

-> npm install lodash --save

[email protected] install C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli
node-pre-gyp install --fallback-to-build

node-pre-gyp ERR! Tried to download: https://node-zopfli.s3.amazonaws.com/Release/zopfli-v1.4.0-node-v48-win32-x64.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v48 ABI) (falling back to source compile with node-gyp)
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at failNoPython (C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-gyp\lib\configure.js:449:14)
gyp ERR! stack at C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-gyp\lib\configure.js:404:11
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 10.0.14379
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-gyp\bin\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli\lib\binding\node-v48-win32-x64\zopfli.node" "--module_name=zopfli" "--module_path=C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli\lib\binding\node-v48-win32-x64"
gyp ERR! cwd C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli
gyp ERR! node -v v6.6.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli\lib\binding\node-v48-win32-x64\zopfli.node --module_name=zopfli --module_path=C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli\lib\binding\node-v48-win32-x64' (1)
node-pre-gyp ERR! stack at ChildProcess. (C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
node-pre-gyp ERR! stack at emitTwo (events.js:106:13)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:191:7)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:877:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
node-pre-gyp ERR! System Windows_NT 10.0.14379
node-pre-gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-pre-gyp\bin\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli
node-pre-gyp ERR! node -v v6.6.0
node-pre-gyp ERR! node-pre-gyp -v v0.6.30
node-pre-gyp ERR! not ok
Failed to execute 'C:\Program Files\nodejs\node.exe C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli\lib\binding\node-v48-win32-x64\zopfli.node --module_name=zopfli --module_path=C:\WORK\GraoDeGente\angular2webpack2-starter\node_modules\node-zopfli\lib\binding\node-v48-win32-x64' (1)
npm WARN install:[email protected] [email protected] install: node-pre-gyp install --fallback-to-build
npm WARN install:[email protected] Exit status 1
[email protected] C:\WORK\GraoDeGente\angular2webpack2-starter
+-- [email protected]
| -- [email protected] -- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Trying to get https://node-zopfli.s3.amazonaws.com/Release/zopfli-v1.4.0-node-v48-win32-x64.tar.gz by myself, the server returns
<Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>8E4BC6EA3B5AA488</RequestId> <HostId> BDlT4cmwVrwDQ6iU6fG3hCuzS9uI9z2y1gcEuu5bsexjeZrUsABWlRHXLU86/rbTElS5OFwjzfg= </HostId> </Error>

Question: Is there a way to generate css outside of main src folder?

It is a bit confusing to when both css and scss present in the same folder

Module not found error in dll polyfill during run command of "build:dll"

face these errors during script run of "build:dll"

ERROR in dll polyfill
Module not found: Error: Can't resolve 'sockjs-client' in '/home/crucible/Programming/angular2webpack2-starter-master'
@ dll polyfill

ERROR in dll polyfill
Module not found: Error: Can't resolve 'querystring-es3' in '/home/crucible/Programming/angular2webpack2-starter-master'
@ dll polyfill

ERROR in dll polyfill
Module not found: Error: Can't resolve 'strip-ansi' in '/home/crucible/Programming/angular2webpack2-starter-master'
@ dll polyfill

Question on SASS and testing

I've added support for SASS in my project (derived from this repo), but need help with test support of SASS. Currently, if I run 'npm run test' I get the following error:

ERROR in ./src/app/app.component.scss
Module parse failed: E:\Documents\Visual Studio 2015\Projects\NewsNotifier\src\app\app.component.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "~bootstrap-sass/assets/stylesheets/bootstrap";

Then it says Module parse failed trying to parse app.component.scss. How do I set up this for testing? Please help.

Build issues on all other than npm start

Hi!

Great project, I've done a fresh install on node 6.6, npm start is working, but if I use hot reload or prod, I get this:

Minimum bundle size?

Hi, thanks for your efforts on this project.

I've tried to remove all code and modules from this project and check minimum bundle size. I get about 800kb minimum. As i know webpack2 should support tree-shaking, but i see the same bundle size as i get with webpack1. Does tree-shaking work in this config ? Is it necessary to configure additional plugins to make it work?

Thanks.

HammerJS from npm

@qdouble You think we can use HammerJS from npm instead of from CDN?

AoT compilation problem

My first issue is to know if the build:aot script is even doing AoT compilation. I don't see ngc being called anywhere but for now I will assume that somewhere webpack is being configured to run it (possibly via some package I'm not understanding). My second issue is that I added the PrimeNG package to the project and added the following to the app.module and applied the directive to a new element that I placed in the dashboard template,

import { InputText } from 'primeng/primeng'

@NgModule({ declarations: [ AppComponent, APP_DECLERATIONS, InputText ],

When I try to run npm run build:aot I get errors on all the PNG components similar to the follwing

WARNING in .//primeng/components/inputtext/inputtext.js
Cannot find source file 'inputtext.ts': Error: Can't resolve './inputtext.ts' in 'C:\Projects\Angular2\angular2webpack2-starter\node_modules\primeng\components\inputtext'
@ .//primeng/primeng.js 33:9-52
@ ./src/app/app.module.ts
@ ./src/compiled/src/app/app.module.ngfactory.ts
@ ./src/main.browser.aot.ts

There is not componentname.ts file but there are componentname..d.ts files. Is it just that PNG is not properly setup for AoT or is there a problem with the AoT compilation configuration?

Cannot use @import '~bootstrap-sass/assets/stylesheets/bootstrap' Syntax

Hey there,
First of all: Thanks for your awesome work :)

I try to import the bootstrap scss, but it doesn't work as it should.

app.scss

@import '~bootstrap-sass/assets/stylesheets/bootstrap';

I get this error

{
  "status": 1,
  "file": "/Users/smith/Git/test/src/app/app.style.scss",
  "line": 2,
  "column": 1,
  "message": "File to import not found or unreadable: ~bootstrap-sass/assets/stylesheets/bootstrap\nParent style sheet: /Users/smith/Git/test/src/app/app.style.scss",
  "formatted": "Error: File to import not found or unreadable: ~bootstrap-sass/assets/stylesheets/bootstrap\n       Parent style sheet: /Users/smith/Git/test/src/app/app.style.scss\n        on line 2 of src/app/app.style.scss\n>> @import '~bootstrap-sass/assets/stylesheets/bootstrap';\n   ^\n"
}

However: This works

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

Well but this is not a good solution, because the location of my component can change. The ‘~/..' syntax worked fine in the angular2-webpack-starter (which I left for your starter ;-))

Maybe you have some idea :)

Thanks so much for this repo man!!

Error when I run the npm start command.

Error when I run the npm start command.
I get the following error:
That solution can give you is That please?

AOT scripts failing

I can't get the AOT scripts to run

build:aot gives this error

ERROR in ./src/main.browser.aot.ts
Module not found: Error: Can't resolve './compiled/app/app.module.ngfactory' in 'C:\Source\POC\Microservice.Poc\angular2webpack2-starter\src'
 @ ./src/main.browser.aot.ts 6:29-75

ERROR in [default] C:\Source\POC\Microservice.Poc\angular2webpack2-starter\src\main.browser.aot.ts:6:35 
Cannot find module './compiled/app/app.module.ngfactory'.
Child html-webpack-plugin for "index.html":
        + 4 hidden modules

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\dev\\nodejs\\node.exe" "C:\\dev\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run-script" "build:aot"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:aot: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build:aot script 'webpack'.
npm ERR! This is most likely a problem with the angular2webpack2-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2webpack2-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! 
npm ERR!     npm owner ls angular2webpack2-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Source\POC\Microservice.Poc\angular2webpack2-starter\npm-debug.log

Process finished with exit code 1

watch:aot provides this error

"C:\Program Files (x86)\JetBrains\IntelliJ IDEA 2016.2\bin\runnerw.exe" C:\dev\nodejs\node.exe C:\dev\nodejs\node_modules\npm\bin\npm-cli.js run-script watch:aot

> [email protected] watch:aot C:\Source\POC\Microservice.Poc\angular2webpack2-starter
> npm run compile:watch -- --watch & npm run sass:watch


> [email protected] compile:watch C:\Source\POC\Microservice.Poc\angular2webpack2-starter
> watch-run -i npm run compile:only -p 'src/app/**/*.ts, src/app/**/*.scss' npm run compile:only "--watch"

C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\glob\glob.js:119
    throw new Error("must provide pattern")
    ^

Error: must provide pattern
    at new Glob (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\glob\glob.js:119:11)
    at glob (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\glob\glob.js:57:11)
    at Function.globSync [as sync] (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\glob\glob.js:76:10)
    at C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:77:17
    at C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:32:30
    at Array.reduce (native)
    at processPatterns (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:24:30)
    at Object.globule.find (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:76:17)
    at Gaze.add (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\gaze\lib\gaze.js:164:19)
    at new Gaze (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\gaze\lib\gaze.js:68:10)

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\dev\\nodejs\\node.exe" "C:\\Users\\nparson\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "compile:watch" "--" "--watch"
npm ERR! node v4.4.7
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] compile:watch: `watch-run -i npm run compile:only -p 'src/app/**/*.ts, src/app/**/*.scss' npm run compile:only "--watch"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] compile:watch script 'watch-run -i npm run compile:only -p 'src/app/**/*.ts, src/app/**/*.scss' npm run compile:only "--watch"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2webpack2-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     watch-run -i npm run compile:only -p 'src/app/**/*.ts, src/app/**/*.scss' npm run compile:only "--watch"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2webpack2-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2webpack2-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Source\POC\Microservice.Poc\angular2webpack2-starter\npm-debug.log

> [email protected] sass:watch C:\Source\POC\Microservice.Poc\angular2webpack2-starter
> node-sass -w src -o src

compile:aot gives this error:

"C:\Program Files (x86)\JetBrains\IntelliJ IDEA 2016.2\bin\runnerw.exe" C:\dev\nodejs\node.exe C:\dev\nodejs\node_modules\npm\bin\npm-cli.js run-script compile:aot

> [email protected] compile:aot C:\Source\POC\Microservice.Poc\angular2webpack2-starter
> npm run sass && npm run clean:compile && ./node_modules/.bin/ngc -p src && npm run build:aot


> [email protected] sass C:\Source\POC\Microservice.Poc\angular2webpack2-starter
> node-sass src -o src

Rendering Complete, saving .css file...
Wrote CSS to C:\Source\POC\Microservice.Poc\angular2webpack2-starter\src\app\app.css
Wrote 1 CSS files to C:\Source\POC\Microservice.Poc\angular2webpack2-starter\src

> [email protected] clean:compile C:\Source\POC\Microservice.Poc\angular2webpack2-starter
> npm run rimraf -- output compiled src/compiled


> [email protected] rimraf C:\Source\POC\Microservice.Poc\angular2webpack2-starter
> rimraf "output" "compiled" "src/compiled"

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\dev\\nodejs\\node.exe" "C:\\dev\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run-script" "compile:aot"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] compile:aot: `npm run sass && npm run clean:compile && ./node_modules/.bin/ngc -p src && npm run build:aot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] compile:aot script 'npm run sass && npm run clean:compile && ./node_modules/.bin/ngc -p src && npm run build:aot'.
npm ERR! This is most likely a problem with the angular2webpack2-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run sass && npm run clean:compile && ./node_modules/.bin/ngc -p src && npm run build:aot
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2webpack2-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! 
npm ERR!     npm owner ls angular2webpack2-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Source\POC\Microservice.Poc\angular2webpack2-starter\npm-debug.log

Process finished with exit code 1

I did npm install before hand.
Windows 10 env

instructions to remove Universal support

@qdouble Would you have time to quickly write some notes around how to remove Universal support? Looks like there is no support for Universal in Java World, so I'll not use that functionality in near future, so I don't want to download the deps and maintain the related config.

[nodemon] starting `node dist/server/index.js`

Hey there!

I get this error when I try to start with "npm run universal"

/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:4
encapsulation:o.ViewEncapsulation.None}),a("design:paramtypes",[])],t)}(),l=function(){function t(){}return t=r([n.i(o.Directive)({selector:"[md-list-avatar]"}),a("design:paramtypes",[])],t)}(),c=function(){function t(t,e){this._renderer=t,this._element=e,this._hasFocus=!1}return Object.defineProperty(t.prototype,"_hasAvatar",{set:function(t){this._renderer.setElementClass(this._element.nativeElement,"md-list-avatar",null!=t)},enumerable:!0,configurable:!0}),t.prototype.ngAfterContentInit=function(){this._lineSetter=new i.e(this._lines,this._renderer,this._element)},t.prototype._handleFocus=function(){this._hasFocus=!0},t.prototype._handleBlur=function(){this._hasFocus=!1},r([n.i(o.ContentChildren)(i.f),a("design:type",o.QueryList)],t.prototype,"_lines",void 0),r([n.i(o.ContentChild)(l),a("design:type",l),a("design:paramtypes",[l])],t.prototype,"_hasAvatar",null),t=r([n.i(o.Component)({selector:"md-list-item, a[md-list-item]",host:{role:"listi

TypeError: ["logger","both"].includes is not a function
    at Object.module.exports.t../src/app/reducers/index.ts (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:4:31318)
    at e (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:1:177)
    at Object.module.exports.t../src/app/app.imports.ts (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:4:25139)
    at e (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:1:177)
    at Object.module.exports.t../src/app/app.module.universal.node.ts (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:4:25740)
    at e (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:1:177)
    at Object.<anonymous> (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:5:3504)
    at Object.module.exports.t../src/server.ts (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:5:4278)
    at e (/Users/smith/Git/angular2webpack2-starter/dist/server/index.js:1:177)
    at /Users/smith/Git/angular2webpack2-starter/dist/server/index.js:1:785
[nodemon] app crashed - waiting for file changes before starting...

any idea?

invalid webpack schema since [email protected]

Webpack released beta 23 and is automatically installed by angular2webpack2-starter. They now validate the config against a schema, that errors out on all compile/build tasks:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'preLoaders'. These properties are valid:
   object { rules?, loaders?, noParse?, unknownContextRequest?, unknownContextRegExp?, unknownContextRecursive?, unknownContextCritical?, exprContextRequest?, exprContextRegExp?, exprContextRecursive?, exprContextCritical?, wrappedContextRegExp?, wrappedContextRecursive?, wrappedContextCritical? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.node.global should be a boolean.
 - configuration.resolve has an unknown property 'moduleDirectories'. These properties are valid:
   object { modules?, descriptionFiles?, plugins?, mainFields?, aliasFields?, mainFiles?, extensions?, enforceExtension?, moduleExtensions?, enforceModuleExtension?, alias?, symlinks?, unsafeCache?, cachePredicate?, fileSystem?, resolver? }
 - configuration.resolve.extensions[0] should not be empty.

https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.23

tsconfig.aot.json/any advice you could give?

Hi,

I was wondering why you don't have the "module": "es2015" option on your tsconfig.aot.json? Also, why do you have an explicit typeRoots instead of the "types" array?

I've got a fork of the AngularClass repo that I'm trying to get working. I have it modeled after your repo as well. When i try to run ngc I get this message:

can't resolve module @angular/core/src/di/metadata from C:\Users\Tom\git\angular2-webpack-starter\index.ts
Error: can't find symbol Host exported from module C:/Users/Tom/git/angular2-webpack-starter/node_modules/@angular/core/src/di/metadata.d.ts
    at ReflectorHost.findDeclaration (C:\Users\Tom\git\angular2-webpack-starter\node_modules\@angular\compiler-cli\src\reflector_host.js:173:23)
    at StaticReflector.initializeConversionMap (C:\Users\Tom\git\angular2-webpack-starter\node_modules\@angular\compiler-cli\src\static_reflector.js:147:55)
    at new StaticReflector (C:\Users\Tom\git\angular2-webpack-starter\node_modules\@angular\compiler-cli\src\static_reflector.js:42:14)
    at Function.CodeGenerator.create (C:\Users\Tom\git\angular2-webpack-starter\node_modules\@angular\compiler-cli\src\codegen.js:142:31)
    at codegen (C:\Users\Tom\git\angular2-webpack-starter\node_modules\@angular\compiler-cli\src\main.js:7:36)
    at Object.main (C:\Users\Tom\git\angular2-webpack-starter\node_modules\@angular\tsc-wrapped\src\main.js:30:16)
    at Object.<anonymous> (C:\Users\Tom\git\angular2-webpack-starter\node_modules\@angular\compiler-cli\src\main.js:14:9)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
Compilation failed

When I change both "target" and "module" to "es2015", I get further, I think, messages about being unable to resolve stuff like @angular/router, etc. The furthest I've gotten is getting it to compile into output/, but it won't generate factory classes.

Curiously, when I add "moduleResolution": "node", I go back to square 1 above.

Is there any chance you could take a look at my fork and see if anything obvious jumps out at you? The only other examples of working AoT are super minimal.

git clone https://github.com/tomgeorge/angular2-webpack-starter
git checkout -b aot && git pull origin aot
npm install
npm run ngc

CSS/SCSS

Seems the minimal branch is missing the commands/files for the css and scss.

Feature Request: Redux DevTools integration config

Since this starter includes ngrx, I think this might be a useful feature.

It turns out ngrx/store is compatible with this Redux dev tools chrome/firefox extension: https://github.com/zalmoxisus/redux-devtools-extension . And after playing around with it, it has a lot more features and seems generally more useful than the ngrx-store-log-monitor. It's being used in the ngrx-example-app also.

But you have to use StoreDevtoolsModule.instrumentOnlyWithExtension() instead of StoreDevtoolsModule.instrumentStore({...etc}).

I was thinking in constants.js, we could add something like 'extension' to the dev tools options:

/**
 * specifies which @ngrx dev tools will be available when you build and load
 * your app in dev mode. Options are: monitor | logger | both | extension | none
 */
exports.STORE_DEV_TOOLS = 'extension';

Then in store-devtools.module.ts , we'd add another clause - something like this:

else if (ENV === 'development' && !AOT && 'extension' === STORE_DEV_TOOLS)
    IMPORTS.push(StoreDevtoolsModule.instrumentOnlyWithExtension());

I tried this, but it doesn't seem to work. It does work when I have it directly in my app.module.ts's imports, but I'd prefer to add it conditionally based on ENV, as I described above.

Here's more info: ngrx/store-devtools#27 (comment)

Might be nice to have, in my opinion anyways :) Thanks for all the work you've put into this seed so far!

Can't npm install - getting 504

That's weird - I've been trying to 'npm install' this repo for hours and I get 504 when it tries to fetch

fetchMetadata: sill mapToRegistry uri https://registry.npmjs.org/webpack-dev-middleware

I tried on another machine - same thing. Does anybody know what does it mean? It worked flawlessly yesterday...

Question: Usage of some of the libraries

@qdouble for my knowledge, would you know the usage of the following libraries?

1. "body-parser": "1.15.2"
2. "compression": "1.6.2"
3. "cookie-parser": "1.4.3"
4. "express": "4.14.0"
5. "methods": "1.1.2"
6. "reflect-metadata": "0.1.8" (angular-cli does not use this, looks like not required with core-js)

Thanks
Murali

Using Bootstrap 3, my take

I need to use Bootstrap 3 in my test app which is based on the minimal branch. So, these are my changes:

1. npm install bootstrap-loader
2. npm install jquery --save-dev
3. npm install bootstrap-sass css-to-string-loader [email protected] file-loader sass-loader style-loader url-loader --save-dev

constant.ts:

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

exports.MY_CLIENT_PLUGINS = [
  // use this to import your own webpack config Client plugins.
   new ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery',
            "Tether": 'tether',
            "window.Tether": "tether"
        })

]

main.browser.ts:

import 'jquery';
import 'bootstrap-loader';

app.component.html (just to see if Bootstrap works):

<header>
    <h1>Angular Starter App</h1>
    <ul id="my-navlist">
        <li *ngFor="let view of views">
            <a [routerLink]="view.link" routerLinkActive="active-link">{{view.name}}</a>
        </li>
    </ul>
</header>
<div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <!--<form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>-->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <main>
        <router-outlet (activate)="activateEvent($event)" (deactivate)="deactivateEvent($event)"></router-outlet>
    </main>
</div>

rename app.component.css to app.component.scss and add this import:

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

app.component.ts - change accordingly:

  styleUrls: ['./app.component.scss'],

webpack.config.ts - add loaders:

      {
        test: /\.(sass|scss)$/,
        loaders: ['css-to-string-loader', 'css-loader?sourceMap', 'resolve-url', 'sass-loader?sourceMap']
      },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' },

Now, since I'm not even close to webpack (and AOT, DLLs, etc) expert, my question - is this correct approach? I see that it works in dev and prod, haven't tried AOT yet.

Can we have a separate branch for Bootstrap 3? I may try to use ng2-bootstrap later..

error when installing packages node

first thank you for this great repository, https://github.com/qdouble/angular2webpack2-starter/tree/no-universal-support
when I install the packages with the npm i command, I get the following error:

npm ERR! Fetch failed https://registry.npmjs.org/angular2-router-loader/-/angular2-router-loader-0.3.1.tgz

that solution can give you is that please?

npm run test fails with node v4

npm run test throws an error:

SyntaxError: Unexpected token ...

It says the error is happening at /config/karma.conf.js:9:27 but I'm pretty sure the culprit is inside the required file at /config/webpack.test.js:143:7.

I'm running node version 4.2.6, which might be causing the issue. Perhaps this is just a documentation bug.

@ngrx/router-store is missing from package.json