Added this to default project: https://github.com/shakacode/bootstrap-loader

imported into app.js and got:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: Error: only one instance of babel-polyfill is allowed

Any idea on best way to include bootstrap into project?

It may be due to fact that the repository is missing an example, but component binding is not working as expected: The parameters are not passed/bind to controllers.

<hero value="foo"></hero>

// hero.component.js
import template from './hero.html';
import controller from './hero.controller';

let heroComponent = {
  restrict: 'E',
  bindings: {
    value: '@'
  },
  template,
  controller,
  controllerAs: 'vm'
};

class HeroController {
  constructor() {
    this.name = 'hero';
    console.log(this.value); // undefined!
  }
}

<section class="hero">
  <h1>This is the NG6 starter</h1>
  <!-- Value is also undefined within template -->
  <h3>You can find me inside {{ vm.name }}.html {{ vm.value }}</h3>
</section>

A bug or user error?

Hi,

Not sure if this topic has been already raised, i got trouble with a fresh clone of the repo (jspm branch) when I tried to build the app with "gulp build":

Error: Unable to calculate canonical name to bundle file:///f:/ng6/NG6-starter/../app.js
    at getCanonicalNamePlain (f:\webapp\ng6\NG6-starter\node_modules\jspm\node_modules\systemjs-builder\lib\utils.js:177:13)
    at getCanonicalName (f:\webapp\ng6\NG6-starter\node_modules\jspm\node_modules\systemjs-builder\lib\utils.js:88:19)
    at f:\ng6\NG6-starter\node_modules\jspm\node_modules\systemjs-builder\lib\arithmetic.js:84:38
    at process._tickCallback (node.js:366:9)

My relative path problem has been 'solved' when i replaced l.19 in Gulpfile.js by:

return path.relative(root, path.resolve(path.join(root, resolvePath, glob)));

Does anyone already encounter this issue on windows and solved it in a cleaner way?
Thanks

As referenced in #25, when running gulp build task in jspm branch, an error occurs that originates from the CSS plugin

Broken @import declaration of "client\app\common\navbar\navbar.css"
Broken @import declaration of "client\app\common\hero\hero.css"
Broken @import declaration of "client\app\components\home\home.css"
Broken @import declaration of "client\app\components\about\about.css"
Broken @import declaration of "client\app\app.css"
Broken @import declaration of "jspm_packages\github\necolas\[email protected]\normalize.css"
    at Loader.bundle (file:D:/ILM/GithubForks/NG6-starter/jspm_packages/github/systemjs/[email protected]/css-builder.js:48:11)
    at file:D:/ILM/GithubForks/NG6-starter/jspm_packages/github/systemjs/[email protected]/css.js:83:22
    at tryCatchReject (D:\ILM\GithubForks\NG6-starter\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src.js:1183:30)
    at runContinuation1 (D:\ILM\GithubForks\NG6-starter\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src.js:1142:4)
    at Fulfilled.when (D:\ILM\GithubForks\NG6-starter\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src.js:930:4)
    at Pending.run (D:\ILM\GithubForks\NG6-starter\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src.js:821:13)
    at Scheduler._drain (D:\ILM\GithubForks\NG6-starter\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src.js:97:19)
    at Scheduler.drain (D:\ILM\GithubForks\NG6-starter\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src.js:62:9)
    at process._tickCallback (node.js:355:11)

Hi, getting the following error trying to run Gulp for the NG6-starter-jspm version. Have I missed the install of a transpiler? From what I can see all the Node modules seem to be in place. Still a novice with this technology, any help would be much appreciated.
Cheers, Colin

E:\AngularJS\ES2015\NG6-starter-jspm>gulp
[20:32:56] Using gulpfile E:\AngularJS\ES2015\NG6-starter-jspm\Gulpfile.js
[20:32:56] Starting 'serve'...
[20:32:56] 'serve' errored after 2.4 ms
[20:32:56] E:\AngularJS\ES2015\NG6-starter-jspm\node_modules\chokidar-socket-emi
tter\server.js:2
const chokidar = require('chokidar')
^^^^^
SyntaxError: Use of const in strict mode.
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Gulp. (E:\AngularJS\ES2015\NG6-starter-jspm\Gulpfile.js:38:2)
at module.exports (E:\AngularJS\ES2015\NG6-starter-jspm\node_modules\gulp\no
de_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (E:\AngularJS\ES2015\NG6-starter-jspm\node_mod
ules\gulp\node_modules\orchestrator\index.js:273:3)

I followed the setup instructions (clone then npm install), and when I run gulp, everything starts fine. But if I run npm test, I get this error:

module.js:338
    throw err;
    ^

Error: Cannot find module 'chai'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.require.resolve (module.js:388:19)

I see karma-chai is a dependency, and it is installed in node_modules.

I am using node v4.1.2 and npm 3.3.6.

our logo for the jspm branch has webpack on it

It would be great if we have scss support.

Now that we have successful builds, I'm having an issue actually loading the site from the dist directory. As far as environment, I'm using Node v4.1.1and NPM v3.3.8 along with node-static to host the dist directory.

It looks like there are a chunk of System.register invocations at the bottom of the bundle. The issue here is that System is aliased as $__System everywhere else in the bundle.

I messed with this for a while this morning and didn't get anywhere. There are a number of issues that sound similar to this one such as this -- however it documents the problem as being solved.

Being that this is just a starter project, I propose maybe we just do this.

Guys, with this syntax:

$stateProvider
        .state('home', {
            url: '/',
            template: '<home></home>'
        });

It's possible to use resolve? Or do we need a controller property in the state in order to use it?

Thank you.

Hi,

I have a variables.styl which I want to be accessible in all other stylesheets under their component folder. Is this possible?

Cheers

I think this will be much appropriate way to handle components generation in future. Any thoughts?

I would like to build my app, upload it and run on services like Heroku or Divshot. At the moment, it's not clear how to do it using NG6-starter. Can you provide some build process and add a proper section to documentation on how to to that in the best way?

karma-chai
karma-webpack

are missing from the devDeps in package.json and required to be installed to run the tests.

Needs production build step

please update gulpfile to es6 babel via gulpfile.babel.js. All that is needed is to change the name and use es6

I followed the Getting Started Guide of the JSPM Branch, but I'm not able get the project running, since npm i is failing every time.

I get following error with a socket.io dependency:

warn github:socketio/[email protected] dependency installs skipped as it's a GitHub package with no registry property set.
     If the dependencies aren't needed ignore this message. Alternatively set a registry or dependencies override or use the npm registry version at jspm install npm:socket.io-client@^1.3.7 instead.

and also with the tty-browserify package:

Looking up npm:tty-browserify

warn Error on download for github:jspm/nodelibs-tty
     Error: getaddrinfo ENOTFOUND
         at errnoException (dns.js:37:11)
         at Object.onanswer [as oncomplete] (dns.js:124:16)

warn Error on download for github:jspm/nodelibs-net
     Error: getaddrinfo ENOTFOUND
         at errnoException (dns.js:37:11)
         at Object.onanswer [as oncomplete] (dns.js:124:16)

err  Error downloading github:jspm/nodelibs-tty.

I tried to reinstall with cleared caches (npm cache clear and jspm cc), but this didn't help.

Edit: Github credentials are configured via jspm registry config github.
Edit2: OSX 10.11, JSPM v0.16.17, Node.js v0.10.33, NPM v3.3.5.

I followed the instructions and everything installed, but when I run karma start I get the following warnings:

WARN [reporter]: Can not load "mocha", it is not registered!
Perhaps you are missing some plugin?
WARN [watcher]: Pattern "/Users/Quirksmode/Downloads/NG6-starter-jspm/client/jspm_packages/es6-module-loader.js" does not match any file.
INFO [karma]: Karma v0.12.36 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome

Hi,
The resolve for ui-router is neatly described in an other thread.
How would one go about to resolve with the new router?

Thank you

thanks for the work !

i am confused about how to use angular service provider and filter ... in this es6 class-based repo , can you give me some demo?

When I run gulp build on the jspm branch the build task fails. I don't know enough yet about jspm to understand if this is an issue with the gulp task.

From what I can see, the bundling process is looking for common/common.js file in the wrong location (not relative to app folder).

    $ gulp build
[13:10:11] Using gulpfile c:\dev\tutorials\NG6-starter\Gulpfile.js
[13:10:11] Starting 'build'...
[13:10:12] 'build' errored after 1.27 s
[13:10:12] Error: Error loading "common/common" at file:c:/dev/tutorials/NG6-starter/common/common.js
Error loading "common/common" from "client\app\app" at file:c:/dev/tutorials/NG6-starter/client/app/app.js
ENOENT, open 'c:\dev\tutorials\NG6-starter\common\common.js'
    at Error (native)

It would be helpful to have an example or two of compiling a template so that you can do things like expect(component.find('element').text()).to.be.... I'm fairly new to setting up directive tests, and having trouble getting them set up with this starter repo.

On the same note, what is the best way to turn the template string that is available in the unit test into a testable directive?

Master branch:
https://github.com/angular-class/NG6-starter/blob/master/generator/component/temp.component.js
jspm branch:
https://github.com/angular-class/NG6-starter/blob/jspm/generator/component/temp.component.js

We must remove the ".js", becouse import does not see it

Hi, i had download the repo to local, and followed the guide.

but when i ran gulp, an error throwed:

module.js:338
    throw err;
          ^
Error: Cannot find module 'immutable'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (D:\project\ng-starter\node_modules\browser-sync\lib\h
ooks.js:4:20)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

My computer environment is :

win7
node -v 
v0.12.0
npm -v 
2.11.2

I'm having trouble navigating to localhost:3000/anypath using a new tab in chrome instead of going to localhost:3000 then clicking a link that directs me to localhost:3000/anypath

Is there a setting in the gulpfile.babel.js or in the ui-router setup that I need to change in order to allow this functionality?

I really really hate this pattern when you have to list your dependency twice

import angular from 'angular';
import Home from './home/home';
import About from './about/about';

let componentModule = angular.module('app.components', [
  Home.name,
  About.name
]);

export default componentModule;

In AMD I used to do this:

var angular = require('angular');
var moduleId = require('module').id;
var componentModule = angular.module(moduleId, [
  require('./home/home'),
  require('./about.name')
]);
return moduleId;

Any ideas how to improve it in ES6?

Parent-child relationship between controllers, directives.
In es5-angular these relationship are implemented using scope and scope inheritance.
Now we use classes, extends, super methods.

But my problem is when I create directive class and then controller class that uses some data from directive class, controller class will be a child of directive class, but in this case directive class constructor will be called 2 times, so I got an error : Multiple directives [searchBar (module: ontour), searchBar (module: ontour)] asking for template on.

It's a big question, i can't find any examples of it in this boilerplate and articles on web.

hi.
In the spec example of "home" component, a controller is created with the new operator.
what if, a controller is injected with services?
how should that be addressed?
i.e.:

// Given the controller is injected with these:
class HomeController {
  constructor(Users, $http, $stateParams) {
    this.name = 'home';
  }
}

export default HomeController;

Should I use the $controller in the injector?

beforeEach(inject((_$rootScope_, $controller) => {
    $rootScope = _$rootScope_;
    scope = $rootScope.$new();
    makeController = () => {
      return $controller('HomeController as vm', { $scope: scope });
    };
  }));

Thanks.

Off a fresh install - running gulp outputs:

Error: Cannot find module 'dateformat'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/gulp/node_modules/gulp-util/index.js:5:9)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)

Anything I'm missing here

node v.5.1.0, Windows 10 x64

I run npm i or npm i clone-stats, but get error:

module.js:340
    throw err;
    ^

Error: Cannot find module 'clone-stats'

I removed node-modules folder and reinstalled modules without positive result

I've been struggling with this all weekend... How do you use this style of component definition with a custom directive which takes an attribute? That is...

Any pointers to a working example would be great...

While running npm test
I get:

Chrome 47.0.2526 (Windows 10 0.0.0) ERROR
  Uncaught TypeError: _angular2.default.module(...).component is not a function
  at C:/xampp/projects/project/spec.bundle.js:31716 <- webpack:/C:/xampp/projects/project/client/app/common/hero/hero.js:5:0

There is a gulpfile.babel.js file at the root, how to run gulp tasks from that file?

Here my webpack.config.js

var webpack = require("webpack");
module.exports = {
  devtool: 'sourcemap',
  output: {
    filename: 'bundle.js'//,
    //path: './build'
  },
  plugins:[
    new webpack.optimize.UglifyJsPlugin()
  ],
  module: {
    preLoaders: [{
      test:    /\.js$/,
      exclude: [/app\/lib/, /node_modules/],
      loader:  'jshint!jscs'
    }],
    postLoaders: [
      { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
      { test: /\.html$/, loader: 'raw' },
      { test: /\.styl$/, loader: 'style!css!stylus' },
      { test: /\.css$/, loader: 'style!css' }
    ]
  }
};

Here the error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.components due to:
Error: [$injector:modulerr] Failed to instantiate module home due to:
Error: [$injector:unpr] Unknown provider: e

Here my home module:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ngSanitize from 'angular-sanitize';
import homeComponent from './home.component';

let homeModule = angular.module('home', [
  uiRouter,
  ngSanitize
])

.config(($stateProvider, $urlRouterProvider) => {
  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('home', {
      url: '/',
      template: '<home></home>'
    });
})

.directive('home', homeComponent);

export default homeModule;

i am learning to include code coverage for unit testing the angularjs project. i started by referencing this project by including my karma coverage in the karma config

module.exports = function (config) {
config.set({
...

// list of files/patterns to load in the browser
files: [
  'client/app/**/**/!(*spec).js',
  'client/app/**/!(*spec).js',
  'client/app/!(*spec).js',
  {pattern: 'spec.bundle.js', watched: false}
],

// files to exclude
exclude: [],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  'client/app/**/**/!(*spec).js': ['webpack', 'sourcemap', 'coverage'], 
  'client/app/**/!(*spec).js': ['webpack', 'sourcemap', 'coverage'],  
  'client/app/!(*spec).js': ['webpack', 'sourcemap', 'coverage'],
  'spec.bundle.js': ['webpack', 'sourcemap'] 
},

webpack: {
  devtool: 'inline-source-map',
  module: {
    loaders: [
      { test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
      { test: /\.html/, loader: 'raw' },
      { test: /\.styl$/, loader: 'style!css!stylus' },
      { test: /\.css$/, loader: 'style!css' }
    ]
  }
},

webpackServer: {
  noInfo: true // prevent console spamming when running in Karma!
},

// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha', 'coverage'],

...
});
};

However , i am getting errors :

Module not found: Error: a dependency to an entry point is not allowed
@ ./client/app/common/hero/hero.spec.js 13:21-48

ERROR in ./client/app/components/about/about.spec.js
Module not found: Error: a dependency to an entry point is not allowed
@ ./client/app/components/about/about.spec.js 5:13-31

ERROR in ./client/app/components/about/about.spec.js
Module not found: Error: a dependency to an entry point is not allowed
@ ./client/app/components/about/about.spec.js 9:23-52

ERROR in ./client/app/components/about/about.spec.js
Module not found: Error: a dependency to an entry point is not allowed
@ ./client/app/components/about/about.spec.js 13:22-50
28 10 2015 09:46:11.957:INFO [karma]: Karma v0.13.14 server started at http://lo
calhost:9876/
28 10 2015 09:46:11.992:INFO [launcher]: Starting browser Chrome
28 10 2015 09:46:12.782:INFO [Chrome 46.0.2490 (Windows 8.1 0.0.0)]: Connected o
n socket QXFM-Xx_2Wtah3ArAAAA with id 79300169
Chrome 46.0.2490 (Windows 8.1 0.0.0) ERROR
Uncaught Error: Cannot find module "./common/common"
at D:/NG6-starter/NG6-starter-master/client/app/app.js:9 <- client/app/app.js:
1:24

amazing work!

but there is no method for minify/uglify code support ...

Our jspm readme still has some references to webpack such as we use webpack for tests

the question of inheritance in angular 1.* using ES2015 is not even opened

So with angular 1.5 around the corner, I think it would be nice to refactor the components to use the new .compontent() declaration syntax. You can read more about it here: http://toddmotto.com/exploring-the-angular-1-5-component-method/

What do you think? I think I will give it a shot.

Currently we have something like this:

// app/components/something/something.js
let someModule = angular.module('something.module', [depA, depB]);

export default someModule;

// app/app.js
import someModule from './something/something';

angular.module('app', [someModule.name]);

I have two questions:

1. why we are using let keyword? Module instance should be immutable (const keyword), isn't it?
2. why we are exporting module but not only it's name?

// app/components/something/something.js
export default angular
    .module('app.something', [depA, depB])
    .name;

// app/app.js
import something from './something/something';

angular.module('app', [something]);

How to go about injecting a service into a controller, I have tried .service('tickerTapeService', tickerTapeService) as well as importing it in the controller itself. Can't seem to find solution or documentation.

This repo serves as a good starting point setting up a project. Any chance we could see typescript as webpack loader instead of Babel?

Are there any plans to add E2E tests with protractor?

These attributes to block user from zooming is a very hostile practice:

<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">

It forces users with impaired vision into reading uncomfortable sized text or leaving the site for good.
It is especially harmful recommendation in a framework with many developers simply copying the files without thinking about the consequences.
If people need to zoom your site, they have a reason to do so and nothing can put them off more if they can't do it. No design is possible to accommodate everyone at the same time, and letting user to zoom is a very simple solution. Why blocking it is simply beyond my understanding. People will leave your site and you won't even know why!