javascript - Angular4 + Cannot read property 'url' of undefined - Stack Overflow

admin管理员组

文章数量:1022434

Working on the logic between clicking a link and changing the color of an element on screen. In this example I want to change the color of the h1 tag when clicking a link. Here's what I have so far. The blue link doesn't navigate to the other ponent

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './appponent';
import { BlueComponent } from './blue/blueponent';
import { AppRoutingModule } from './app-routing.module';

import { routes } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    BlueComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

appponent.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, RouterOutlet, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgClass, CommonModule } from '@angular/mon';

@Component({
  selector: 'app-root',
  styleUrls: ['./appponent.css'],
  template: `<h1 [ngClass]="{'red': (router.url === '/'),
  'blue': (router.url === '/blue')}">Color Changer</h1>
        <a routerLink='/'>Red</a>
        <a routerLink='/blue'>Blue</a>
        <router-outlet></router-outlet>
        `
})
export class AppComponent {
  constructor(router: Router) {}
}

appponent.css

.red {
  color: red;
}
.blue {
  color: blue;
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './appponent';
import { BlueComponent } from './blue/blueponent';

export const routes: Routes = [
  { path: '', ponent: AppComponent },
  { path: 'blue', ponent: BlueComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

I keep getting this one error that's preventing my changes from applying, and possibly from keeping my links from navigating:

ERROR TypeError: Cannot read property 'url' of undefined at Object.eval [as updateDirectives] (AppComponent.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) at checkAndUpdateView (core.es5.js:12238) at callViewAction (core.es5.js:12603) at execComponentViewsAction (core.es5.js:12535) at checkAndUpdateView (core.es5.js:12244) at callWithDebugContext (core.es5.js:13458) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12998) at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10169) at core.es5.js:4807

Sources in Inspector underline this code

<h1 [ngClass]="{'red': (route.url === '/'),
  'blue': (route.url === '/blue')}">Color Changer</h1>

What's the problem with that line?

Working on the logic between clicking a link and changing the color of an element on screen. In this example I want to change the color of the h1 tag when clicking a link. Here's what I have so far. The blue link doesn't navigate to the other ponent

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.ponent';
import { BlueComponent } from './blue/blue.ponent';
import { AppRoutingModule } from './app-routing.module';

import { routes } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    BlueComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.ponent.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, RouterOutlet, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgClass, CommonModule } from '@angular/mon';

@Component({
  selector: 'app-root',
  styleUrls: ['./app.ponent.css'],
  template: `<h1 [ngClass]="{'red': (router.url === '/'),
  'blue': (router.url === '/blue')}">Color Changer</h1>
        <a routerLink='/'>Red</a>
        <a routerLink='/blue'>Blue</a>
        <router-outlet></router-outlet>
        `
})
export class AppComponent {
  constructor(router: Router) {}
}

app.ponent.css

.red {
  color: red;
}
.blue {
  color: blue;
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.ponent';
import { BlueComponent } from './blue/blue.ponent';

export const routes: Routes = [
  { path: '', ponent: AppComponent },
  { path: 'blue', ponent: BlueComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

I keep getting this one error that's preventing my changes from applying, and possibly from keeping my links from navigating:

ERROR TypeError: Cannot read property 'url' of undefined at Object.eval [as updateDirectives] (AppComponent.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) at checkAndUpdateView (core.es5.js:12238) at callViewAction (core.es5.js:12603) at execComponentViewsAction (core.es5.js:12535) at checkAndUpdateView (core.es5.js:12244) at callWithDebugContext (core.es5.js:13458) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12998) at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10169) at core.es5.js:4807

Sources in Inspector underline this code

<h1 [ngClass]="{'red': (route.url === '/'),
  'blue': (route.url === '/blue')}">Color Changer</h1>

What's the problem with that line?

• javascript
• css
• angular

Share Improve this question Follow edited Aug 8, 2017 at 20:52 bluebrooklynbrim asked Aug 8, 2017 at 20:41 bluebrooklynbrimbluebrooklynbrim 27744 silver badges2020 bronze badges 2

• there is no route variable in your app.ponent.ts , did you mean router.url? also constructor(router: Router){} only makes router available in the constructor. If you want to make it available to the entire ponent use constructor(private router: Router){} – LLai Commented Aug 8, 2017 at 20:44
• 1 OMG. thank you. That's what fixed it! Needed to make it available to the entire ponent. – bluebrooklynbrim Commented Aug 8, 2017 at 20:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to make router available to the entire ponent.

constructor(router: Router){
   // router is only available here
}

to do so, you can make the variable private

constructor(private router: Router){}

now router can be used throughout the ponent with this.router

---

Side note: The above solution is shorthand for

export class AppComponent {
    private router: Router;

    constructor(router: Router) {
        this.router = router;
    }
}

Working on the logic between clicking a link and changing the color of an element on screen. In this example I want to change the color of the h1 tag when clicking a link. Here's what I have so far. The blue link doesn't navigate to the other ponent

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './appponent';
import { BlueComponent } from './blue/blueponent';
import { AppRoutingModule } from './app-routing.module';

import { routes } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    BlueComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

appponent.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, RouterOutlet, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgClass, CommonModule } from '@angular/mon';

@Component({
  selector: 'app-root',
  styleUrls: ['./appponent.css'],
  template: `<h1 [ngClass]="{'red': (router.url === '/'),
  'blue': (router.url === '/blue')}">Color Changer</h1>
        <a routerLink='/'>Red</a>
        <a routerLink='/blue'>Blue</a>
        <router-outlet></router-outlet>
        `
})
export class AppComponent {
  constructor(router: Router) {}
}

appponent.css

.red {
  color: red;
}
.blue {
  color: blue;
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './appponent';
import { BlueComponent } from './blue/blueponent';

export const routes: Routes = [
  { path: '', ponent: AppComponent },
  { path: 'blue', ponent: BlueComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

I keep getting this one error that's preventing my changes from applying, and possibly from keeping my links from navigating:

ERROR TypeError: Cannot read property 'url' of undefined at Object.eval [as updateDirectives] (AppComponent.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) at checkAndUpdateView (core.es5.js:12238) at callViewAction (core.es5.js:12603) at execComponentViewsAction (core.es5.js:12535) at checkAndUpdateView (core.es5.js:12244) at callWithDebugContext (core.es5.js:13458) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12998) at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10169) at core.es5.js:4807

Sources in Inspector underline this code

<h1 [ngClass]="{'red': (route.url === '/'),
  'blue': (route.url === '/blue')}">Color Changer</h1>

What's the problem with that line?

Working on the logic between clicking a link and changing the color of an element on screen. In this example I want to change the color of the h1 tag when clicking a link. Here's what I have so far. The blue link doesn't navigate to the other ponent

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.ponent';
import { BlueComponent } from './blue/blue.ponent';
import { AppRoutingModule } from './app-routing.module';

import { routes } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    BlueComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.ponent.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, RouterOutlet, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgClass, CommonModule } from '@angular/mon';

@Component({
  selector: 'app-root',
  styleUrls: ['./app.ponent.css'],
  template: `<h1 [ngClass]="{'red': (router.url === '/'),
  'blue': (router.url === '/blue')}">Color Changer</h1>
        <a routerLink='/'>Red</a>
        <a routerLink='/blue'>Blue</a>
        <router-outlet></router-outlet>
        `
})
export class AppComponent {
  constructor(router: Router) {}
}

app.ponent.css

.red {
  color: red;
}
.blue {
  color: blue;
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.ponent';
import { BlueComponent } from './blue/blue.ponent';

export const routes: Routes = [
  { path: '', ponent: AppComponent },
  { path: 'blue', ponent: BlueComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

I keep getting this one error that's preventing my changes from applying, and possibly from keeping my links from navigating:

ERROR TypeError: Cannot read property 'url' of undefined at Object.eval [as updateDirectives] (AppComponent.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13058) at checkAndUpdateView (core.es5.js:12238) at callViewAction (core.es5.js:12603) at execComponentViewsAction (core.es5.js:12535) at checkAndUpdateView (core.es5.js:12244) at callWithDebugContext (core.es5.js:13458) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12998) at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10169) at core.es5.js:4807

Sources in Inspector underline this code

<h1 [ngClass]="{'red': (route.url === '/'),
  'blue': (route.url === '/blue')}">Color Changer</h1>

What's the problem with that line?

• javascript
• css
• angular

Share Improve this question Follow edited Aug 8, 2017 at 20:52 bluebrooklynbrim asked Aug 8, 2017 at 20:41 bluebrooklynbrimbluebrooklynbrim 27744 silver badges2020 bronze badges 2

• there is no route variable in your app.ponent.ts , did you mean router.url? also constructor(router: Router){} only makes router available in the constructor. If you want to make it available to the entire ponent use constructor(private router: Router){} – LLai Commented Aug 8, 2017 at 20:44
• 1 OMG. thank you. That's what fixed it! Needed to make it available to the entire ponent. – bluebrooklynbrim Commented Aug 8, 2017 at 20:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to make router available to the entire ponent.

constructor(router: Router){
   // router is only available here
}

to do so, you can make the variable private

constructor(private router: Router){}

now router can be used throughout the ponent with this.router

---

Side note: The above solution is shorthand for

export class AppComponent {
    private router: Router;

    constructor(router: Router) {
        this.router = router;
    }
}

本文标签： javascriptAngular4Cannot read property 39url39 of undefinedStack Overflow