ui-router / quickstart-ng2 Goto Github PK

If I have a state definition like this (shortened for readibility):

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        views: {
            $default: {component: ProfileComponent},  //  <--- this 
            '[email protected]': {component: ProfileAboutMeComponent},
            '[email protected]': {component: ProfilePhotosComponent},
            '[email protected]': {component: ProfileHelpComponent},
        },
    },
];

and a ProfileComponent that only has a template with no logic:

@Component({
    template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`
})
export class ProfileComponent { }

can I define this state without creating ProfileComponent so state definition becomes something like this:

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`
        views: {
            // <--- removed ProfileComponent was here
            '[email protected]': {component: ProfileAboutMeComponent},
            '[email protected]': {component: ProfilePhotosComponent},
            '[email protected]': {component: ProfileHelpComponent},
        },
    },
];

Is it possible to do something like this?

EDITED:
This is probably even better:

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        views: {
            $default: {        template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`},
            '[email protected]': {component: ProfileAboutMeComponent},
            '[email protected]': {component: ProfilePhotosComponent},
            '[email protected]': {component: ProfileHelpComponent},
        },
    },
];

this way I could replace [email protected] view as well, because it is static text at bottom of the page.

Trying to run quickstart-ng2 from that branch:

I'd think I'd like the ui-router-ng2 quickstart to be Angular-CLI based. This might mean we no longer maintain this repository. Instead we may provide instructions for bootstrapping a new app using the CLI, then adding the few ui-router specific changes that are necessary.

This should also help future proof the quickstart.

http://stackoverflow.com/questions/37408620/angular-2-rc1-address-line-bug

I am facing the same problem.
I haven't made any changes either .
Functionality wise everything works as expected, but on the address-bar it's showing a wrong url.
Secondly, except crisis-center none of the other URI is directly accessible from address bar

Trying to install the latest version, I get the following error:

$ git clone [email protected]:ui-router/quickstart-ng2.git
$ cd quickstart-ng2/
$ npm install
---
npm WARN @angular/[email protected] requires a peer of zone.js@^0.7.2 but none was installed.
npm WARN [email protected] requires a peer of @angular/router@^3.3.1 but none was installed.

D:\!Projects\TypeScript\ui-router\quickstart-ng2>npm update
[email protected] D:\!Projects\TypeScript\ui-router\quickstart-ng2
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.

D:\!Projects\TypeScript\ui-router\quickstart-ng2>npm start

> [email protected] start D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run tsc && npm run watch


> [email protected] tsc D:\!Projects\TypeScript\ui-router\quickstart-ng2
> tsc


> [email protected] watch D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run tsc:w & npm run lite


> [email protected] tsc:w D:\!Projects\TypeScript\ui-router\quickstart-ng2
> tsc -w

00:06:46 - Compilation complete. Watching for file changes.

When I change this line:
"watch": "npm run tsc:w & npm run lite",
to
"watch": "npm run lite & npm run tsc:w",
It's run as expected.

00:06:46 - Compilation complete. Watching for file changes.
Terminate batch job (Y/N)? y

D:\!Projects\TypeScript\ui-router\quickstart-ng2>npm start

> [email protected] start D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run tsc && npm run watch


> [email protected] tsc D:\!Projects\TypeScript\ui-router\quickstart-ng2
> tsc


> [email protected] watch D:\!Projects\TypeScript\ui-router\quickstart-ng2
> npm run lite & npm run tsc:w


> [email protected] lite D:\!Projects\TypeScript\ui-router\quickstart-ng2
> lite-server

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.119:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.119:3001
 --------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
16.09.06 00:10:58 200 GET /index.html
16.09.06 00:10:58 200 GET /node_modules/es6-shim/es6-shim.min.js
16.09.06 00:10:58 200 GET /node_modules/zone.js/dist/zone.js
16.09.06 00:10:58 200 GET /systemjs.config.js
16.09.06 00:10:58 200 GET /styles.css
16.09.06 00:10:58 200 GET /node_modules/reflect-metad

npm install can't find [email protected],

npm ERR! No compatible version found: ui-router-ng2@^1.0.0-beta.3
npm ERR! Valid install targets:
npm ERR! 1.0.0-beta.2, 1.0.0-beta.1, 1.0.0-alpha.5, 1.0.0-alpha.4, 1.0.0-alpha.3, 1.0.0-alpha.2, 0.1.0-preview.0

and npm tsc fails to compile with [email protected].

node_modules/ui-router-ng2/ng2/uiRouterNgModule.d.ts(3,10): error TS2305: Module '"/home/scott/Doozee/Web/rates2/node_modules/@angular/core/index"' has no exported member 'NgModuleMetadataType'.
src/app.module.ts(25,3): error TS2345: Argument of type '{ imports: typeof BrowserModule[]; providers: ((TypeProvider | ValueProvider | ClassProvider | Ex...' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.
src/bar/bar.module.ts(7,3): error TS2345: Argument of type '{ imports: typeof SharedModule[]; states: Ng2StateDeclaration[]; }' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.
src/baz/baz.module.ts(7,3): error TS2345: Argument of type '{ imports: typeof SharedModule[]; states: Ng2StateDeclaration[]; }' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.
src/foo/foo.module.ts(7,3): error TS2345: Argument of type '{ imports: typeof SharedModule[]; states: Ng2StateDeclaration[]; }' is not assignable to parameter of type 'UIRouterModuleMetadata'.
Object literal may only specify known properties, and 'imports' does not exist in type 'UIRouterModuleMetadata'.

Where do we find [email protected]?

Check possibility for updating the demo with the latest release of Angular 2?

I'll update comment step by step, yet for now, using the last version doesn't spit any error but the view after init does not update.

I tried to upgrade to RC1 but looks like ui-router version 1.0.0-alpha.5 is not out yet

Hi!
How to use multiple modules with this template properly?
For example:
FooModule,
BarModule,
CommonModule?

u[email protected] tsc /Users/Mizi/git/quickstart-ng2
tsc

src/bootstrap.ts(27,7): error TS2345: Argument of type '{ states: Ng2StateDeclaration[]; otherwise: { state: string; params: {}; }; useHash: true; config...' is not assignable to parameter of type 'RootModule'.
Object literal may only specify known properties, and 'configClass' does not exist in type 'RootModule'.

Angular 2 RC.5 has changed a few things around introducing a bunch of breaking changes. Currently, it represents the expected public API of the 2.0 release according to the Angular dev team. Would be very helpful to have this Quickstart UI Router app upgraded to support the ngModule based rc.5 release.

Or provider a ui-router-ng2.js match angular2 js version.

After clicking to 'buz' link:

Did a fresh install and cant get it to load anything on the page, node 8.9.1 and npm 5.5.1. Just trying to get started here. I blew away my node modules and reinstalled as well with no success.

Hi,

I'm looking for a way to Async load routes on parent route activation. I know in v1 we could split the main application in multiple app modules. Now with v2, it seems more complex...

Thanks,

Jean

"dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/common": "^4.0.2",
    "@angular/compiler": "^4.0.2",
    "@angular/compiler-cli": "^4.0.2",
    "@angular/core": "^4.0.2",
    "@angular/forms": "^4.0.2",
    "@angular/http": "^4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.2",
    "@angular/platform-browser-dynamic": "^4.0.2",
    "@angular/platform-server": "^4.0.2",
    "@angular/router": "^4.0.2",
    "typescript": "^2.2.2",
    "ui-router-ng2": "^1.0.0-beta.4",
    "zone.js": "^0.8.5"

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
npm WARN ng2-res[email protected] requires a peer of @angular/core@^2.0.0 but none
was installed.
npm WARN ng2-res[email protected] requires a peer of @angular/platform-browser@^2.
0.0 but none was installed.
npm WARN ng2-res[email protected] requires a peer of @angular/http@^2.0.0 but none
was installed.
npm WARN @angular/[email protected] requires a peer of zone.js@^0.7.2 but none was ins
talled.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]
.10 but none was installed.
npm WARN ui-rout[email protected] requires a peer of @angular/common@^2.3.1 bu
t none was installed.
npm WARN ui-rou[email protected] requires a peer of @angular/core@^2.3.1 but
none was installed.
npm WARN ui-rout[email protected] requires a peer of @angular/router@^3.3.1 bu
t none was installed.
.....................................

ERROR in Error encountered resolving symbol values statically. Only initialized variables
and constants can be referenced because the value of this variable is needed by the templa
te compiler (position 15:22 in the original .ts file), resolving symbol ROUTES in D:/.............s/node_modules/@angular/router/src/router_config_loader.d.ts, resolving sy
mbol makeRootProviders in D:/..............s/node_modules/ui-router-ng2/lib/uiRoute
rNgModule.d.ts, resolving symbol UIRouterModule.forRoot in D:/...................s/node_
modules/ui-router-ng2/lib/uiRouterNgModule.d.ts, resolving symbol AppModule in D:/................s/src/app/app.module.ts, resolving symbol AppModule in D:/..............s/src/app/app.module.ts

ERROR in .//ui-router-ng2/lib/uiRouterNgModule.js
Module not found: Error: Can't resolve '@angular/router/src/router_config_loader' in 'D:,,,,,,s\node_modules\ui-router-ng2\lib'
@ .//ui-router-ng2/lib/uiRouterNgModule.js 6:0-66
@ ./~/ui-router-ng2/lib/index.js
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.ts

is it possible to replicate multiple views in the default app state like we could do in angular 1.x?

e.g.

            .state('root', {
                url: '',
                abstract: true,
                views: {
                    'nav': {
                        templateUrl: 'app/core/views/navbar/navbar.html',
                        controller: 'navbarCtrl',
                        controllerAs: 'nav'
                    },
                    'footer': {
                        templateUrl: 'app/core/views/footer/footer.html',
                        controllerAs: 'footer'
                    }
                }
            })

for ng2 i now kinda hacked it and defined a app.home state which maps to /

let MAIN_STATES:Ng2StateDeclaration[] = [
  {
    name: 'app',
    url: '',
    component:AppComponent
  }
];

export let HOME_STATES: Ng2StateDeclaration = [
  {
    name: 'app.home',
    url: '/',
    views: {
      header:{component: NavComponent},
      $default: {component: MainComponent},
      footer: {component: FooterComponent}
    }
  }
];

all tries with abstract and directly defining the app main state failed

Hi!
I try to use this template for my own project, and I get this error:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <div class="container">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" (init)="isCollapsed = true" (click)="isCollapsed = !isCollapsed">
      &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="navbar-header" [ngbCollapse]="!isCollapsed && 'in'">
      <a class="navbar-brand" href="#">inFrame</a>
      <ul class="nav navbar-nav">
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-link" href uiSref="app.public.home">Главная <span class="sr-only">(current)</span></a>
        </li>
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-link" href uiSref="app.public.about">О нас</a>
        </li>
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-link" href uiSref="app.public.user.signup">Регистрация</a>
        </li>
        <li uiSrefActive="active" class="nav-item">
          <a (click)='isCollapsed = true' class="nav-item nav-link" href>Вход</a>
        </li>
      </ul>
      <form class="form-inline pull-xs-right">
        <input class="form-control" type="text" placeholder="Искать...">
        <button class="btn btn-outline-success" type="submit">Поиск</button>
      </form>
    </div><!-- /.navbar-header -->
  </div><!-- /.container -->
</nav><!-- /.navbar -->

What this?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

SystemJS.import('node_modules/ui-router-visualizer/release/visualizer.min.js').then(vis => {
 +      vis.visualizer(uiRouter);

https://github.com/ui-router/quickstart-ng2/blob/master/src/router.config.ts#L30
What this?

Hi! How to use this template with https://ng-bootstrap.github.io/#/getting-started.
I try to make friends with them, but to no avail night... (((
And how to use NgModules properly?

does it open a tab automatically? or should i open it at specific port? could fine it in the docs either.

Hi

I am working my way through the angular 4 tutorial NgModules (https://angular.io/docs/ts/latest/guide/ngmodule.html#!#root-module) and I am implementing this in my Meteor App. This all works fine, I just ran into an issue converting the Lazy Load as featured in the Quickstart (https://github.com/ui-router/quickstart-ng2/blob/master/src/bootstrap.ts).

I think the culprit is the

 { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader 

where my browser is complaining

modules.js?hash=40a315e…:75443 ReferenceError: System is not defined

when I try to transition to my lazy loaded Crisis component.
I am following the BAZ example combined with Angular 4 Crisis example.

Should I just add SystemJS (why would this be necessary for lazy loading anyway).

You can see my app.module at
https://bitbucket.org/mattijsspierings/angular4-meteor/src/7a318d1b910576f7d81ed8bdf8466fa9371d89ca/client/imports/?at=router. Is should be publicly available.

Hope anyone can point me in the right direction.

Hi There,

I have a small question which I can't resolve.
How can I defined several routes and make them abstract and set the "/" of the application to be some nested route.
Example:
This is the ui-view that I want to return from index.html
''

Now I want that this ui-view will have a route which expose 3-4 more ui-views and this will be the "/" root url.

{
    name: "root", // This should take the above ui-view.
    views: {
        root: { component: LayoutComponent }
    }
},
{
    name: "root.layout",
    url: "/",
    views: {
        header: { component: HeaderComponent },
        sidebar: { component: SidebarComponent },
        content: { component: ContentComponent },
        footer: { component: FooterComponent }
    }
},

LayoutComponent - has 4 ui-views with the header/sidebar,etc...
So the application should start from root.layout.

Thanks, I will really appreciate help in this matter.