Trying to get Angular v3 router example to work

Question

Trying to get the angular v3 router example to work. http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview

My package.json is below, but when I run npm run tsc, I get errors...

app/crisis-center/crisis-center.routes.ts(14,5): error TS2322: Type '{ path: string; component: typeof CrisisCenterComponent; index: boolean; children: ({ path: strin...' is not assignable to type 'Route[]'.

Type '{ path: string; component: typeof CrisisCenterComponent; index: boolean; children: ({ path: strin...' is not assignable to type 'Route'. Object literal may only specify known properties, and 'index' does not exist in type 'Route'.

app/crisis-center/crisis-detail.component.ts(46,17): error TS7006: Parameter 'crisis' implicitly has an 'any' type.

app/crisis-center/crisis-detail.component.ts(81,12): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable | boolean'. Type 'Observable<{}>' is not assignable to type 'boolean'.

app/crisis-center/crisis-list.component.ts(35,17): error TS7006: Parameter 'crises' implicitly has an 'any' type.

app/crisis-center/crisis.service.ts(12,21): error TS2304: Cannot find name 'Promise'."

Package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router": "^3.0.0-alpha.7",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.9.0-dev.20160409",
    "typings":"^1.0.4"
  }
}

Answer 1

From github issue:

index: truewas deprecated. Use empty path('')` and redirect instead.

{path: '', redirectTo: 'regions', terminal: true}

also after 7 version path must not start with /

Answer 2

It is because the example they use Router ver 3 alpha.3

var routerVer = '@3.0.0-alpha.3'; // lock router version

That is very different from @3.0.0-alpha.7 that is in your dependencies. To properly run their code you should use the dependencies as used there. If you want to use alpha.7 you have to modify few elements, like routes:

export const HeroesRoutes = [
  { path: 'heroes',  component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

export const CrisisCenterRoutes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    index: true,
    children: [
      { path: '', component: CrisisListComponent, terminal: true },
      { path: ':id', component: CrisisDetailComponent, canDeactivate: [CrisisDetailGuard] }
    ]
  }
];

(slashes on the front are not allowed any more). I would also suggest to update rest of packages to newest version:

"rxjs": "^5.0.0-beta.9",
"symbol-observable": "^1.0.1",
"systemjs": "^0.19.31"

Someone claimed that it helped with some strange issues and I can confirm it works well with angular2 rc2 + router 3.alpha7. Don't worry about the warnings, like @angular/[email protected] wants [email protected] as the dependencies are not updated for most of packages yet.

Edit: You have also asked to see some config files. Here they are:

tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

package.json:

{
    "name": "dev-test",
    "version": "0.0.1",
    "scripts": {
        "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
        "lite": "lite-server",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "typings": "typings"
    },
    "license": "ISC",
    "dependencies": {
        "@angular/common": "^2.0.0-rc.2",
        "@angular/compiler": "^2.0.0-rc.2",
        "@angular/core": "^2.0.0-rc.2",
        "@angular/forms": "^0.1.0",
        "@angular/http": "^2.0.0-rc.2",
        "@angular/platform-browser": "^2.0.0-rc.2",
        "@angular/platform-browser-dynamic": "^2.0.0-rc.2",
        "@angular/router": "^3.0.0-alpha.7",
        "@angular/router-deprecated": "^2.0.0-rc.2",
        "@angular/upgrade": "^2.0.0-rc.2",
        "@angular2-material/button": "^2.0.0-alpha.5-2",
        "@angular2-material/card": "^2.0.0-alpha.5-2",
        "@angular2-material/checkbox": "^2.0.0-alpha.5-2",
        "@angular2-material/core": "^2.0.0-alpha.5-2",
        "@angular2-material/grid-list": "^2.0.0-alpha.5-2",
        "@angular2-material/icon": "^2.0.0-alpha.5-2",
        "@angular2-material/input": "^2.0.0-alpha.5-2",
        "@angular2-material/list": "^2.0.0-alpha.5-2",
        "@angular2-material/progress-bar": "^2.0.0-alpha.5-2",
        "@angular2-material/progress-circle": "^2.0.0-alpha.5-2",
        "@angular2-material/radio": "^2.0.0-alpha.5-2",
        "@angular2-material/sidenav": "^2.0.0-alpha.5-2",
        "@angular2-material/slide-toggle": "^2.0.0-alpha.5-2",
        "@angular2-material/tabs": "^2.0.0-alpha.5-2",
        "@angular2-material/toolbar": "^2.0.0-alpha.5-2",
        "angular2-in-memory-web-api": "^0.0.12",
        "angular2-jwt": "^0.1.16",
        "core-js": "^2.4.0",
        "es6-promise": "^3.2.1",
        "es6-shim": "^0.35.1",
        "ng2-bootstrap": "^1.0.17",
        "ng2-material": "^0.5.0",
        "ng2-translate": "^2.1.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "^5.0.0-beta.9",
        "symbol-observable": "^1.0.1",
        "systemjs": "^0.19.31",
        "zone.js": "^0.6.12"
    },
    "devDependencies": {
        "concurrently": "^2.0.0",
        "lite-server": "^2.2.0",
        "typescript": "^1.8.10",
        "typings": "^1.0.4"
    }
}

Hope this will help you.

Answer 3

I experienced the same issue just 2 days ago. Here is my project state. I used Angular-cli beta 9 that generated package.json dependencies of angular2 rc3. I followed the current https://angular.io/docs/ts/latest/guide/router.html (which is the recommended Angular 2 router and supersedes the earlier deprecated beta and v2 routers)

So I followed strictly the .routes.ts examples in angular.io and also updated my package.json to angular2 dependencies to angular rc4. Lastly, I did a npm install before serving my project with angular-cli.

In brief, update your package.json angular2 dependencies to RC4 and do a npm install. Give it a go, and let me know.