Angular 2+ path to static html

Viewed 1368

In one of my Angular 2+ app, I have a requirement display static html file contents. So I put that static html (helper.html) in the assets folder, and I was able to access it via:

http://localhost:4200/assets/helper.html

But as soon as I introduce a routing module I am getting the following error:

Error: Cannot match any routes. URL Segment: 'assets/static/helper.html' noMatchError

What do I need to do in the routing module to get this path working ?

PS: below is a snippet of my routing module:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent }
]

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }
2 Answers

This html must be with a component. There is no way without it.

add a component file for it and set a url for it

static.component

import {Component} from '@angular/core'
@Component({
    templateUrl:'helper.html'
})
export class StaticComponent{
}

app-routing.module.ts

import {StaticComponet} from '../assets/static.component.ts';
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
{path:'helper',component:StaticComponent}
]

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