angular2 servant le fichier JSON local via http.get tout en ayant des règles de routage personnalisées

Question

Je suis très nouveau sur Angular et je rencontre un problème en essayant d'obtenir un fichier .json local via http.get. Cela est dû à mes règles de routage, mais je ne suis pas sûr de savoir comment le réparer.

Structure du répertoire:

api 
    mockAppointments.json 
app 
    app.component.* 
scheduler 
    scheduler.component.* 

scheduler.component.ts où http.get() est fait:

getAppointments() { 
return this.http 
.get('api/mockAppointments.json') 
.map((response : Response) => <Appointment[]>response.json().data) 
.catch(this.handleError); 
} 

règles de routage:

const appRoutes: Routes = [ 
    { 
    path: 'scheduler', 
    component: SchedulerComponent 
    }, 
    { 
    path: '', 
    redirectTo: '/scheduler', 
    pathMatch: 'full' 
    } 
]; 

Comme je passe en revue à http://localhost:4200/scheduler, la page se charge comme prévu, mais la console de développement a l'erreur:

GET http://localhost:4200/api/mockAppointments.json 404 (Not Found) 

Lorsque je tente d'arriver à cette URL en tapant dans le navigateur, je vois ce qui suit dans la console dev:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL 
Segment: 'api/mockAppointments.json' 

Il est donc clair que la question est avec le routage. Pour l'instant j'ai besoin de toutes les URL redirigées vers/scheduler (ce qui se passe). Quand je fais un appel à http.get ('api/mockappointments.json'), il devrait juste servir tel quel, presque comme un passage. Tout ce que j'ai regardé, j'aurais besoin d'un composant pour aller avec n'importe quelle règle de routage. C'est bien, mais il n'y aurait pas de modèle associé.

J'ai essayé de mettre le dossier api sous les atouts, mais cela n'a fait aucune différence.

Finalement, l'appel API serait externe à l'application, donc ce ne serait pas un problème, mais comment puis-je le faire fonctionner pendant le développement?

TLDR: Est-il possible d'avoir une route 'pass through' qui sert un fichier JSON tel quel via http.get()?

Answer 1

Copiez votre dossier api dans le dossier des ressources. Angular peut uniquement accéder aux fichiers du dossier assets.

getAppointments() { 
return this.http 
.get('assets/api/mockAppointments.json') 
.map((response : Response) => <Appointment[]>response.json().data) 
.catch(this.handleError); 
}