angular 4 更改主页 url 和组件答案

【问题标题】：angular 4 change home page url and componentangular 4 更改主页 url 和组件
【发布时间】：2018-08-20 19:53:08
【问题描述】：

我有一个带有登录和注册页面的 Angular 4 应用程序，然后我有这个界面来管理我的员工和类似的东西。

我想在登录页面的特定页面上启动我的应用程序，例如：

http://localhost:4200/login

如何在 Angular 启动并且 URL 中包含 /login 段后显示登录页面？

这是我的app.module.ts 文件：

import { UserService } from './user.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatMenuModule, MatToolbarModule, MatIconModule, MatInputModule,MatAutocompleteModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

// Define the routes


@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule ,
    RouterModule.forRoot([
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'users',
        component: UserComponent
      }
      {
        path: 'login',
        component: LoginComponent
      }
    ]),
    BrowserAnimationsModule,
    MatButtonModule,
    MatCardModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    MatAutocompleteModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

在测试应用程序时运行的路径是否重要，或者应用程序在部署时运行的真正问题是什么？如果部署很重要，那么ng build --base-href 就可以了。
如果你想设置某种默认路由，请看这里：stackoverflow.com/questions/37605119/…
添加另一个路径：{ path: '', redirectTo: '/login', pathMatch: 'full' }

标签： node.js angular web web-applications

【解决方案1】：

使用空路径路由配置

添加 {path: '' , redirectTo:'/login',pathMatch:'full'} 到您的路线。

【讨论】：

感谢您的帮助 :-)

【解决方案2】：

在你的路线上试试这个

{ path: '**', redirectTo: '/login', pathMatch: 'full' }

【讨论】：