Question

我是Angular的新手，并且想创建一个目录为/cities/denver的页面。我有文件结构

|-- app
    |-- app.module.ts
    |-- app-routing.module.ts
      |-- [+] cities
         |-- cities.component.html
         |-- cities.component.scss
         |-- cities.component.spec.ts
         |-- cities.component.ts
         |-- [+] denver
                 |-- denver.component.html
                 |-- denver.component.scss
                 |-- denver.component.spec.ts
                 |-- denver.component.ts

然后我在app.module.ts

中声明了它

import { BrowserModule }      from '@angular/platform-browser';
import { NgModule }           from '@angular/core';
import { NgbModule }          from '@ng-bootstrap/ng-bootstrap';
import { FontAwesomeModule }  from '@fortawesome/angular-fontawesome';
import { AppRoutingModule }   from './app-routing.module';
import { AppComponent }       from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CitiesComponent }    from './cities/cities.component';
import { DenverComponent }    from './cities/denver/denver.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    CitiesComponent,
    DenverComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

，然后在app-routing.module.ts

import { NgModule }               from '@angular/core';
import { RouterModule, Routes }   from '@angular/router';
import { DashboardComponent }     from './dashboard/dashboard.component';
import { CitiesComponent }        from './cities/cities.component';
import { DenverComponent }        from './cities/denver/denver.component';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'cities', component: CitiesComponent },
  { path: 'cities/denver', component: DenverComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

我可以使用routerLink进入页面，但是当我在浏览器中键入或重新加载它时，出现404错误，提示找不到runtime.js，polyfill.js等。

Error message

现在我正在考虑，也许城市需要成为一个模块？谢谢您的帮助。

Answer 1

问题听起来与您服务应用程序的方式有关，而与组件文件夹的嵌套/结构无关。

您始终需要为Angular路由提供index.html页面，否则您将尝试绝对获取服务器资源，而不是让Angular路由接管。

您的第一个带有routerlink的示例可能有用，因为您已经用http://localhost:4200启动了应用程序，然后从那里单击了链接，因此不会导致服务器重新加载，因此您仍将处于Angular客户端环境中。 / p>

例如，如果您通过Web API提供应用程序，则可以执行以下操作，始终在不更改URL的情况下强制将index.html提供给服务器请求。

.
.
.
builder.Use((context, next) =>
{
    context.Request.Path = new PathString("/index.html");
    return next();
});
.
.
.

路由的应用必须回退到index.html：

https://angular.io/guide/deployment#fallback

如何在另一个组件文件夹中使用组件

1 个答案: