Angular - eine JSON-Datei Bereitstellen auf Firebase

Question

Zusammenfassung

• ich einen Winkel Projekt mit einer JSON-Datei mit Scheindaten
• Als ich das Projekt erstellen, ich habe die JSON-Datei in die ‚dist-Stick 'Ordner
• ich habe einen Winkel Dienst, der die JSON-Datei verweist
• ich implementieren einen Fehler Mangel an Wissen und Feuerbasis erhalten
• Bitte entschuldigen Sie hier ausnahmsweise neu in diese

Fragen

1. Ist es möglich, eine JSON-Datei während der Arbeit in Localhost zu benutzen?
2. Was habe ich bei der Bereitstellung auf Firebase falsch gemacht?

Dienst

import { IProjects } from './projects.interface'; 
 

 
@Injectable() 
 
export class ProjectsService { 
 
    private _projectURL = '/dist/projects-list.json'; 
 

 
    constructor(private _http: Http) { } 
 

 
    getProjects(): Observable<IProjects[]> { 
 
     return this._http.get(this._projectURL) 
 
      .map((response: Response) => <IProjects[]> response.json()) 
 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
 
      .catch(this.handleError); 
 
    } 
 

 
    getProject(id: number): Observable<IProjects> { 
 
     return this.getProjects() 
 
      .map((projects: IProjects[]) => projects.find(p => p.projectId === id)); 
 
    } 
 

 
    private handleError(error: Response) { 
 
     console.error(error); 
 
     return Observable.throw(error.json().error || 'Server error'); 
 
    } 
 
}

Listenkomponente, die die Liste der Projekte zeigt

export class ProjectsListComponent implements OnInit { 
 
    pageTitle = "Project List"; 
 
    errorMessage: string; 
 
    projects: IProjects[]; 
 

 
    constructor(private _projectsService: ProjectsService) { 
 

 
    } 
 

 

 
    ngOnInit(): void { 
 
     this._projectsService.getProjects() 
 
      .subscribe(projects => this.projects = projects, 
 
      error => this.errorMessage = <any>error); 
 
    } 
 

 
    onRatingClicked(message: string): void { 
 
     this.pageTitle = 'Project List: ' + message; 
 
    } 
 
}

Fehler im Browser empfangen

Jede Hilfe wäre sehr dankbar :)

Answer 1

Sie Ihre Mock JSON-Datei im assets Ordner in Ihrem Winkel Projekt hinzufügen.

und Sie können diesen Zugang wie

getProjects(): Observable<IProjects[]> { 
     return this._http.get("assets/projects-list.json") 
      .map((response: Response) => <IProjects[]> response.json()) 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
    } 

Hinweis: - Sie müssen wie Bild oder Config-Datei in dem Ordner Assets statische Datei hinzufügen. eckig kann nur auf den Ordner "Assets" zugreifen.