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

Question

I am new to Angular, and wanted to have a page with the directory of /cities/denver . I have the file structure

|-- 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

I then declared it in 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 { }

and then in 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 {}

I can get to the page fine using a routerLink, but when I type it into the browser or reload it I get a 404 error saying that runtime.js, polyfill.js, etc cannot be found.

Error message

Now that I'm thinking about it, maybe cities needs to be a module? Any help is appreciated, thanks.

Answer 1

Issue sounds like it's related to how you're serving your application and not related to component folder nesting/structure.

You always need to serve index.html page with Angular routing otherwise you will be trying to pull in the server resource absolutely and not letting Angular routing take over.

Your first example with routerlink probably works because you've started the app with http://localhost:4200 and then clicked on link from there and thus not causing a server reload so you will still be within the Angular client side environment.

For example if you're serving your app via Web API you would do something like below to always force index.html to be served on a server request without changing your URL.

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

Routed apps must fallback to index.html:

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