'No provider for RouterOutletMap!' error on adding "@angular/router": "3.0.0-alpha.8"

[sathishvj]

I had some working code that showed up a UI correctly. But I had all my code in the main app.component.ts (including the html with member template).

Then I included routing (@angular/router": "3.0.0-alpha.8). I did pretty much the same code as in another app with routing. However, I get the error: 'No provider for RouterOutletMap!'.
On searching I found out another person had a misconfigured webpack. I'm using system.js and mine seems to be ok.

My angular2 version is: 2.0.0-rc.3
I used ng-cli to generate both the --mobile app and the components.

My main.ts looks like this:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { APP_SHELL_RUNTIME_PROVIDERS } from '@angular/app-shell';
import { APP_ROUTER_PROVIDERS } from './app/app.routes';

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [ 
    APP_SHELL_RUNTIME_PROVIDERS,
    APP_ROUTER_PROVIDERS
]);

My app.component.ts is:

import { Component } from '@angular/core';
import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';

import { Router, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
  styles: [],
  directives: [APP_SHELL_DIRECTIVES, ROUTER_DIRECTIVES]

})
export class AppComponent {
}

My app.routes.ts is:

import { provideRouter, RouterConfig } from '@angular/router';
import { TopicsRoutes } from './topics/topics.routes';

export const routes: RouterConfig = [
  ...TopicsRoutes
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

My TopicsRoutes in topics.routes.ts is:

import { RouterConfig } from '@angular/router';
import { TopicsComponent } from './topics.component';

export const TopicsRoutes: RouterConfig = [
  { path: '',  component: TopicsComponent },
  { path: 'topics', component: TopicsComponent }
];

[zoechi]

Any reason you don't use @angular/router": "3.0.0-beta.2"?
Triple-backticks would format your code properly. You can edit your post and fix it to make it more readable.

[sathishvj]

Updated with better formatting. The alpha.8 version was what came by default when I did a ng new project-name --mobile. So I assumed it had some dependency. Let me try with beta.2 then.

[sathishvj]

But other than that, I'm also seeing this error now for the app:

EXCEPTION: Can't resolve all parameters for RouterOutlet: (RouterOutletMap, ViewContainerRef, ?, name).

p.s. I also had to update the default package.json: typings entry to 1.3.1 to do an npm install properly.

[sathishvj]

There were a couple of instructions here: StackOverflow - Can't resolve all parameters for RouterOutlet. But none of them worked either.

[Draeken]

I had the same issue, try with

<router-outlet *shellNoRender></router-outlet>

It will render the routes only when the app is fully loaded.
(See app-shell.md#sharing-the-root-component)

[sathishvj]

That doesn't work either. :-(

[mgechev]

@sathishvj since the --mobile flag enables server-side rendering with Universal, you need to include the router providers in main-app-shell.ts as well. Make sure that your server-side bootstrap configuration looks something like:

import { provide } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { APP_SHELL_BUILD_PROVIDERS } from '@angular/app-shell';
import { APP_ROUTER_PROVIDERS } from './app/app.routes';
import { AppComponent } from './app/';
import {
  REQUEST_URL,
  ORIGIN_URL,
  NODE_LOCATION_PROVIDERS,
} from 'angular2-universal';

export const options = {
  directives: [
    // The component that will become the main App Shell
    AppComponent
  ],
  platformProviders: [
    APP_SHELL_BUILD_PROVIDERS,
    provide(ORIGIN_URL, {
      useValue: ''
    })
  ],
  providers: [
    // What URL should Angular be treating the app as if navigating
    APP_ROUTER_PROVIDERS,
    NODE_LOCATION_PROVIDERS,
    provide(APP_BASE_HREF, {useValue: '/'}),
    provide(REQUEST_URL, {useValue: '/'})
  ],
  async: true,
  preboot: false
};

[sathishvj]

That didn't work either. I started a new project and tried and still having issues. Also has this issue (angular/angular-cli#1174) still. I'm going to try this again after a while.

[mgechev]

@sathishvj what error do you get after you add the APP_ROUTER_PROVIDERS to the Universal config?

[agungsb]

@mgechev I'm facing the similar situation. Your workaround did work, but it prevents the application from being rendered by the server. If I change the async property to false then I got the following error:

Error: Command failed: node /Applications/XAMPP/xamppfiles/htdocs/hello-mobile/node_modules/angular2-broccoli-prerender/dist/child_proc.js  --sourceHtml=/Applications/XAMPP/xamppfiles/htdocs/hello-mobile/tmp/app_shell_plugin-input_base_path-jDgluh3c.tmp/0/index.html --optionsPath=/Applications/XAMPP/xamppfiles/htdocs/hello-mobile/tmp/app_shell_plugin-input_base_path-jDgluh3c.tmp/0/main-app-shell --outputIndexPath=/Applications/XAMPP/xamppfiles/htdocs/hello-mobile/tmp/app_shell_plugin-output_path-ZLcnh1Fq.tmp/index.html
DEPRECATION WARNING: `document` is no longer supported and will be removed in next release. Please use `template`
DEPRECATION WARNING: `Bootloader#serializeApplication` arguments has changed.Please use an `AppConfig` interface {providers: Array<any>, directives: Array<any>, template?: string}
TypeError: Cannot read property 'unsubscribe' of undefined

It seems that there's a problem between using templateUrl and template. Any thoughts?