角路由模块不重定向或将其引入组件
角路由模块不重定向或将其引入组件
提问于 2021-05-07 19:47:54
我试图启动一个有角度的项目，但由于某种原因，默认的应用程序无法工作。
应用程序启动时没有任何错误，但是浏览器显示一个空页面，而不是"home works!“。
当我进入登录页面时，什么都不会发生，其他链接(如/hello)也不会将我重定向到家。我想我的路由模块根本不起作用。我可以在网址上写任何东西什么都不会发生。在这里，代码：
app-routing.module.ts :
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import {EdoxiaGuard} from './services/guard/edoxia-guard.guard';
const routes: Routes = [
{ path: '/', component: HomeComponent, canActivate:[EdoxiaGuard] },
{ path: '/login', component: LoginComponent, canActivate:[EdoxiaGuard] },
{ path: '**', redirectTo: '/' }
];
@NgModule({
imports: [RouterModule.forRoot(routes,
{ enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [LoginComponent, HomeComponent]app.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'edoxia',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'edoxia-front';
}app.module.ts :
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { ToolbarComponent } from './shared/toolbar/toolbar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
routingComponents,
ToolbarComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app.component.html :
<router-outlet></router-outlet>index.html :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>EdoxiaFront</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<edoxia></edoxia>
</body>
</html>home.component.html :
<p>home works!</p>home.component.ts :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}login.component.html :
<p>login works!</p>login.component.ts :
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit(): void {
}
}edoxia卫士.卫士:
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class EdoxiaGuard implements CanActivate {
canActivate() {
return true;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-08 09:35:44
你检查过控制台了吗？我想你会犯一个有用的错误：
Error: Invalid configuration of route '/': path cannot start with a slash因此，您应该删除路线上的斜线，以便：
const routes: Routes = [
{ path: '', component: HomeComponent, canActivate:[EdoxiaGuard] },
{ path: 'login', component: LoginComponent, canActivate:[EdoxiaGuard] },
{ path: '**', redirectTo: '' }
];我还注意到，您没有导入RouterModule，这是必需的。
app.module.ts：
imports: [
RouterModule, <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],那么你的应用程序也应该能正常工作。看看这个斯塔克布利茨。
编辑:开始运行您的项目，开发控制台也会帮助您在这里。上面写着..。
Error: No base href set因此，您需要将index.html添加到head标记中，即：
<base href="/">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67440892
复制相关文章
相似问题
腾讯云开发者
