fountainjs / generator-fountain-angular2

Yeoman 'fountain' generator to start a webapp with Angular 2

⚠️ Unmaintained

This project has been archived and is considered outdated and unmaintained.

With the massive rise of the CLI tools by each major JavaScript Web frameworks, it was become irrelevant to pursue the quest of being a competitive project scaffolder for modern Web project.

We officialy advise to use the coresponding CLI tools for the framework you use:

• create-react-app for React
• Vue CLI for Vue.js
• Angular CLI for Angular

Of course, we have some regrets regarding our users, Yeoman users and some goals we had with Fountain (like giving important tool choices to users, harmonizing projects configurations between frameworks...) but still, you can use official CLI tools with confidence as they are great project which went further for development experience and Web optimization.

Fountain Angular 2 Generator

Fountain Angular 2 Generator allows you to start an Angular2 web app with the best developer experience possible!

No matter what framework or module management you want to use, we got you covered with a cutting edge working configuration.

We use Gulp 4 as a task manager but we'll ask you questions about:

• Modules management: Webpack, SystemJS, none
• JS preprocessor: Babel, TypeScript, none
• CSS preprocessor: Sass, Stylus, Less, none

This generator is a sub-generator of the the Yeoman Fountain generator for webapps generator-fountain-webapp.

Generator Fountain Angular 2 structure

To utilize the best of the Yeoman infrastructure, we heavily rely on the composability features that the generators offer.

Thereby, each requirement for your application will be addressed by a dedicated Yeoman generator (generators utilized will vary depending on the options selected).

Additional information: DESIGN.md.

Web tooling layer

Module management layer

Usage

Requirement Node 6+ && NPM 3+

This generator is targeted to be used with Node >= 6.0.0 and NPM => 3.0.0. You can check your version number with the command

node --version && npm --version

Install

Install required tools yo:

npm install -g yo

Install generator-fountain-angular2:

npm install -g generator-fountain-angular2

Run

Create a new directory, and go into:

mkdir my-new-project && cd my-new-project

Run yo fountain-angular2, and select desired technologies:

yo fountain-angular2

Use NPM scripts

• npm run build to build an optimized version of your application in /dist
• npm run serve to launch a browser sync server on your source files
• npm run serve:dist to launch a server on your optimized application
• npm run test to launch your unit tests with Karma
• npm run test:auto to launch your unit tests with Karma in watch mode

Or Gulp tasks

If you have gulp-cli installed in global packages you can use equivalent:

• gulp or gulp build
• gulp serve
• gulp serve:dist
• gulp test
• gulp test:auto

If you don't have gulp-cli installed globally, the following error will occur:

/usr/local/lib/node_modules/gulp/bin/gulp.js:121 gulpInst.start.apply(gulpInst, toRun); TypeError: Cannot read property 'apply' of undefined

Sub-generators

Few sub-generators are available. You can see the full list by running yo --generators.
Each generator has 2 options:

• You can set the name of the generated item with --name
• You can set the path of the generated item with --dir

Example:

yo fountain-angular2:component --name myComponent --dir components/game

Start development

Changelog

Contributing

generator-fountain-angular2's Issues

Replace axios by angular2/http

Build error on systemjs (windows)

Description

This issue occur just after project generation when running "gulp".

I found this issue systemjs/builder#621, that lead to this one : systemjs/systemjs#1317.
It say that there is a fix 0.19.37 of systemjs.
What I had is "[email protected]" dependency of "[email protected]".
I changed jspm version in package.json to 0.17.0-beta.32 that depend on "[email protected]"
But below issue still occur.

Found also this mgechev/angular-seed#1227 (comment), but I do not know how to use it.

Error Message & Stack Trace

D:\Angular_2_test\yeoman>gulp
[09:35:06] Loading D:\Angular_2_test\yeoman\gulp_tasks\browsersync.js
[09:35:06] Loading D:\Angular_2_test\yeoman\gulp_tasks\build.js
[09:35:11] Loading D:\Angular_2_test\yeoman\gulp_tasks\karma.js
[09:35:14] Loading D:\Angular_2_test\yeoman\gulp_tasks\misc.js
[09:35:14] Loading D:\Angular_2_test\yeoman\gulp_tasks\scripts.js
[09:35:15] Loading D:\Angular_2_test\yeoman\gulp_tasks\styles.js
[09:35:15] Loading D:\Angular_2_test\yeoman\gulp_tasks\systemjs.js
[09:35:17] Using gulpfile D:\Angular_2_test\yeoman\gulpfile.js
[09:35:17] Starting 'default'...
[09:35:17] Starting 'clean'...
[09:35:17] Finished 'clean' after 57 ms
[09:35:17] Starting 'build'...
[09:35:17] Starting 'systemjs'...
[09:35:17] Starting 'systemjs:html'...
[09:35:17] Starting 'styles'...
[09:35:17] Starting 'other'...
[09:35:17] Starting 'replaceTemplates'...
[09:35:18] Finished 'other' after 110 ms
[09:35:18] Finished 'systemjs:html' after 788 ms
[09:35:18] Finished 'styles' after 791 ms
[09:35:18] Finished 'replaceTemplates' after 804 ms
[09:35:18] Starting 'systemjs'...
[09:35:21] 'systemjs' errored after 2.96 s
[09:35:21] Error on fetch for .tmp\templates\index.ts at file:///D:/Angular_2_test/yeoman/.tmp\templates\index.ts
        Error: ENOENT: no such file or directory, open 'D:\Angular_2_test\yeoman\.tmp\templates\index.ts'
    at Error (native)
Unhandled rejection Error: Uncaught, unspecified "error" event. ([object Object])
    at Gulp.emit (events.js:163:17)
    at Gulp.src.emit (D:\Angular_2_test\yeoman\node_modules\fwd\index.js:31:10)
    at Object.error (D:\Angular_2_test\yeoman\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
    at handler (D:\Angular_2_test\yeoman\node_modules\now-and-later\lib\mapSeries.js:43:14)
    at f (D:\Angular_2_test\yeoman\node_modules\once\once.js:25:25)
    at f (D:\Angular_2_test\yeoman\node_modules\once\once.js:25:25)
    at done (D:\Angular_2_test\yeoman\node_modules\async-done\index.js:24:15)
    at bound (domain.js:280:14)
    at runBound (domain.js:293:12)
    at tryCatcher (D:\Angular_2_test\yeoman\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (D:\Angular_2_test\yeoman\node_modules\bluebird\js\release\promise.js:510:31)
    at Promise._settlePromise (D:\Angular_2_test\yeoman\node_modules\bluebird\js\release\promise.js:567:18)
    at Promise._settlePromise0 (D:\Angular_2_test\yeoman\node_modules\bluebird\js\release\promise.js:612:10)
    at Promise._settlePromises (D:\Angular_2_test\yeoman\node_modules\bluebird\js\release\promise.js:687:18)
    at Async._drainQueue (D:\Angular_2_test\yeoman\node_modules\bluebird\js\release\async.js:138:16)
    at Async._drainQueues (D:\Angular_2_test\yeoman\node_modules\bluebird\js\release\async.js:148:10)

[09:35:21] The following tasks did not complete: default, build, <parallel>, systemjs
[09:35:21] Did you forget to signal async completion?

Config

{
  "generator-fountain-angular2": {
    "version": "1.0.0-rc1",
    "props": {
      "resolved": "C:\\Users\\WB\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-angular2\\generators\\app\\index.js",
      "namespace": "fountain-angular2:app",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "framework": "angular2",
      "modules": "systemjs",
      "css": "scss",
      "js": "typescript",
      "ci": [],
      "sample": "hello",
      "router": "router"
    }
  }
}

Environment

>node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v6.9.1
win32 10.0.10586

>yo --version
1.8.5

>npm --version
4.0.3

Generating Angular2, webpack, sass, travis, ui-router project is currently failing

Fountain generator with Angular2, webpack, Sass, Travis and UI-Router does not work when generating project.

To reproduce run:
yo fountain-angular2 and select the options mentioned above

Errors

ERROR in: node_modules/ui-router-ng2/ng2/uiRouterNgModule.d.ts

(3,10): error TS2305: Module '"/private-path/node_modules/@angular/core/index"' has no exported member 'NgModuleMetadataType'.

ERROR in ./src/app/routes.ts

ERROR: uiRouter.urlRouterProvider.otherwise(() => uiRouter.stateService.go('App'));

ERROR in ./src/app/index.ts

(8,3): error TS2345: Argument of type '{ imports: typeof BrowserModule[]; declarations: typeof HelloComponent[]; providers: (any[] | Typ...' is not assignable to parameter of type 'UIRouterModuleMetadata'.
  Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.

Config

{
"generator-fountain-angular2": {
"version": "1.0.0-rc1",
"props": {
"resolved": "/Users/username/.nvm/versions/node/v6.6.0/lib/node_modules/generator-fountain-angular2/generators/app/index.js",
"namespace": "fountain-angular2:app",
"argv": {
"remain": [],
"cooked": [],
"original": []
},
"framework": "angular2",
"modules": "webpack",
"css": "scss",
"js": "typescript",
"ci": [
"travis"
],
"sample": "hello",
"router": "uirouter"
}
}
}

Environment

Mac OSX 10.11.6
yo --version 1.8.5
npm --version  3.10.3

Angular 2 full release

FYI: http://angularjs.blogspot.com.au/2016/09/angular2-final.html

🔢

Getting console error and application not working

After installing generator and run npm run serve getting the below error in console.

Uncaught (in promise) Error: (SystemJS) Unexpected token <(…)

and application not showing anything in browser.

and am using angular2, typescript, systemjs, jspm

Import a project in Cordova

Description

Hi, i'm using fountainJs for my project but i have some problem to import the generated dist in a cordova project...

What I do :

• I generate a landing page
• with Webpack, angular 2, typeScript, less and no integration.
• build gulp
• copy dist in www directory of an hello world Cordova project.
• and run cordova emulate android

gulp serve:dist is ok, but my webview stay on loading...

In typescript, this problem could come from tsconfig options... but I can't find the good ones.

I have an older project with fountainJs1 that works on iOS with some changes :

• change <base>
• add scripts in header

like this :

<!doctype html>	    
<html>	    
<head>	      
<meta charset="utf-8">	      
<title>my app</title>	      
<meta name="description" content="">	      
<meta name="viewport" content="width=device-width">	      
<link rel="icon" type="image/png" href="favicon.ico" />	      
<link href="index-08d10f96abd704e0a9143baf70075f94.css" rel="stylesheet">	      
<script src="vendor-1edc16035a4f4c687293.js"></script>
<script src="app-1edc16035a4f4c687293.js"></script>	      
<base href="./">	    
</head>	    
<body ng-app="app">	      
<ui-view></ui-view>	    
</body>	    
</html>

But it does not work with fountainJs2 ...

Error Message & Stack Trace

Sory I have no log from emulator...

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular2": {
    "version": "1.0.0-rc2",
    "props": {
      "resolved": "/home/alexandre/tools/nodejs/lib/node_modules/generator-fountain-angular2/generators/app/index.js",
      "namespace": "fountain-angular2:app",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "framework": "angular2",
      "modules": "webpack",
      "css": "less",
      "js": "typescript",
      "ci": [],
      "sample": "techs",
      "router": "uirouter"
    }
  }
}

Environment

$ node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v7.0.0
linux 3.16.0-4-amd64
$ yo --version
1.8.5
$ npm --version
4.0.1

I really appreciate some help :)
Thx
Alex

Feature Request: One SCSS file for each component

Description

As a best practice, I would love to be able to have one SCSS file per component such as

src
├── app
│   ├── footer.html
│   ├── footer.scss
│   ├── footer.spec.ts
│   ├── footer.ts
│   ├── header.html
│   ├── header.scss
│   ├── header.spec.ts
│   ├── header.ts
│   ├── main.html
│   ├── main.scss
│   ├── main.spec.ts
│   ├── main.ts

Is it on your roadmap?

"home" sample page style fix

Sort of a non-issue but in the "home page" sample for the <div class="tech"></div> containers, you may want to remove the height property (or set its value to 'auto') from the styles or use some JS to equalize the heights of the boxes. Currently, the containers' heights are set to 15rem and any longer content flows outside of the container—at least this was the case with Angular2's text from the site I just scaffolded and checked in FF 47.

Removing the height property or setting it to 'auto' will fix the issue but the containers' heights will adjust based on their content. If you want the containers to all be the same height, you can use JS to determine the tallest container and set the others to match.

Gulpfile build also copy .ts file and .specs

Description

Hi.

Why the build command (gulp) also copy .ts and .specs files to /dist ? It's not relevant, and we don't need them as they are sources files.

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular2": {
    "version": "0.6.0",
    "props": {
      "resolved": "/usr/local/lib/node_modules/generator-fountain-angular2/generators/app/index.js",
      "namespace": "fountain-angular2:app",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "skip-cache": false,
      "skip-install": false,
      "framework": "angular2",
      "modules": "webpack",
      "css": "scss",
      "js": "typescript",
      "sample": "hello",
      "router": "router"
    }
  }
}

Cannot read property 'name' of undefined

Prerequisites

• We realize there is a lot of data requested here. We ask only that you do your best to provide as much information as possible so we can better help you.
• Support questions are better asked in one of the following locations:
  • Our Slack
  • Stack Overflow
• Ensure the issue isn't already reported.
• Should be reproducible with the latest generator-fountain-angular2 version.
  • (Ensure npm ls -g --depth=0 2>/dev/null | grep generator-fountain matches )

Delete the above section and the instructions in the sections below before submitting

Description

Attempting to convert project created by the generator to my needs. I have changed the "template engine" to use PUG. I'm replacing the techs component with my own items component. The items component displays correctly. But when clicking on a item in grid list, I receive the error outlined below "Cannot read property 'name' of undefined". As near as I can tell I have everything setup correctly. I have also attached a zip file of the full project.

Error Message & Stack Trace

ViewWrappedError
_nativeError
:
Error: Error in ./ItemComponent class ItemComponent - inline template:0:56 caused by: Cannot read property 'name' of undefined at ViewWrappedError.BaseError [as constructor] (http://localhost:3000/index.js:4088:34) at ViewWrappedError.WrappedError [as constructor] (http://localhost:3000/index.js:4117:16) at new ViewWrappedError (http://localhost:3000/index.js:33944:16) at _View_ItemComponent0.DebugAppView._rethrowWithContext (http://localhost:3000/index.js:57780:23) at _View_ItemComponent0.DebugAppView.detectChanges (http://localhost:3000/index.js:57766:18) at _View_ItemComponent_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/index.js:57684:19) at _View_ItemComponent_Host0.detectChangesInternal (/ItemModule/ItemComponent/host.ngfactory.js:32:8) at _View_ItemComponent_Host0.AppView.detectChanges (http://localhost:3000/index.js:57658:14) at _View_ItemComponent_Host0.DebugAppView.detectChanges (http://localhost:3000/index.js:57763:44) at ViewRef_.detectChanges (http://localhost:3000/index.js:34554:20) at RouterOutlet.activate (http://localhost:3000/index.js:37637:42) at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/index.js:10036:16) at ActivateRoutes.activateRoutes (http://localhost:3000/index.js:10014:22) at http://localhost:3000/index.js:9976:19 at Array.forEach (native) at ActivateRoutes.activateChildRoutes (http://localhost:3000/index.js:9975:29) at ActivateRoutes.activate (http://localhost:3000/index.js:9970:14) at http://localhost:3000/index.js:9711:56 at SafeSubscriber._next (http://localhost:3000/index.js:179:21) at SafeSubscriber.__tryOrSetError (http://localhost:3000/index.js:471:16) at SafeSubscriber.next (http://localhost:3000/index.js:413:27) at Subscriber._next (http://localhost:3000/index.js:364:26) at Subscriber.next (http://localhost:3000/index.js:328:18) at MergeMapSubscriber.notifyNext (http://localhost:3000/index.js:8323:30) at InnerSubscriber._next (http://localhost:3000/index.js:61480:21) at InnerSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at ReduceSubscriber._complete (http://localhost:3000/index.js:15456:30) at ReduceSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MergeMapSubscriber._complete (http://localhost:3000/index.js:8315:30) at MergeMapSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at ArrayObservable._subscribe (http://localhost:3000/index.js:4959:24) at ArrayObservable.Observable.subscribe (http://localhost:3000/index.js:127:27) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at ReduceOperator.call (http://localhost:3000/index.js:15414:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Object.subscribeToResult (http://localhost:3000/index.js:721:27) at MergeMapSubscriber._innerSub (http://localhost:3000/index.js:8310:38) at MergeMapSubscriber._tryNext (http://localhost:3000/index.js:8307:14) at MergeMapSubscriber._next (http://localhost:3000/index.js:8290:18) at MergeMapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MergeMapSubscriber.notifyNext (http://localhost:3000/index.js:8323:30) at InnerSubscriber._next (http://localhost:3000/index.js:61480:21) at InnerSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at EverySubscriber.notifyComplete (http://localhost:3000/index.js:24663:26) at EverySubscriber._complete (http://localhost:3000/index.js:24680:14) at EverySubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MergeAllSubscriber._complete (http://localhost:3000/index.js:6417:30) at MergeAllSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MapSubscriber.Subscriber._complete (http://localhost:3000/index.js:371:26) at MapSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at ArrayObservable._subscribe (http://localhost:3000/index.js:4959:24) at ArrayObservable.Observable.subscribe (http://localhost:3000/index.js:127:27) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) …MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MergeMapSubscriber.notifyNext (http://localhost:3000/index.js:8323:30) at InnerSubscriber._next (http://localhost:3000/index.js:61480:21) at InnerSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at Object.subscribeToResult (http://localhost:3000/index.js:716:25) at MergeMapSubscriber._innerSub (http://localhost:3000/index.js:8310:38) at MergeMapSubscriber._tryNext (http://localhost:3000/index.js:8307:14) at MergeMapSubscriber._next (http://localhost:3000/index.js:8290:18) at MergeMapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at CatchSubscriber.Subscriber._next (http://localhost:3000/index.js:364:26) at CatchSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at LastSubscriber._complete (http://localhost:3000/index.js:39292:25) at LastSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MergeAllSubscriber._complete (http://localhost:3000/index.js:6417:30) at MergeAllSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at ScalarObservable._subscribe (http://localhost:3000/index.js:24131:28) at ScalarObservable.Observable.subscribe (http://localhost:3000/index.js:127:27) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeAllOperator.call (http://localhost:3000/index.js:6386:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at LastOperator.call (http://localhost:3000/index.js:39221:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at CatchOperator.call (http://localhost:3000/index.js:24184:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at http://localhost:3000/index.js:158:38 at new x (https://cdn.fontawesome.com/js/stats.js:2:25976) at Observable.forEach (http://localhost:3000/index.js:157:16) at http://localhost:3000/index.js:9695:18 at new x (https://cdn.fontawesome.com/js/stats.js:2:25976) at Router.runNavigate (http://localhost:3000/index.js:9660:16) at http://localhost:3000/index.js:9651:67 at u (https://cdn.fontawesome.com/js/stats.js:2:24853) at https://cdn.fontawesome.com/js/stats.js:2:24975 at MutationObserver.a (https://cdn.fontawesome.com/js/stats.js:1:23645) at ZoneDelegate.invoke (http://localhost:3000/index.js:48186:26) at Zone.runGuarded (http://localhost:3000/index.js:48082:47) at MutationObserver.<anonymous> (http://localhost:3000/index.js:48058:29)
context
:
DebugContext
message
:
(...)
name
:
(...)
originalError
:
TypeError: Cannot read property 'name' of undefined at _View_ItemComponent0.detectChangesInternal (/ItemModule/ItemComponent/component.ngfactory.js:80:58) at _View_ItemComponent0.AppView.detectChanges (http://localhost:3000/index.js:57658:14) at _View_ItemComponent0.DebugAppView.detectChanges (http://localhost:3000/index.js:57763:44) at _View_ItemComponent_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/index.js:57684:19) at _View_ItemComponent_Host0.detectChangesInternal (/ItemModule/ItemComponent/host.ngfactory.js:32:8) at _View_ItemComponent_Host0.AppView.detectChanges (http://localhost:3000/index.js:57658:14) at _View_ItemComponent_Host0.DebugAppView.detectChanges (http://localhost:3000/index.js:57763:44) at ViewRef_.detectChanges (http://localhost:3000/index.js:34554:20) at RouterOutlet.activate (http://localhost:3000/index.js:37637:42) at ActivateRoutes.placeComponentIntoOutlet (http://localhost:3000/index.js:10036:16) at ActivateRoutes.activateRoutes (http://localhost:3000/index.js:10014:22) at http://localhost:3000/index.js:9976:19 at Array.forEach (native) at ActivateRoutes.activateChildRoutes (http://localhost:3000/index.js:9975:29) at ActivateRoutes.activate (http://localhost:3000/index.js:9970:14) at http://localhost:3000/index.js:9711:56 at SafeSubscriber._next (http://localhost:3000/index.js:179:21) at SafeSubscriber.__tryOrSetError (http://localhost:3000/index.js:471:16) at SafeSubscriber.next (http://localhost:3000/index.js:413:27) at Subscriber._next (http://localhost:3000/index.js:364:26) at Subscriber.next (http://localhost:3000/index.js:328:18) at MergeMapSubscriber.notifyNext (http://localhost:3000/index.js:8323:30) at InnerSubscriber._next (http://localhost:3000/index.js:61480:21) at InnerSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at ReduceSubscriber._complete (http://localhost:3000/index.js:15456:30) at ReduceSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MergeMapSubscriber._complete (http://localhost:3000/index.js:8315:30) at MergeMapSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at ArrayObservable._subscribe (http://localhost:3000/index.js:4959:24) at ArrayObservable.Observable.subscribe (http://localhost:3000/index.js:127:27) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at ReduceOperator.call (http://localhost:3000/index.js:15414:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Object.subscribeToResult (http://localhost:3000/index.js:721:27) at MergeMapSubscriber._innerSub (http://localhost:3000/index.js:8310:38) at MergeMapSubscriber._tryNext (http://localhost:3000/index.js:8307:14) at MergeMapSubscriber._next (http://localhost:3000/index.js:8290:18) at MergeMapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MergeMapSubscriber.notifyNext (http://localhost:3000/index.js:8323:30) at InnerSubscriber._next (http://localhost:3000/index.js:61480:21) at InnerSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at EverySubscriber.notifyComplete (http://localhost:3000/index.js:24663:26) at EverySubscriber._complete (http://localhost:3000/index.js:24680:14) at EverySubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MergeAllSubscriber._complete (http://localhost:3000/index.js:6417:30) at MergeAllSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MapSubscriber.Subscriber._complete (http://localhost:3000/index.js:371:26) at MapSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at ArrayObservable._subscribe (http://localhost:3000/index.js:4959:24) at ArrayObservable.Observable.subscribe (http://localhost:3000/index.js:127:27) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeAllOperator.call (http://localhost:3000/index.js:6386:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at EveryOperator.call (http…MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MergeMapSubscriber.notifyNext (http://localhost:3000/index.js:8323:30) at InnerSubscriber._next (http://localhost:3000/index.js:61480:21) at InnerSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at Object.subscribeToResult (http://localhost:3000/index.js:716:25) at MergeMapSubscriber._innerSub (http://localhost:3000/index.js:8310:38) at MergeMapSubscriber._tryNext (http://localhost:3000/index.js:8307:14) at MergeMapSubscriber._next (http://localhost:3000/index.js:8290:18) at MergeMapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at CatchSubscriber.Subscriber._next (http://localhost:3000/index.js:364:26) at CatchSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at MapSubscriber._next (http://localhost:3000/index.js:6313:26) at MapSubscriber.Subscriber.next (http://localhost:3000/index.js:328:18) at LastSubscriber._complete (http://localhost:3000/index.js:39292:25) at LastSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at MergeAllSubscriber._complete (http://localhost:3000/index.js:6417:30) at MergeAllSubscriber.Subscriber.complete (http://localhost:3000/index.js:353:18) at ScalarObservable._subscribe (http://localhost:3000/index.js:24131:28) at ScalarObservable.Observable.subscribe (http://localhost:3000/index.js:127:27) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeAllOperator.call (http://localhost:3000/index.js:6386:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at LastOperator.call (http://localhost:3000/index.js:39221:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at CatchOperator.call (http://localhost:3000/index.js:24184:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MapOperator.call (http://localhost:3000/index.js:6284:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at Observable._subscribe (http://localhost:3000/index.js:185:28) at MergeMapOperator.call (http://localhost:3000/index.js:8265:23) at Observable.subscribe (http://localhost:3000/index.js:124:22) at http://localhost:3000/index.js:158:38 at new x (https://cdn.fontawesome.com/js/stats.js:2:25976) at Observable.forEach (http://localhost:3000/index.js:157:16) at http://localhost:3000/index.js:9695:18 at new x (https://cdn.fontawesome.com/js/stats.js:2:25976) at Router.runNavigate (http://localhost:3000/index.js:9660:16) at http://localhost:3000/index.js:9651:67 at u (https://cdn.fontawesome.com/js/stats.js:2:24853) at https://cdn.fontawesome.com/js/stats.js:2:24975 at MutationObserver.a (https://cdn.fontawesome.com/js/stats.js:1:23645) at ZoneDelegate.invoke (http://localhost:3000/index.js:48186:26) at Zone.runGuarded (http://localhost:3000/index.js:48082:47) at MutationObserver.<anonymous> (http://localhost:3000/index.js:48058:29)
stack
:
(...)
__proto__
:
WrappedError

Config

{
"generator-fountain-angular2": {
"version": "1.0.0-rc1",
"props": {
"resolved": "C:\Users\dhamilton\AppData\Roaming\npm\node_modules\generator-fountain-angular2\generators\app\index.js",
"namespace": "fountain-angular2:app",
"argv": {
"remain": [],
"cooked": [],
"original": []
},
"framework": "angular2",
"modules": "webpack",
"css": "scss",
"js": "typescript",
"ci": [
"travis"
],
"sample": "techs",
"router": "router"
}
}
}

Relevant Links

Attached zip file.
items-test-ui.zip

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

Node.js v6.6.0
win32 6.3.9600

yo 1.8.5
npm 3.10.3

Angular 4 support

Hi,

Can you kindly upgrade the Angular 2 version to Angular 4? When I manually try to upgrade to Angular 4 by changing the version in package.json , I am getting many tsLint errors which are preventing the servers from starting up.

PFB the console errors:

ERROR in
\node_modules@angular\core\src\change_detection\differs\default_iterable_differ.d.ts
(28,32): error TS2304: Cannot find name 'Iterable'.

ERROR in
\node_modules@angular\core\src\change_detection\differs\iterable_differs.d.ts
(15,48): error TS2304: Cannot find name 'Iterable'.

Thanks,
Hari

gulp build generates extremely large .js file of nearly 1mb file size?

Description

Fountain webapp angular 2 with webpack / system js generates very large main.js/index.js file.
I used in combination with angular/router.

Using such a large file in production even before adding any substantial views and functionality causes loading speed to drop.

Copy the content from .yo-rc.json:

  "generator-fountain-angular2": {
    "version": "1.0.0-rc1",
    "props": {
      "framework": "angular2",
      "modules": "systemjs",
      "js": "typescript",
      "ci": [],
      "css": "scss",
      "resolved": "/home/kpatra/.local/install/node/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular2/generators/app/index.js",
      "namespace": "fountain-angular2",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "todoMVC",
      "router": "router"
    }
  }
}

error in new component recently created

ERROR in /home/jordao/code/ang2/src/app/components/structure/toolbar.spec.ts
(11,21): error TS2345: Argument of type 'BarProp' is not assignable to parameter of type 'ConcreteType<{}>'.
Property 'apply' is missing in type 'BarProp'.

How to use templateUrl?

Description

I'm going with the following file structure:

./src
   app/
      app.component.html
      app.component.ts
   index.html
   index.ts

But when I want to use templateUrl: 'app.component.html' in my app.component.ts I get the following Error Message & Stack Trace (see below).

I succeeded to fix the problem by writing the full relative path: ./app/app.component.html but this is bad and when my app will grow (and it will grow pretty fast), moving components in subfolders will be a real pain.

In Angular Style guide, they suggest just to use templatename.html instead of ./relativepath/templatename.html but this does not work for me. Have you tried? Is it related to Webpack? Should I switch to SystemJS instead?

By the way, I suggest your generator to use templateUrl in one of your samples (todoMVC for example?) as a best practice 👍

Error Message & Stack Trace

VM4477:77 EXCEPTION: Error: Uncaught (in promise): Failed to load app.component.html

VM4477:77 STACKTRACE:BrowserDomAdapter.logError @ VM4477:77ExceptionHandler.call @ VM4253:59(anonymous function) @ VM4266:265schedulerFn @ VM4268:123SafeSubscriber.__tryOrUnsub @ VM4275:223SafeSubscriber.next @ VM4275:172Subscriber._next @ VM4275:125Subscriber.next @ VM4275:89Subject.next @ VM4270:55EventEmitter.emit @ VM4268:112onError @ VM4267:120onHandleError @ VM4291:66ZoneDelegate.handleError @ zone.js?fad3:327Zone.runGuarded @ zone.js?fad3:233_loop_1 @ zone.js?fad3:487drainMicroTaskQueue @ zone.js?fad3:494ZoneTask.invoke @ zone.js?fad3:426
VM4477:77 Error: Uncaught (in promise): Failed to load app.component.html
    at resolvePromise (eval at <anonymous> (index.js:1813), <anonymous>:538:32)
    at PromiseCompleter.eval [as reject] (eval at <anonymous> (index.js:1813), <anonymous>:515:14)
    at eval (eval at <anonymous> (index.js:813), <anonymous>:295:35)
    at ZoneDelegate.invoke (eval at <anonymous> (index.js:1813), <anonymous>:323:29)
    at Object.onInvoke (eval at <anonymous> (index.js:1474), <anonymous>:45:41)
    at ZoneDelegate.invoke (eval at <anonymous> (index.js:1813), <anonymous>:322:35)
    at Zone.run (eval at <anonymous> (index.js:1813), <anonymous>:216:44)
    at eval (eval at <anonymous> (index.js:1813), <anonymous>:571:58)
    at ZoneDelegate.invokeTask (eval at <anonymous> (index.js:1813), <anonymous>:356:38)
    at Object.onInvokeTask (eval at <anonymous> (index.js:1474), <anonymous>:36:41)BrowserDomAdapter.logError @ VM4477:77ExceptionHandler.call @ VM4253:60(anonymous function) @ VM4266:265schedulerFn @ VM4268:123SafeSubscriber.__tryOrUnsub @ VM4275:223SafeSubscriber.next @ VM4275:172Subscriber._next @ VM4275:125Subscriber.next @ VM4275:89Subject.next @ VM4270:55EventEmitter.emit @ VM4268:112onError @ VM4267:120onHandleError @ VM4291:66ZoneDelegate.handleError @ zone.js?fad3:327Zone.runGuarded @ zone.js?fad3:233_loop_1 @ zone.js?fad3:487drainMicroTaskQueue @ zone.js?fad3:494ZoneTask.invoke @ zone.js?fad3:426

COPY THE ERROR MESSAGE, INCLUDING STACK TRACE HERE

Config

Content from .yo-rc.json:

{
  "generator-fountain-angular2": {
    "version": "0.5.4",
    "props": {
      "framework": "angular2",
      "modules": "webpack",
      "js": "typescript",
      "css": "scss",
      "resolved": "/usr/local/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular2/generators/app/index.js",
      "namespace": "fountain-angular2",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "skip-cache": false,
      "skip-install": false,
      "sample": "hello",
      "router": "none"
    }
  }
}

Environment

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v6.2.2
darwin 15.4.0

yo --version
1.8.4

npm --version
3.9.5

Call enableProdMode() to enable the production mode.

Handle non inline templates

Configurations of Webpack / SystemJS / Browsersync are not yet ready to allow angular 2 to load the templates correctly. It needs to be checked and illustrated in examples.

"No provider for TestComponentBuilder!"

Hi guys,

DESCRIPTION

I've been wasting some time to make this work

/// <reference path="../../typings/index.d.ts"/>

import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'zone.js/dist/async-test';

import {describe, it, expect, beforeEachProviders, inject, async, setBaseTestProviders, TestComponentBuilder, ComponentFixture} from '@angular/core/testing';
import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from '@angular/platform-browser-dynamic/testing';

import { AppComponent } from './app.component';

describe('Basic test', () => {
  it('expect null is not the same thing as undefined',
    () => expect(null).not.toEqual(undefined)
  );
});

describe('App Component', () => {
  it('should render some title', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    tcb.createAsync(AppComponent)
    .then((fixture: ComponentFixture<any>) => {
      fixture.detectChanges();
      const app = fixture.nativeElement;
      expect(app.querySelector('h1').textContent).toBe('Hello World');
    });
  })));
});

which fails when I run npm run test

Chrome 51.0.2704 (Mac OS X 10.11.4) App Component should render some title FAILED
    Error: No provider for TestComponentBuilder!
    Error: DI Exception

CONTEXT

I've been using generator-fountain-angular2 @ 0.5.4. Since it was seemed more painful to bootstrap a brand new generator-fountain-angular2 using 0.6.0 and move all my work there, I scaffolded 0.6.0 in some temp directory to compare and update my working directory. All was doing fine (Angular RC4, Router, ...) except this test.

In your hello.spec.ts, npm run test works just fine but in mine, it just fails.

I suspect you already had this problem when you wrote this code hopefuly.

POSTSCRIPTUM

How do you update typings directory and typings.json?
Is it something you hardcode in your generator or some command that should rebuild this directory ?

Angular2 TodoMVC project doesn't load

Angular2 TodoMVC project stuck on 'Loading...'

I attempted to use your online tool at http://fountainjs.io/download/

Selected:
Angular2
Webpack/NPM
Typescript
Sass
TodoMVC

It would be nice if you included a README file with the download, but without one I just ran npm install and then gulp serve
ran into a known issue with gulp so I did as you suggested and ran npm run serve instead and ran into this problem. The app just got stuck at 'loading...'

Error Message & Stack Trace

No errors in the console, the project just stuck at 'loading...'

Config

Here is my .yo-rc.json file.

{
  "generator-fountain-angular2": {
    "version": "1.0.0",
    "props": {
      "skipInstall": true,
      "framework": "angular2",
      "modules": "webpack",
      "js": "typescript",
      "ci": "",
      "css": "scss",
      "resolved": "/Users/swiip/Workspace/FountainJS/fountain/generator-fountain-angular2/generators/app/index.js",
      "namespace": "fountain-angular2:app",
      "_": [],
      "sample": "todoMVC",
      "router": "router"
    }
  }
}

Relevant Links

A link to the resulting project can be found on github here

Environment

Node.js v8.2.1
darwin 15.6.0
yo not installed, but I don't think it's needed
npm 5.3.0

Feature Request : Support for Ahead of Time Compilation and Server Side Rendering

Description

It would be very helpful if you support Ahead of Time compilation in your scaffolding as additional feature.
There are no good material for AoT integration with webpack application.

I have noticed that a lot of time is lost in rendering the first view with Just in Time compilation due to the template compilation.

This becomes a hindrance if you are developing

1. an E-commerce or
2. Mobile Web Application with Angular
3. Popping a view in a separate new tab.

Do you have any plans to implement this in future?

Relevant Links

AoT : https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Angular Universal : https://universal.angular.io

Tree Shaking with Babel & Webpack

Had to deactivate it because of a failing in integration tests. Didn't find a way to make it pass. Would be great to get it back.

Update to angular2.rc-3

Angular2 RC3 has been released 👍

Use specific Babel 6 plugins to enhance ng2/babel code

Taking example in

• https://github.com/shuhei/babel-angular2-app
• https://github.com/FountainJS/fountain-ng2-ngrx-poc

No code coverage from UT

Description

I use the latest version of generator-fountain-angular2, I found you inject karma-coverage plugin, but there's no further configuration to generate code coverage report. As I know, to generate code coverage is not so easy specially when we use 'jspm' and 'typescript', so do you have plan to finish that part?

Error Message & Stack Trace

COPY THE ERROR MESSAGE, INCLUDING STACK TRACE HERE

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular2": {
    ...
  }
}

Relevant Links

• If your project is public, link to the repo so we can investigate directly.
• BONUS POINTS: Create a minimal reproduction and upload it to GitHub. This will get you the fastest support.

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
yo --version
npm --version

Issue running gulp

Description

Installing and running the generator worked fine. But when running gulp, an error message is shown. See below:

Error Message & Stack Trace

[15:10:51] Loading C:\projects\web\laravel\angular\gulp_tasks\browsersync.js
[15:10:51] Loading C:\projects\web\laravel\angular\gulp_tasks\karma.js
[15:10:51] Loading C:\projects\web\laravel\angular\gulp_tasks\misc.js
[15:10:51] Loading C:\projects\web\laravel\angular\gulp_tasks\webpack.js
[15:10:52] Using gulpfile C:\projects\web\laravel\angular\gulpfile.js
C:\Users\Hugo\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129
gulpInst.start.apply(gulpInst, toRun);
^

TypeError: Cannot read property 'apply' of undefined
at C:\Users\Hugo\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:19
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:592:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

Specs

Windows 10
NPM 3.10.8
Node 6.6.0

Is it me?

SCSS variables declared in app's index.scss not recognised in component's scss files

Description

Although this scaffolding provides support for sass. It's not possible to leverage the $variable feature of sass unless you import every individual component scss file into the index.scss.

If I do :
@component({
selector: 'home',
template: require('./home.component.html'),
styles: [ String(require('./home.component.scss')) ]
})

as suggested in issue #72

But this too fails to identify global sass variables.

Error Message & Stack Trace

I am getting error as :

ERROR in .//css-loader!.//sass-loader!./~/postcss-loader!./src/app/.../component/style.scss
Module build failed:
background-color: $app_bg
^
Undefined variable: "$app-bg".
in /Application/src/app/.../component/style.scss (line 2, column 23)
@ ./src/app/.../component/style.scss 4:14-194
@ ./src/app/.../component/index.ts
@ ./src/app/.../index.ts
@ ./src/app/routes.ts
@ ./src/app/index.ts
@ ./src/index.ts

Config

{
"generator-fountain-angular2": {
"version": "1.0.0-rc1",
"props": {
"framework": "angular2",
"modules": "webpack",
"js": "typescript",
"ci": [],
"css": "scss",
"resolved": "/home/user/.local/install/node/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular2/generators/app/index.js",
"namespace": "fountain-angular2",
"argv": {
"remain": [],
"cooked": [],
"original": []
},
"sample": "hello",
"router": "router"
}
}
}

Environment

node v6.9.2
yo v1.8.5
npm v3.10.9

Error when running gulp build

I'm getting an error when running gulp build:
[09:19:40] 'inject' errored after 33 ms [09:19:40] Error: Error: @angular/core is not installed. Try runningbower install. at /Users/35516/Freelance/webapp-test/node_modules/wiredep/wiredep.js:30:56 at /Users/35516/Freelance/webapp-test/node_modules/wiredep/lib/detect-dependencies.js:145:29 at forOwn (/Users/35516/Freelance/webapp-test/node_modules/wiredep/node_modules/lodash/dist/lodash.js:2106:15) at Function.forEach (/Users/35516/Freelance/webapp-test/node_modules/wiredep/node_modules/lodash/dist/lodash.js:3303:9) at detectDependencies (/Users/35516/Freelance/webapp-test/node_modules/wiredep/lib/detect-dependencies.js:34:7) at wiredep (/Users/35516/Freelance/webapp-test/node_modules/wiredep/wiredep.js:70:39) at DestroyableTransform._transform (/Users/35516/Freelance/webapp-test/node_modules/wiredep/wiredep.js:135:34) at DestroyableTransform.Transform._read (/Users/35516/Freelance/webapp-test/node_modules/wiredep/node_modules/readable-stream/lib/_stream_transform.js:184:10) at DestroyableTransform.Transform._write (/Users/35516/Freelance/webapp-test/node_modules/wiredep/node_modules/readable-stream/lib/_stream_transform.js:172:12) at doWrite (/Users/35516/Freelance/webapp-test/node_modules/wiredep/node_modules/readable-stream/lib/_stream_writable.js:237:10) at writeOrBuffer (/Users/35516/Freelance/webapp-test/node_modules/wiredep/node_modules/readable-stream/lib/_stream_writable.js:227:5) at DestroyableTransform.Writable.write (/Users/35516/Freelance/webapp-test/node_modules/wiredep/node_modules/readable-stream/lib/_stream_writable.js:194:11) at Stream.ondata (stream.js:31:26) at emitOne (events.js:77:13) at Stream.emit (events.js:169:7) at queueData (/Users/35516/Freelance/webapp-test/node_modules/map-stream/index.js:43:21)

I saw that it said "Try running bower install", but after running that, the same thing happened. Did I do something wrong?

Sugestion for include html file creation with ang2 generator

New components dont have any option to create with require html file and a html file with the component name. The main foutainjs angular 2 generator create hello.ts with:
@Component({ selector: 'fountain-app', template: require('./hello.html') })

it would be nice to include this option in generator.