How can I fix this Angular routing problem?-CodePudding

I need to use a JavaScript method in my Angular frontend.

I wrote a sort of controller in this way:

import * as commands from 'commands.js'

const http=require('http')
const post = (request) => {  return new Promise((resolve, reject) => {
    if(request.method === 'POST'){
      if(request.url === '/clean'){
        commands.clean();
      }
    }
  });
};
const server=http.createServer((req,res) => {
  post(req).then(body => {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify(body, null, 2));
  }).catch(err => {
    res.writeHead(403, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({msg: 'Invalid request'}, null, 2));
  });
});
server.listen(3000);

Next with ng generate service home I generate a service where i wrote:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class HomeService {
  private url = "http://localhost:3000";
  private httpHeader=new HttpHeaders({'Access-Control-Allow-Origin':'*'})
  constructor(private http:HttpClient) { }

  public clear():Observable<any>{
    return this.http.post(this.url "/clean",null,{
      headers:this.httpHeader,
      responseType:'text'
    })
  }
}

And then I tryed to use my function clear() in my home.component.ts and I use it like this:

import { Component, OnInit } from '@angular/core';
import {MatCheckboxChange} from "@angular/material/checkbox";
import {HomeService} from "../home.service";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private  homeservice: HomeService) {
  }
  [...]
    async clean(){
    this.homeservice.clear()
    }
  [...]
}

But at this point I found a problem: When I start my app with

ng serve

My app automatic redirect in /src/home and it show me the html code write in home.component.html. In particular I do this with the default Angular routing module. In my app-roting.module.ts the code is:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {SettingsComponent} from "./settings/settings.component";

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
export const routingComponents = [HomeComponent, SettingsComponent]

It works very well but when I add private homeservice: HomeService in the constractor of my home.component.ts, my app tarts to show me the app.component.html white page and I can't do nothing. How can I fix this routing problem?

CodePudding user response：

I think you are missing

<router-outlet></router-outlet>

In your app.component.html

CodePudding user response：

I found the problem, I missed to import in app.module.ts HttpClientModule from @angular/common/http. Now it works.