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

[jessepinuelas]

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

[odyright]

Hello @jessepinuelas ..try to update ui router & angular2 to the latest version. Don't forget to do npm cache clean.

[micaelmbagira]

Next release should fix it, we upgraded the ui-router #92

[odyright]

@micaelmbagira thx to you and the team for the work.
the date of the next release?

[odyright]

I'm not sure but i tried this and it worked for me so i want to share it. It could be useful.

fix

ERROR in ./src/app/routes.ts

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

1. Firstly ... import uirouter then import injectable,
2. (optional) then make a constructor for injecting dependencies,
3. end Define a behavior, for when the URL matched no routes like that:

default ./src/app/routes.ts file

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

import {Injectable} from '@angular/core';
import {UIRouter, Ng2StateDeclaration} from 'ui-router-ng2';

import {AppComponent} from './containers/App';

export const STATES: Ng2StateDeclaration[] = [
  {
    name: 'App',
    url: '/',
    component: AppComponent
  }
];

@Injectable()
export class MyUIRouterConfig {
  configure(uiRouter: UIRouter) {
    uiRouter.urlRouterProvider.otherwise(() => uiRouter.stateService.go('App'));
  }
}

new ./src/app/routes.ts file

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

import {UIRouter, Ng2StateDeclaration} from 'ui-router-ng2';
import {Injectable} from '@angular/core';

import {AppComponent} from './containers/App';

export const STATES: Ng2StateDeclaration[] = [
  {
    name: 'App',
    url: '/',
    component: AppComponent
  }
];

@Injectable()
export class MyUIRouterConfig {

    // constructor() { } <---- optional

    configure(uiRouter: UIRouter) {
        uiRouter.urlRouterProvider.otherwise(() => uiRouter.stateService.go('App') && null );
    }
}

@micaelmbagira what do you think?

[RoyBkker]

@odyright , I Updated to the latest release of UI-router 2. beta-3, but still the same errors here... Anyone has a solution?

[kimbaudi]

@RoyBkker - Updating UI-Router to 1.0.0-beta.3 solves the issue for me.

However, you can't just update package.json file and update npm package to work. You also need to update src/app/routes.(babel|js|ts) file and /src/app/index.(babel|js|ts) file. You can view the details of the change here: #92

Since I scaffolded using TypeScript, the relevant changes to the files are:

src/app/routes.ts

@Injectable()
export class MyUIRouterConfig {
  configure(uiRouter: UIRouter) {
    uiRouter.urlRouterProvider.otherwise('App');
  }
}

src/app/index.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {UIView, UIRouterModule} from 'ui-router-ng2';
import {STATES, MyUIRouterConfig} from './routes';


@NgModule({
  imports: [
    BrowserModule,
    UIRouterModule.forRoot({states: STATES, configClass: MyUIRouterConfig}),
    TechsModule
  ],
})

Thanks to Micaël Mbagira and the rest of the team!

[micaelmbagira]

@kimbaudi @jessepinuelas Next version has been released, can you confirm it fixes your problem ?

[kimbaudi]

@micaelmbagira - I can confirm that the problem is fixed 😄 👍