Error: Cannot find primary outlet to load 'MyComponent'

[chadbr]

Please provide us with the following information:

OS?

Mac OSX

Versions.

angular-cli: 1.0.0-beta.17
node: 6.7.0
os: darwin x64

Repro steps.

Migration of RC4 app to release. I generated a skeleton with ng new and I'm migrating code from existing project.

The log given by the failure.

When I try to go to my routes - they tell me the components don't exist

logging-error-handler.ts:58Uncaught (in promise): Error: Cannot find primary outlet to load 'StyleGuideComponent'LoggingErrorHandler.handleError @ logging-error-handler.ts:58
logging-error-handler.ts:59Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'StyleGuideComponent'
at resolvePromise (zone.js:429)
at zone.js:406
at ZoneDelegate.invoke (zone.js:203)
at Object.onInvoke (ng_zone_impl.js:43)
at ZoneDelegate.invoke (zone.js:202)
at Zone.run (zone.js:96)
at zone.js:462
at ZoneDelegate.invokeTask (zone.js:236)
at Object.onInvokeTask (ng_zone_impl.js:34)
at ZoneDelegate.invokeTask (zone.js:235)

Mention any other details that might be useful.

Here's my app-routing.module.ts (simplified):

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

import { StyleGuideComponent } from './assets/style-guide/style-guide.component';

const routes: Routes = [
  { path: '', redirectTo: '/style-guide', pathMatch: 'full' },
  { path: 'style-guide', component: StyleGuideComponent }
];

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

and my app.module.ts (again, simplified)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { MaterialModule } from '@angular/material';

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

import { StyleGuideComponent } from './assets/style-guide/style-guide.component';

@NgModule({
  declarations: [
    AppComponent,
    StyleGuideComponent

  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule,
    HttpModule,
    MaterialModule.forRoot(),
    MyAppRoutingModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I get the same issue trying to route to any of the other components.... Any ideas?

[chadbr]

Ok, sorry to pollute the water... This turned out to be a behavior change in routing. I'll leave it here in case it helps someone else.

I had a conditional around my <router-outlet> -- that doesn't work anymore.

<div class="main-body" *ngIf="user && user.authorized">
  <router-outlet></router-outlet>
</div>

angular/angular#11100

you need to use a route guard
https://angular.io/docs/ts/latest/guide/router.html#!#guards
https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

Thanks -- Chad

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}