angular: Tour Of Heroes > Missing Step > exports: [ RouterModule ]
I’m submitting a…
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
The current documentation within the Tour of Heros is missing a step I believe…
https://angular.io/tutorial/toh-pt5#routermoduleforroot
The step calls for adding…
imports: [ RouterModule.forRoot(routes) ],
which results in an error of…
compiler.js:485 Uncaught Error: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<h1>{{ title }}</h1>
[ERROR ->]<router-outlet></router-outlet>
<app-messages></app-messages>
Expected behavior
I am new to Angular, but I believe what is needed is an export as well. Or at least that is how I was able to get things working as follows…
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 4
- Comments: 38 (22 by maintainers)
Commits related to this issue
- docs: add note on importing AppRoutingModule Fixes #21207 — committed to samjulien/angular by samjulien 4 years ago
- docs: add note on importing AppRoutingModule (#34710) Fixes #21207 PR Close #34710 — committed to angular/angular by samjulien 4 years ago
I continue with the error when I add:
imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ]
Some help!!! Thanks
I think, it is very much clear now. Thanks.
@kapunahelewong @tbleken From the source I see in this thread I think the CommonModule isn’t imported. A lot of angular directives live inside there, and from what I read above, I suspect
router-outletdoes to.I had the same problem @tbleken had and it was solved in the same way: importing the AppRoutingModule. Thanks @kapunahelewong for you code!
I think that the issue is still not resolved. The documentation is currently stating that only import is required. I had to go to the bottom of the page where the export is explicitely mentioned to resolve it. A minor thing, but still
@kapunahelewong : Thanks a lot! I compared your files to mine, and the only crucial difference was in app.module.ts where you had one more imports, AppRoutingModule. I added it, and the error disappeared. I see that it’s mentioned in the last comment right before the Ty It button, but since it was not shown in any of the code samples, I didn’t add it earlier. In the final code listing it’s included, however that’s together with many other changes. Beyond Compare has once again paid for itself. 😃 Again, thank you for your kind help.
Hey @tbleken, I worked my way through and couldn’t get the same problem to come up, though it certainly warrants a closer look. I downloaded your src folder and put it into a working app and indeed, it returned the
router-outleterror, even though, as far as I could tell, you had theapp-routing.module.tsand theapp.module.tscorrect. I experimented and rebuilt 5 times, with your code and with mine, but the only way I could duplicate the error in my app was to not exportAppRoutingModulefromapp-routing.module.ts. To help you get over this point in the Tutorial, I’ve pushed my version up for you. If you’d like, you can take it and continue to work your way through using it instead. Meanwhile, I can try to take a closer look at the language in there and make sure it’s clearer.I hope this helps. The example I made is here: https://github.com/kapunahelewong/tohpt5-beginning
It is up to this point in the tutorial: https://angular.io/tutorial/toh-pt5#add-a-navigation-link-routerlink
Good luck!
cc @jenniferfell @chembu @brandonroberts
EDIT: @tbleken feel free to tag me with any questions.