In my Angular 2 app (RC4), when the index.html opens,
I get the error Error: Cannot match any routes: ''
I know this has been asked before, but none of the answers in those cases seems to apply to me; that is, I"m already doing everything recommended to fix this.
I have
<base href="/">
in my head element (also tried
<base href=".">
which makes no difference at all).
I have the following in my app.route.ts:
export const routes: RouterConfig = [
{ path: '', redirectTo: '/instruction-steps', pathMatch: 'full'},
{ path: 'settings', component: SettingsComponent },
{ path: 'find-and-replace', component: FindAndReplaceComponent },
{ path: 'instruction-steps', component: InstructionStepsComponent }
];
The page does render correctly, and my routes to the other views work. If I reload the page, however, I'll not only get the error, but the page does not render.
This is running on lite-server, not ASP.NET.
i can not comment due to low reputation points but are you using angular 2 with asp.net then you have to add code in startup.cs that point to use index.html when no route found.
Here are a few tips to watch out for:
Be sure that modules are properly defined as #NgModule.
Be sure that routing modules are properly added to imports for the module.
Be sure that paths are spelled correctly (e.g. "item" vs. "items")
Be sure that each module is added to the main App Module.
Please note that this is as of the Final release of Angular 2.
Related
AngularJS 1.x ui-router has the extreme flexible concept of viewports. They seem to me like named routes but offer much more flexibility.
The routes with viewports are not divided into something like primary/aux routes. They are just put anywhere in the html with the ui-view and you can reference them by viewport name from your states/routes.
Now with the new angular 2 router 3 by viktor savkin I can not find that flexibility because the <router-outlet> is directly put to the component, so it seems bound to it.
Maybe my approach is too ui-router like...
Although I know of the angular ui-router for ng2 I do not want to use it:
I have created some sketches (with typos in the url sadly, but I lost the original sketch somehow...)that you understand more what I wanna achieve:
When I am on the state/url /projects/1 - which would be a componentless route with the angular router 3 alpha... - and click the open button of the project then the child meetings for this project are rendered into
I am jumping from one error to the other like:
- can not read data annotations of undefined
- can not find primary outled
- can not find any matching route...
This is a pretty mess to setup this common scenario.
One of the things I tried:
{ path: 'projects', component: ProjectsRootComponent, children: [
{ path: '', component: ProjectsListComponent },
{ path: 'create', component: ProjectsCreateComponent },
{ path: ':id', children:[ // componentless route
{ path: 'meetings', component: MeetingsListComponent},
]}
]
},
I would be glad about any help on this else I try the ui-router which offers an easier and more obvious concept at first sight.
I'm trying to do something seemingly simple. I have the following defined:
#Routes([
{ path: '/stores', component: StoresComponent },
{ path: '/stores/new', component: StoresCreateComponent}
])
When I navigate to /stores I display a list of existing stores. I have a link on that page to navigate to a screen to create a new store. However, when I navigate to /stores/new, I get the following:
browser_adapter.ts:78Error: Uncaught (in promise): Component 'StoresComponent' does not have route configuration
I'm pretty new to Angular so I'm not entirely sure what I need to do in order to get a route like that working.
Order routes so that more specific ones come first and less specific ones last. That's a current limitation of the RC.1 router.
#Routes([
{ path: '/stores/new', component: StoresCreateComponent}
{ path: '/stores', component: StoresComponent },
])
All the samples I come across on the web are SPAs, I'm wondering if Angular 2 has a build-in way to handle static pages. Specifically, let's say I use Angular 2 to build a blog site, and I wish users could go directly to a particular post without going through the default home component, (which also incidentally, loads a lot of server side config). I mean, how do I enable user to go to http://server/posts/:id directly, without 404 showing up or configure a ** page for unreachables.
Just need some directions, thanks.
Let's say my folder structure goes like this
/posts
/shared
/users
and my main router goes like this
#RouteConfig([
{ path: './shared/...', name: 'Shared', component: SharedComponent },
{ path: './users/...', name: 'Users', component: UserComponent },
{ path: './posts/...', name: 'Posts', component: PostComponent }
])
and post router goes like this
#RouteConfig([
{ path: '/', name: 'List', component: ListComponent, useAsDefault: true },
{ path: '/:id', name: 'Post', component: PostComponent },
{ path: '/:id/gallery', name: 'Gallery', component: GalleryComponent },
{ path: '/:id/comments', name: 'Comments', component: CommentListComponent },
])
I think I understand your problem. You need to configure your web server software (e.g., Apache) a certain way, this is not an Angular2 configuration issue. You need to configure your web server so that whenever it receives url requests like / or /posts or /posts/123 that it serves your main index.html file. Then Angular will automatically show the right content when it starts up.
Seems like you are looking for routers. Have a look at the docs:
Off. Guide and Router Tutorial. It's used like this:
#Component({ ... })
#RouteConfig([
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
{path:'/heroes', name: 'Heroes', component: HeroListComponent},
{path:'/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}
])
export class AppComponent { }
Its quite hard to tell the perfect answer as you are asking for without going through the default home component(I am not sure what do you mean by that).
AFAIK, in angular2 you can have one component which can define/set routes for other components and so their relevant view.
Let's say after defining routes in a single component, if you go with the HashLocationStrategy like below,
bootstrap(AppComponent, [provide(LocationStrategy,{useClass: HashLocationStrategy}]);
Angular2 will be able to provide you required route and so you don't need to configure server with some extra route setting. Then, you will be able to access required resource at http://server/#/posts/:id
If you go with PathLocationStrategy like below,
bootstrap(AppComponent, [provide(APP_BASE_HREF).toValue(location.pathname)]);
For this configuration angular2 will not be able to provide you required route and so server side routing needs to be configured. Then, you will be able to access required resource at http://server/posts/:id
So In short if required/asking path exits, it will take users to that path.
I know I'm a year late, but your issue is that whatever web-server you're using needs to rewrite urls to the index.html of your web-app. If it did that, then when you went to server/hero/123, the web-server would direct it to the index.html of your web-app, and your web-app would use the router to go to the HeroDetail component, without showing the default home component. Because you don't have the rewrite, the web-server is not even starting the angular app and is instead trying to serve the file server/hero/123, which doesn't exist and therefore it gives you a 404.
FYI this would still be a SPA (single page application).
I have an angular 2 app with the following routes:
#RouteConfig([
new Route({ path: '/', component: Home, name: 'Home', useAsDefault: true}),
new Route({ path: '/employees', component: ViewEmployees, name: 'ViewEmployees'}),
new Route({ path: '/employees/add', component: AddEmployee, name: 'AddEmployee'}),
])
among others. When I change routes in the following way:
<a [routerLink]="['ViewEmployees']">View Employees</a>
There are no issues. I can change routes in this way from either the home page or the AddEmployee route. The issue comes when I'm in the AddEmployee route and try to change routes in a programmatic way like this:
import {Router} from 'angular2/router';
...
constructor(private _router:Router) {}
...
navigate() {
this._router.navigate(['ViewEmployees']);
}
it doesn't work. It sends me to the ViewEmployees view and then reloads the entire app. If I do that same programmatic route change from the Home component I don't have any issues; the app doesn't reload.
Does anyone have any ideas why it would do this in just this one case? I need it to work so that I can save the employee that's added and then go back to the employee list view.
Thanks in advance for the help!
Do you call navigate() from within a <form> Tag?
I had the same Problem. There exist some issues describing this behavior on Angular2s GitHub but they are all closed because they belong to the old router. The page reload seems to occur when you use router.navigate() inside a function called by a submit button inside a form. This can cause the browser to append a ? at the end of the URL and reload it.
The solution is very simple: Just return false at the end of your navigate() function. This prevents the bowser to use it's default action when submitting forms. Usually angular stops such default behavior but strangely not in this case.
Have you set the <base href>?
As mentioned in the Router guide
Add the following code to your index.html after the opening head tag:
<base href="/">
From RouterLink docs:
The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.
Use:
<a [routerLink]="['/ViewEmployees']">View Employees</a>
I am using stateProvider with $locationProvider.html5Mode:
// Redirect any unmatched url
$urlRouterProvider.otherwise("/cool");
$stateProvider
// Dashboard
.state('cool', {
url: "/cool",
templateUrl: "views/cool.html"
});
$locationProvider.html5Mode(true);
But when I http://localhost:8080/cool I will get Cannot GET /cool error. http://localhost:8080/ and http://localhost:8080/#/cool is working correctly.
After some research I found out the problem is because of grunt connect. so I added modRoute to route all url to index.html:
livereload: {
options: {
open: true,
middleware: function (connect) {
return [
modRewrite([
'!\\.\\w+$ /'
]),
but now the problem is every url like http://localhost:8080/uncool to http://localhost:8080/cool.
First, make sure you have the "base"-tag in your head.
<base href="/">
Then make sure that your "/cool"-page serves the same thing as your "/". If not, the server will send back 404 (as expected). This has to be true for all your "sub pages".
To test if this is the case – create a link with a href to "/cool", angular should handle this "internally" with a pushState, which differs from just "browsing" to that page. Meaning, when you click the link, the page will serve as expected, but if you reload (CTRL + R), you will get the error.
If you use html5mode you have to include <base> tag in your head part in document. You can set requireBase to false and use html5mode without <base> tag. Please have a look at angular documentation and ui-router documentation