Angular-cli: Error after generating new route

[adityaparab]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Windows 7

1. Versions. Please run ng --version. If there's nothing outputted, please
   run in a Terminal:
   node --version
   And paste the result here.

angular-cli: 0.0.39
node: 5.5.0
os: win32 x64

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

1) Create a new app

ng new RoutesApp && cd RoutesApp

2) Add new route

ng g route login

3) Start server

ng serve

1. The log given by the failure. Normally this include a stack trace and some
   more information.

This is the error that gets thrown

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in http://localhost:4200/app/routes-app.component.html:4:0
ORIGINAL EXCEPTION: No provider for RouterOutletMap!
ORIGINAL STACKTRACE:
Error: DI Exception
    at NoProviderError.BaseException [as constructor] (http://localhost:4200/vendor/@angular/core/src/facade/exceptions.js:17:23)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:39:16)
    at new NoProviderError (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:75:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:776:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:804:25)
    at ReflectiveInjector_._getByKey (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:767:25)
    at ReflectiveInjector_.get (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:576:21)
    at ElementInjector.get (http://localhost:4200/vendor/@angular/core/src/linker/element_injector.js:23:48)
    at DebugAppView._View_RoutesAppAppComponent0.createInternal (RoutesAppAppComponent.template.js:24:70)
    at DebugAppView.AppView.create (http://localhost:4200/vendor/@angular/core/src/linker/view.js:66:21)
ERROR CONTEXT:
[object Object]

PFA Complete log file

1. Mention any other details that might be useful.

It appears that if I include ROUTES_PROVIDERS in main.ts and pass ROUTER_PROVIDERS to bootstrap, it seems to get rid of this error.

main.ts

import { ROUTER_PROVIDERS} from '@angular/router';

and

bootstrap(RoutesAppAppComponent,[ROUTER_PROVIDERS]);

localhost-1464170643011.txt

---

Thanks! We'll be in touch soon.

[monojack]

Verify that inside routes-app.component.ts file you have the following:

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

and

export class RoutesAppComponent {

    constructor(private _router: Router){ }
        ...
}

My best guess is you haven't injected the Router inside the constructor. Cheers!

[adityaparab]

Hi,

Thank you for your response. I am able to run the application correctly by making these changes already.

The reason I have reported this is because I think the tool should take care of all this code generation when we generate the route using CLI.

[filipesilva]

@adityaparab it should, yes. Thank you for reporting this, we will investigate.

[oneillsp96]

I ran into similar issue- when generating routes with angular CLI - as of 5/25/2016, adding a route does not add:

• constructor(private router: Router) {} in root component class
• Router or ROUTER_PROVIDERS in root component imports
• providers: [ROUTER_PROVIDERS] in root component

Making these changes got the route up and running.

[adityaparab]

@filipesilva : Thanks,

I looked into this issue and I figured out the reason for this defect. I was able to generate correct route locally.

Now, I want to submit those changes to this repo. Is there any guide or document regarding how I can submit my contribution? I am excited for my first open source contribution :dancer:

I looked around this repo, but didn't find any such doc yet.

[monojack]

@adityaparab check out the CONTRIBUTING.md file.

[RicardoVaranda]

Currently working on a PR to fix this issue will release it by the end of the day :smiley:

[emascarinas]

for my case I added: 'ROUTER_PROVIDERS'

import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
....
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS
]

[filipesilva]

Closed as obsolete, route generation is disabled at the moment and being reworked. See https://github.com/angular/angular-cli/issues/1093

[angular-automatic-lock-bot[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._}