Angular 4 路由

Posted 2023-02-22

【中文标题】Angular 4 路由

【英文标题】：Angular 4 Routing

【发布时间】：2018-01-13 09:35:50

【问题描述】：

人们可以停止建议用 angular-4 标记这篇文章吗 路由？我知道那个标签。然而，我的问题是不做 使用 Angular 4 的路由 - 这是一个错误的问题，因为我没有 了解当时的情况。这里的解决方案不会 帮助需要实际 帮助的人，所以我不同意 应该这样标记，我将继续拒绝这种改变。我重申：在没有首先了解 php、nodejs、dist 文件夹和一大堆其他东西的情况下尝试使用标准托管包启动 Angular Web 应用程序是错误的。我看到很多人犯了类似的错误，但他们需要知道这与其说是路由问题，不如说是不了解网站问题，他们应该像我一样做，然后好好学习。

我的 不起作用。

与 Angular 2 不同。请仅遇到与 Angular 4 类似问题的人发表评论。似乎发生了很多变化，我按照 2017 年指南设置了我的路由。标记旧的解决方案只是令人困惑和无益 - 特别是因为我是 Angular 的新手并且只有 4 的经验。我不想使用 HashLocationStrategy *

我可以导航到我的域，然后使用我的菜单组件在页面之间导航，但是当我输入 mydomain/home 时，我看到一个空白页面。看起来其他人对以前版本的 Angular 提出了类似的问题，但我看不到任何使用较新设置的人。

我有

import  routes  from './app.router';

在 app.module.ts 中

和

import  ModuleWithProviders  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';

import  HomeComponent  from './home/home.component';
import  ArtComponent  from './art/art.component';
import  MusicComponent  from './music/music.component';
import  EventsComponent  from './events/events.component';

export const router: Routes = [
     path: '', redirectTo: 'home', pathMatch: 'full',
     path: 'home', component: HomeComponent ,
     path: 'art', component: ArtComponent ,
     path: 'music', component: MusicComponent ,
     path: 'events', component: EventsComponent 
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

在 app.router.ts 中

恐怕我对 Angular 很陌生！

这些是 Chrome Inspector 中的错误：

polyfills.71b130084c52939ca448.bundle.js:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
(anonymous) @ polyfills.71b130084c52939ca448.bundle.js:1
firebug-lite.js:30396 [Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
getMembers @ firebug-lite.js:30396
home Failed to load resource: the server responded with a status of 404 ()

我已将此问题缩小到与此处类似的构建问题：https://github.com/angular/angular-cli/issues/5113

这个问题似乎没有一个令人满意的答案 - 如果有人能告诉我将我的 --base-href 指向哪里以使我的构建工作？

【问题讨论】：

您是否在控制台中遇到错误？

您使用的是哪种网络服务器？您需要更改您的网络服务器配置以处理对您的index.html root 的所有 404 请求

我猜是 Apache？我对这件事的了解还不够——我使用 Angular Cli 构建工具创建了一个 dist 文件夹并通过 FTP 上传。我对 Angular 的内部运作了解不多，我只是边走边学。我将尝试通过我的虚拟主机的控制台指定 404 重定向，因为它也应该从那一侧处理！ Angular 应该在内部处理重定向，否则路由不起作用？

您是使用Ahead OF Time-Compilation 来创建dist 还是只是一个ng 构建？

Angular 2.0 router not working on reloading the browser的可能重复

【参考方案1】：

您需要使用 @NgModule 装饰器并在那里导入您的路线

例如

@NgModule(

imports: [
    RouterModule.forRoot(routes)// provide your routes array here
]

)

以下语句将不起作用， 导出常量路由：ModuleWithProviders = RouterModule.forRoot(router);

【讨论】：

抱歉 Ravinder 我对 Angular 很陌生，你需要比这更清楚！将我的路由数组添加到@NgModule 的打字稿语法是什么？您的意思是将@NgModule 添加到app.router.ts 吗？这到底是做什么的，为什么 ModuleWithProviders 不起作用？

【参考方案2】：

方法 - 1

在 app.module.ts 中

  . . . 

import  Routes, RouterModule  from '@angular/router';




imports: [
RouterModule.forRoot([

  path: '',
  redirectTo: 'home',
  pathMatch: 'full'
,

  path: 'home',
  component: HomeComponent
 , 

  path: 'art' , 
  component: ArtComponent
 

. . . 


]),

方法-2 在 app.router :: 中添加以下内容：

. . . 
export const router: Routes = [
 path: '', redirectTo: 'home', pathMatch: 'full',
 path: 'home', component: HomeComponent ,
 path: 'art', component: ArtComponent ,
 path: 'music', component: MusicComponent ,
 path: 'events', component: EventsComponent 
];
. . . .

就像你做的那样，然后在你的 app.module.ts 中

import  routes  from './app.router';
. . . 
imports : [ 
RouterModule.forRoot( routers ) 
] 

参考::Angular Routing and Navigation

如果它不起作用，请在 cmets 中告诉我。

【讨论】：

您好，我收到以下错误：/src/app/app.module.ts (50,5) 中的错误：找不到名称“RouterModule”。 /src/app/app.module.ts (50,27) 中的错误：找不到名称“路由器”。

从'@angular/router'导入RouterModule；从'./app.router'导入路由器；和 RouterModule.forRoot( router )，这在 cli 中使用 ng serve 解决了这个问题，但在构建中没有。我不知道发生了什么:(

嗨，有没有办法分享代码？可能是 plunker 或 github ？如果没有，请提供更多信息，这可以帮助我更好地理解问题。你从一开始就是@angular/cli 吗？

老实说，不，我不能分享所有的代码——但是相关的代码和你看到的差不多。我一直在使用@angular/cli，但是路由在使用 ng serve 之前不能正常工作，现在可以了。我认为问题可能出在构建上？我一直在使用的终端命令是 ng build --aot --prod --base-href ./

【参考方案3】：

我的 Angular 代码结果很好。问题出在我的托管服务提供商的服务器上。我需要在我的 dist 包中包含一个 .htaccess 文件