Angular - 将 JSON 文件部署到 firebase

Question

总结

• 我有一个带有模拟数据的 JSON 文件的 Angular 项目
• 在构建项目时，我将 JSON 文件粘贴到“dist”文件夹中
• 我有一个引用 JSON 文件的角度服务
• 我部署到 Firebase 并收到错误消息
• 请原谅这里缺乏知识，对此非常陌生

问题

1. 在 LocalHost 中工作时是否可以使用 JSON 文件？
2. 我在部署到 Firebase 时做错了什么？

服务

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');
    }
}

显示项目列表的列表组件

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

浏览器收到错误

任何帮助将不胜感激:)

Answer 1

您需要在 Angular 项目的 assets 文件夹中添加模拟 json 文件。

你可以这样访问

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);
    }

注意：- 您需要在 assets 文件夹中添加静态文件，如图像或配置文件。 angular 只能访问 assets 文件夹。