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 https://github.com/FountainJS/generator-fountain-angular2/pull/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 :smile: :thumbsup: