preboot / angular-webpack Goto Github PK

A complete, yet simple, starter for Angular v2+ using webpack

License: MIT License

JavaScript 65.48% CSS 3.22% TypeScript 28.18% HTML 3.11%

angular-webpack's Introduction

angular-webpack

A complete, yet simple, starter for Angular v2+ using Webpack.

This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. Using Webpack for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.

Best practices in file and application organization for Angular.
Ready to go build system using Webpack for working with TypeScript.
Testing Angular code with Jasmine and Karma.
Coverage with Istanbul
End-to-end Angular code using Protractor.
Stylesheets with SASS (not required, it supports regular css too).
Error reported with TSLint and Codelyzer.
Documentation with TypeDoc.

Warning: Make sure you're using the latest version of Node.js and NPM

Quick start

# clone our repo
$ git clone https://github.com/preboot/angular-webpack.git my-app

# change directory to your app
$ cd my-app

# install the dependencies with npm
$ npm install

# start the server
$ npm start

go to http://localhost:8080 in your browser.

Getting Started
Frequently asked questions
TypeScript
License

Getting Started

Dependencies

What you need to run this app:

node and npm (Use NVM)
Ensure you're running Node (v6.x.x+) and NPM (3.x.x+)

Installing

fork this repo
clone your fork
npm install to install all dependencies

Developing

After you have installed all dependencies you can now start developing with:

npm start

It will start a local server using webpack-dev-server which will watch, build (in-memory), and reload for you. The application can be checked at http://localhost:8080.

As an alternative, you can work using Hot Module Replacement (HMR):

npm run start:hmr

And you are all set! You can now modify your components on the fly without having to reload the entire page.

Testing

1. Unit Tests

single run: npm test
live mode (TDD style): npm run test-watch

2. End-to-End Tests (aka. e2e, integration)

single run:
- in a tab, if not already running!: npm start
- in a new tab: npm run webdriver-start
- in another new tab: npm run e2e
interactive mode:
- instead of the last command above, you can run: npm run e2e-live
- when debugging or first writing test suites, you may find it helpful to try out Protractor commands without starting up the entire test suite. You can do this with the element explorer.
- you can learn more about Protractor Interactive Mode here

Production

To build your application, run:

npm run build

You can now go to /dist and deploy that to your server!

Documentation

You can generate api docs (using TypeDoc) for your code with the following:

npm run docs

FAQ

Do I need to add script / link tags into index.html ?

No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes.

How to include external angular libraries ?

It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the bootstrap of your application.

How to include external css files such as bootstrap.css ?

Just install the lib and import the css files in vendor.ts. For example this is how to do it with bootstrap:

npm install bootstrap@next --save

And in vendor.ts add the following:

import 'bootstrap/dist/css/bootstrap.css';

TypeScript

To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.

Use a TypeScript-aware editor

We have good experience using these editors:

Visual Studio Code
Webstorm 11+
Atom with TypeScript plugin
Sublime Text with Typescript-Sublime-Plugin

License

MIT

angular-webpack's People

Contributors

Stargazers

Watchers

Forkers

sgruhier nathanwalker mrichard sethdford quinntynebrown sambhav-gore d4ncer janusnic shawnrmoss jimthedev andrehaveman tb florentulve crissmoldovan cmelion adrianromanko bryantluu vesteraas gravity-addiction attilacsanyi jimitndiaye advantagecs geminiyellow mackentoch siwananda yngvebn mshahin364 foxandxss macanhhuy akfork mohammedpascal cloudcck dr3am3r edanweis rahulraghavankklm oocx devilsuraj sabinmarcu jgquinn viniciusoyama otg-meldar danmo pingjiang achristoph pauljeter lgringo stevie6410 defel selleo smorcuend oevgeny jakehockey10 phamducmanh1989 voor natedean jabhishek rockguo2015 hoanganhtuanbk pjmolina rhessus bman2338 wrenth04 web-techwatch dxbykov tech-no-logical reyramos gusgard rose-m alaulkar q-free-openroads pfried jasedwards dangerdave007 leonbovett dianoga ericangeles abner sraparlatmw subliminalvoice un33k ajayiyer1 mkelley33 zombiqwerty armiekk asubota lion2240 satanworker rpenrose bhaniel zombiefredrik ohadgk michaelchiche allanbond visualhackers borntorun omt66 enyachoke mkcom jj-jiles dreamapplehappy

angular-webpack's Issues

Json file 404

I just placed json file under services/api but when running the app my json file is not available and server returning 404 status.

404 - Cannot GET /services/api/data.json

npm install fails with missing peer dep for webpack

│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── UNMET PEER DEPENDENCY webpack@>=1.0.0 <3
│ └─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]

It's blowing up on npm install :(

npm run lint linting 0 files

I just made a git clone, then npm install and postinstall.
After I try to npm run lint I get Linting 0 files.
How do I make it lint the ts files? Didn't change the tslint or anything.

Howto use bootstrap 4 with angular2-webpack

Hi, how can I get the css for bs4 into my app ? I tried using the following in style/app.scss:

$icon-font-path: "~bootstrap/fonts/bootstrap/";
@import '~bootstrap/scss/bootstrap';

[email protected] does not satisfy its siblings' peerDependencies requirements

Trying to npm install on a freshly downloaded copy, we get:

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.3.0
npm ERR! npm  v2.14.12
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.9.11
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.12.6
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.4.0
npm ERR! peerinvalid Peer [email protected] wants webpack@>=2.0.3-beta <3

npm ERR! Please include the following file with any support request:
npm ERR!     D:\<some path>\angular2-webpack\npm-debug.log

Current environment is:

Windows 10 x64
NVM 1.1.0
node 4.3.0
npm 2.14.12
tsc 1.0.3.0

No global package installed beside npm and typescript

huge output files

I'm not sure if it's a problem or just some misconfiguration.
but the output files vendor are approximately 4 to 5 mb and the polyfills more than 1mb

attached a pic

thanks

source maps

I don's see anything about source maps, am I wrong?

Is this starter ready for RC0?

Any known issues if used for an RC0 project?

templateUrl instead of template

Is there a way to use templateUrl instead of template with require?

Best practice for adding non-angular2 library

Team,

What's the best practice on adding a non angular2 JS library that resides in CDN?
Also, what's the best practice to use google fonts?

Thanks!

Hit breakpoint on page refresh in browser dev tools?

When serving in development mode (npm start), one can open browser on http://localhost:8080/ and its dev tools, then set a breakpoint, e.g. in home.ts#ngOnInit(). When reloading page, execution should pause on that line.

Breakpoint seems to be ignored, although console shows logged message. Execution proceeds beyond that. Client app runs normally, no particular errors.

HEAD: 59ea711
Angular version: 2.0.0-beta.9
Browser: Chrome 49.0.2623.87 m

what is the usage of api.ts

crazy slow build and redeploment

Im using this project within docker containes, and it has uge time impact when used in a CI. the build of the container takes more then 20 min, and the redeployment as well, at least 10 min. I was wondering if there is any way to minimize the build time. For example cut most of the npm packages on certain environments.
Thanks.

Service workers

Just for thought...

What do you think about adding a service worker setup here? With a manifest and task in webpack?

what prompted the new layouts?

I'm having some issues understanding the new layouts.. so are we just putting all directives, pipes, services, components into one folder? is the .component.ts something that is required? seems to me like it's going to be difficult for anyone with a project larger than a couple of pages to find anything they need.

With this new structure, i'd have 37 folders in my app/ directory and have no idea what was a component/pipe/directive/service without going into the folder and see what the file extensions are. I don't get this new layout.

Only works when deployed to root of host

I copied the dist contents to mydomain.com/path/to/myapp and found the scripts and other webpacked stuff was 404ing looking for mydomain.com/js/vendor.[hash].js (etc). I see that your publicPath (line 60 in webpack.config.js) is set to '/'. I changed it to empty string and it seems to work.

But I see that line is involved in your recent font work. I'm not using fonts for the time being, so, as I mentioned, my site seems to be working in a subfolder but I didn't want to vary substantially from your awesome config and spoil my option for fonts later.

I wondered if anyone else found a way to run in a production subfolder. Is that intentionally not supported? Is that in general a bad practice?

[question] How do I import alertify.js

I'm a webpack n00b and trying to figure out how to use this starter with alertify.js.

I'm confused as there has previously been an alertify issue discussed before so not sure whether my problem relates to that or my use of angular2-webpack.

npm install alertify.js --save

about.ts

import {Component, OnInit} from 'angular2/core';
import alertify from 'alertify.js';

@Component({
  selector: 'about',
  template: require('./about.html'),
  styles: [require('./about.scss')],
  providers: [],
  directives: [],
  pipes: []
})
export class About implements OnInit {

  constructor() {
    // Do stuff
  }

  ngOnInit() {
    console.log('Hello About');
    alertify.success("Alertify is working!");
  }

}

JS Console

./src/app/components/about/about.ts
(2,22): error TS2307: Cannot find module 'alertify.js'.

Any help appreciated!

Missing shims for IE

Angular2 beta 7 currently requires several shims to work with IE. If you build and run the project as-is in IE11, it will throw several exceptions and fail to start:

Line: 38
Error: Object doesn't support property or method 'keys'
Line: 422
Error: Unable to get property 'createFromList' of undefined or null reference

To fix, I modified vendor.ts to add the following lines at the top:

// fixes for IE
import 'es6-shim/es6-shim.js';
import './shims_for_IE.js';

The shims_for_IE.js file is located in node_modules/angular2/es6/dev/src/testing/shims_for_IE.js. However, I was not able to import directly from this path. Webpack kept claiming that it could not find the file/directory. I'm not sure if a package.json file somewhere along the path is confusing things, or why that doesn't work. I finally gave up and copied shims_for_IE.js to the my-app\src folder so that it sits next to vendor.ts.

lodash?

I feel like lodash is an essential frontend library. I don't see many seeds using it out of the box and I think they should. It helps lessen a ton of boilerplate code and reduces lines of code in any production app.
What do you think we break the mold and be a starter that provides lodash integration out of the box?

Failed to decode downloaded font, again

The fix of #59 still does not work, try this:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/MaterialIcons.woff) format('woff');
}

This will only work with url(http://localhost:8080/fonts/MaterialIcons.woff), and hardcoding the dev host is a bad idea.

How to add vendor SVG TTF etc.

Do you know how it would be possible to include files like SVG and TTF in the build? When I add the imports into vendor.ts, I get the following error:

Failed to decode downloaded font: http://localhost:3000/

OTS parsing error: invalid version tag

Any ideas?

templateUrl vs template

Whats' the pros / cons btw of template: require("../file.html") vs templateUrl: "../file.html" ?

angular2-polyfills.js reruns 404 not found on Windows

I just updated my current project with this commit 4e797e4 and it is causing an issue http://localhost:8080/polyfills/angular2-polyfills.js reruns 404 not found which causing then this wired error chain:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/polyfills/angular2-polyfills.js
localhost/:164 Uncaught reflect-metadata shim is required when using class decorators
localhost/:75 Uncaught TypeError: di_1.Injectable is not a function

Then just for test I git clone the skeleton to check if there is same thing when running clean and so when I run npm start got exactly same error.

Typescript Definitions

Hello, could you put me in the right direction of how to add and import tsd to this seed? Thanks.

The angular-cli puts components created by 'ng generate component' in src/client/app/

The angular-cli places new components created by 'ng generate component' in src/client/app/ rather than the src/app/components folder that angular2-webpack uses for their components.

Here's the output of a ng generate component command I just ran:

craig@craig-G750JX:~/git/angular2-webpack$ ng generate component my-feature1
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
installing component
  create src/client/app/my-feature1/my-feature1.component.css
  create src/client/app/my-feature1/my-feature1.component.html
  create src/client/app/my-feature1/my-feature1.component.spec.ts
  create src/client/app/my-feature1/my-feature1.component.ts
  create src/client/app/my-feature1/index.ts
craig@craig-G750JX:~/git/angular2-webpack$

I am using angular-cli 0.0.33 with node 5.7.1.

How to use bootstrap.css in entire app with webpack?

[question] Where are entry JS scripts referenced in HTML?

Hello, trying to figure out how webpack bundling works with such a setup:

from webpack configuration it seems that vendor.js and app.js are the two bundles that should be built. Then (from our understanding) those should be referenced in some HTML page. But we could not find any reference to those. Could you help us figure out what are we missing?
Thanks

Old router

I can see the old router being used.
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';

Is there any issues with a new one?

karma says I am missing plugins

on my Windows 10 machine I get this from karma start

C:\Users\Me\Documents\GitHub\angular2-webpack>karma start
05 05 2016 10:53:13.622:WARN [preprocess]: Can not load "webpack", it is not registered!
  Perhaps you are missing some plugin?
05 05 2016 10:53:13.622:WARN [preprocess]: Can not load "sourcemap", it is not registered!
  Perhaps you are missing some plugin?
05 05 2016 10:53:13.653:WARN [reporter]: Can not load "coverage", it is not registered!
  Perhaps you are missing some plugin?
C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:9
      throw error('No provider for "' + name + '"!');
      ^

Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)
    at error (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:22:12)
    at Object.parent.get (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:9:13)
    at get (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:54:19)
    at C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\server.js:138:20
    at Array.forEach (native)
    at Server._start (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\server.js:137:21)
    at invoke (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:75:15)
    at Server.start (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\server.js:102:18)
    at Object.exports.run (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\cli.js:243:26)
    at Object.<anonymous> (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\bin\karma:3:23)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:139:18)
    at node.js:968:3

Failed to decode downloaded font

I have these references in my original material-design-lite html template which is working well:

<link rel="stylesheet" href="node_modules/roboto-fontface/css/roboto-fontface.css">
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" href="node_modules/material-design-lite/material.css">
<script src="node_modules/material-design-lite/material.js"></script>

Then I switched to angular2-webpack so I put these references in to vendors.ts which is looking like that:

import 'roboto-fontface/css/roboto-fontface.css';
import 'material-design-icons/iconfont/material-icons.css';
import 'material-design-lite/material.css';
import 'material-design-lite/material.js';

But when I loading the app the fonts(roboto-fontface.css) and icons(material-icons.css) not getting loaded/parsed by browser correctly and in Chrme Dev Console I can see some warnings related to that:

Failed to decode downloaded font: http://localhost:8080/
:8080/#/dashboard:1 OTS parsing error: invalid version tag

It is seams to be issue with file-loader webpack-contrib/file-loader#38

Then I tried that solution http://www.vimalselvam.com/2015/12/19/webpack-loader-for-fonts/
So come up with this {test: /\.((png|jpe?g|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff|woff2|ttf|eot|ico)$/, loader: 'file?name=[path][name].[ext]?[hash]'},
but got build errors:

ERROR in ./~/roboto-fontface/fonts/Roboto-Thin.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Thin.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:527-562 6:1146-1181

ERROR in ./~/roboto-fontface/fonts/Roboto-ThinItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-ThinItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:1758-1799 6:2431-2472

ERROR in ./~/roboto-fontface/fonts/Roboto-Light.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Light.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:3014-3050 6:3642-3678

ERROR in ./~/roboto-fontface/fonts/Roboto-LightItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-LightItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:4262-4304 6:4944-4986

ERROR in ./~/roboto-fontface/fonts/Roboto-Regular.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Regular.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:5542-5580 6:6188-6226

ERROR in ./~/roboto-fontface/fonts/Roboto-RegularItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-RegularItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:6824-6868 6:7524-7568

ERROR in ./~/roboto-fontface/fonts/Roboto-Medium.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Medium.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:8117-8154 6:8754-8791

ERROR in ./~/roboto-fontface/fonts/Roboto-MediumItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-MediumItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:9382-9425 6:10073-10116

ERROR in ./~/roboto-fontface/fonts/Roboto-BlackItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-BlackItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:14386-14428 6:15068-15110

ERROR in ./~/roboto-fontface/fonts/Roboto-Bold.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Bold.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:10651-10686 6:11270-11305

ERROR in ./~/roboto-fontface/fonts/Roboto-Black.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Black.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:13138-13174 6:13766-13802

ERROR in ./~/roboto-fontface/fonts/Roboto-BoldItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-BoldItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:11882-11923 6:12555-12596
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 325 bytes [rendered]
webpack: bundle is now VALID.

'isTest = true' freezing the build process

I just set isTest = true; in webpack.config.js build just freezes at 404s will fallback to /index.html

d:\Projects\angular2-webpack>npm start

> [email protected] start d:\Projects\angular2-webpack
> npm run server


> [email protected] server d:\Projects\angular2-webpack
> webpack-dev-server --inline --progress --port 8080


webpack: bundle is now VALID.
http://localhost:8080/
webpack result is served from /
content is served from ./src/public
404s will fallback to /index.html

Sound like an issue. Also FYI in that case I was referencing the latest angular2 beta.12

Wondering if you can help debugging with WebStorm?

Wondering if you can help debugging with WebStorm?
As per WebStorm they require that we debug against a dist directory as specified in: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

however, as per your scripts, when running webpack-dev-server, it is all in memory as in:

"server": "webpack-dev-server --inline --progress --colors --display-error-details --display-cached --hot --port=3000",

is it possible to run webpack-dev-server in a dist directory so we can have source maps so we can insert into WebStorm mapping for debugging?

Sean

npm run clean-start

I'm wondering how the server will run immediatley after removing node_moduules

test-watch fails

Indeed, no permutation of 'karma start' works for me unless the npm task is named 'test'.

output from npm run test-watch:
/Users/cfulneck/.nvm/versions/node/v5.6.0/bin/node /Users/cfulneck/.nvm/versions/node/v5.6.0/bin/npm run-script test-watch

[email protected] test-watch /software/cmelion/angular2-webpack
karma start --no-single-run --auto-watch

ts-loader: Using [email protected] and /software/cmelion/angular2-webpack/tsconfig.json

WARNING in ./src/app/app.spec.ts
[4, 3]: unused variable: 'injectAsync'
[6, 3]: unused variable: 'TestComponentBuilder'
[10, 35]: unused variable: 'Response'
[10, 45]: unused variable: 'ResponseOptions'
[34, 47]: missing whitespace

WARNING in ./src/app/app.spec.ts
Module parse failed: /software/cmelion/angular2-webpack/node_modules/tslint-loader/index.js!/software/cmelion/angular2-webpack/src/app/app.spec.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {
| it,
| inject,
@ ./src .spec.ts

.
.
.
webpack: bundle is now VALID.
28 02 2016 14:29:07.654:WARN [karma]: No captured browser, open http://localhost:9876/
28 02 2016 14:29:07.661:INFO [karma]: Karma v0.13.19 server started at http://localhost:9876/
28 02 2016 14:29:07.664:INFO [launcher]: Starting browser PhantomJS2
28 02 2016 14:29:08.286:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#o1RrFo5G96eL_HVhAAAA with id 58356197
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: webpackJsonp
at /software/cmelion/angular2-webpack/karma-shim.js:1

Use same port for devServer and protractor

Protractor is configured to test against port 3000.
When I "npm start" app is on port 8080.
Either protractor baseUrl is updated to 8080 or devServer has port: 3000.

Problem importing material design lite and route changing

I used the guidelines to import third-party css libraries to import material design lite:

In vendor.ts:
// Material Design Lite
import 'material-design-lite/dist/material.indigo-blue.min.css';
import 'material-design-lite/dist/material.min.js';

There is a strange problem happening, when I change route within the angular2 app it looks like all the styles from material design are lost.

I added material design through npm with:
npm install --save material-design-lite

This behaviour is also the same when I compile and run the production build. (npm run build)

Getting DEPRECATION WARNING since updating to beta 3

Since updating to beta 3, I get

DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask
lang.ts:356 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
angular2-polyfills.js:1152 DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask

Does the configuration of this seed need to be updated or is it something else?

How would you debug in vscode?

Just wondering what is the best approach to debug using vscode?

Should I just run npm run build #93 and debug dist by running live-server or something or there is a better way?

[Question] jQuery inclusion for Bootstrap

Hi,

First of all, thanks a lot for this great starter. It is probably the best and simplest I have found around.
I have an issue in making the jQuery variable global in order to use bootstrap's js.
In my vendor.ts, I have:

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import 'jquery/dist/jquery.js'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

I tried using require on jQuery but it always gave me the same error:

Uncaught Error: Bootstrap's JavaScript requires jQuery

Can anyone let me know how to do ?
Thanks a lot !

[doc] Update readme with global dependencies, if any

Hello

thanks for sharing this project. We were looking at a similar one, and there they mentioned global dependencies to be installed.

Does this starter project need some global dependencies as well? We could not find any mention on readme about it.

Thanks

can you recommend best way to load bootstrap.css?

can you recommend best way to load bootstrap.css?
of course it's css and not scss and I believe all css loading is disabled in your examples...

tx for the time

Sean

Getting Error during evaluation of "click" on production build

When trying to run the site from the /dist folder after doing an "npm run build", I get the following exception in chrome dev tools console:

Error during evaluation of "click",

TypeError: this.directive_1_0.onClick is not a function
    at t.ChangeDetector_e_0.handleEventInternal (viewFactory_e:275)
    at t.handleEvent (abstract_change_detector.js:58)
    at t.triggerEventHandlers (view.js:221)
    at eval (viewFactory_e:361)
    at dom_renderer.js:277
    at dom_events.js:28
    at e.run (angular2-polyfills.js:1243)
    at e.run (ng_zone.js:343)
    at t.run (ng_zone.js:292)
    at HTMLAnchorElement.i (dom_events.js:28)

Node version 5.6.0
NPM version 3.6.0

If you import bootstrap, it flickers on initial load because bootstrap stylesheet isn't rendered before js

Can you change it so that when you do a build it renders the stylesheet on top of js instead of it being in one? Or is there another work around? Seems like having it together can cause flicker with using Bootstrap.

Problem importing lodash partials from vendor.ts

Hi,

I'm using your seed to learn Webpack, and until now, everything works fine.

looking into the vendors.ts file, I see this is where you advice us to put vendor libs.

So I first tried with Lodash : in vendors.ts, I added import 'lodash'; and in the app, when I need it, I just set declare let _; to avoid ts errors. Works fine. And works as it would, I mean, Lodash is included in the vendor generated bundle.

As second attempt, I tried to import only one Lodash method, like Capitalizefor instance.
Hard to explain here all the things I tried, but none of them worked.

Can you please tell me :

how I can do that
is my goal (specific Lodash method included in vendor bundle and not in the app bundle) "the way it has to be"

Sorry for my bad english, I'm french, hope you'll understand me well ;)

Beta 1 breaking on production build, but working in development.

Hey, I'm running into an issue since upgrading to beta 1 where it will run fine but give errors like this when doing a production build...

No provider for t! (t -> t)

I've also seen undefined errors after with another app copy...any ideas as to what may be causing this? It runs fine in beta 0 and fine in beta 1 on watch, but not build.

What is the reason of importing js npm modules in vendor.ts?

I just installed d3 from npm and just import that on top of related component .ts file
import * as d3 from 'd3'; I haven't put anything like import 'd3'; in to vendor.ts and without doing that I have everything working fine.

So then I just comment all default imports in vendor.ts:

// import 'angular2/platform/browser';
// import 'angular2/platform/common_dom';
// import 'angular2/core';
// import 'angular2/router';
// import 'angular2/http';

// // RxJS
// import 'rxjs';

And still everything working just fine without any issues including building process.
So for me it is looks like there is no needs in vendor.ts in case of just javascript modules?
Any comments on that?

FROM THE DOCS:

How to include external css files such as bootstrap.css ?

Just install the lib and import the css files in vendor.ts. For example this is how to do it with bootstrap:

npm install [email protected] --save
And in vendor.ts add the following:

import 'bootstrap/dist/css/bootstrap.css';

close the thread, i'm not done.

you totally changed your folder structure mid-project. it's not like this style standard is new, it's been out for months.. i've lost all respect for your projects continuity. No way anyone in their right mind should follow this project after these recent changes.

Cannot find variable: Symbol

Hey there

I'm currently fooling around with your starter-project and I'm experiencing a weird error. When I'm using karma with PhantomJS (on windows, sadly) I get the following error from karma-shim.js:

29 03 2016 13:48:00.909:DEBUG [phantomjs.launcher]:   http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:7019 in getSymbolIterator
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:22950
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:22959
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21763
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21428
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21371
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21218
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20247
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:7273
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:7075
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:6368
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:6341
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:50
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
  http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:40

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
  ReferenceError: Can't find variable: Symbol
  at C:/pathToMyProject/karma-shim.js:7019 <- webpack:///~/angular2/src/facade/lang.js:408:0

That's the debug output of karma. When I use the Chrome-Launcher, everything works as expected but it's no use for any CI :-(

Cheers
Christoph

Unknown typings dependency es6-shim

I am trying to update my project based off your template with the change you make as you make them.

With the most recent changes, I am running npm install and getting:

typings ERR! message Unknown dependency: registry:dt/es6-shim#0.31.2+20160317120654

typings ERR! cwd /Users/sam/Code/groupinn
typings ERR! system Darwin 15.4.0
typings ERR! command "/usr/local/Cellar/node/5.10.1/bin/node" "/Users/sam/Code/groupinn/node_modules/typings/dist/bin/typings-install.js"
typings ERR! node -v v5.10.1
typings ERR! typings -v 0.6.10

typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>

Not sure why it's an unknown dependency, since I can do npm install es6-shim --ambient --save and it adds the exact same version number to typings.json.

missing reflect-metadata shim on my Windows machine

Getting Uncaught reflect-metadata shim is required when using class decorators.