Angular 2 throwing error: Outlet is not activated

Question

I have set up my app so that I have a Recipe Book which has a list of Recipies which when I click on a Recipe it then shows the Recipe Details

Answer 1

For production runGuardsAndResolvers: () => is not working. Angular has new feature for runGuardsAndResolvers.

For working you can try runGuardsAndResolvers: "pathParamsChange" Tested in Angular 8 works fine.

Answer 2

This route is invalid and you should get an error for it.

{ path: '' },

A route either needs to have a component, a redirectTo, or children.

If an empty path route has no children it also should have pathMatch: 'full'.

I guess what you want is

{ path: '', component: DummyComponent, pathMatch: 'full' },

Where DummyComponent is a component with an empty view. You can reuse the same DummyComponent for all these paths.

Answer 3

This might help someone else.

I was getting this error. I have checked all my defined routes in my route file, the path and components are defined correctly.

The reason of getting this error was that I forgot to add reference of my service in app.module.ts which was being used in one of my component to get data from RestApi.

So, always add service reference in app.module.ts in providers section, immediately after creating service.

imports: [
   BrowserModule,
   HttpModule,
   ......
 ],

providers: [
    AuthService, 
    ........ // Here, service reference
]

Answer 4

TLDR; answer :

{
      path: ':question',
      runGuardsAndResolvers: GUARDS_RESOLVERS_DISABLED   // blocks component creation
}

Where GUARDS_RESOLVERS_DISABLED is a global function (to avoid issues with AOT).

 export function GUARDS_RESOLVERS_DISABLED() { return false; }

---

There's a new feature in Angular router that sounds related to this problem, but isn't - as far as I can tell - a direct solution for it. The new option is runGuardsAndResolvers = 'pathParamsChange' and it affects when Angular checks guards and resolvers - and crucially whether it runs this outlet check.

So before I found the new option:

• I was stepping through into angular code - and the actual error occurs here (highlighted I n red) at context.outlet.component (where component is a getter that throws).

• So to fix I'd just need to make shouldRun == false somehow.

• And shouldRun is simply shouldRunGuardsAndResolvers(...) so if that can be made to return false then it won't try to create a component in the 'wrong' place.

So the solution is quite simple:

 {
        path: 'contactus',
        component: ContactUsComponent,

        children: [
            {
                path: 'topics',
                pathMatch: 'full'
            },
            
            {
                path: 'faq',
                component: FaqPanelComponent
            },
            
            { 
                path: 'test',
                component: ContactusTopicListComponent
            },
            {
                path: ':category',
                
                children: 
                [
                    {
                        path: ':question',
                        runGuardsAndResolvers: () => false   // blocks component creation
                    }
                ]
            }
        ]
    },

Currently runGuardsAndResolvers has quite a few options, but the one I'm using just always returns false which is equivalent to never which really ought to be made into an option. But that's how I found out about the new router features :-)

Also if you have two levels you need to put this at both (or possibly just the highest) level:

        {
            path: ':category',
            runGuardsAndResolvers: () => false,
            
            children: 
            [
                {
                    path: ':question',
                    runGuardsAndResolvers: () => false
                }
            ]
        }

Further reading on resolvers: https://blog.angularindepth.com/new-in-angular-v7-1-updates-to-the-router-fd67d526ad05

---

Edit: To make this work properly with AOT / Angular 9/10+ you can create a global function to avoid the issue mentioned by Sunil.

export function GUARDS_RESOLVERS_DISABLED() { return false; }

Then use this syntax

runGuardsAndResolvers: GUARDS_RESOLVERS_DISABLED