I am starting on Angular 2 and have been playing around with routes. Everything was working correctly when I did not have routes, but now every time I go to /home, I get this error.
Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAIw4ABEAAAABQcAAAQABAAAAAAAAAAAAAAAAAAAAA…hgZiCKVViwAiVhsAFFYyNisAIjRLMJCgMCK7MLEAMCK7MRFgMCK1myBCgGRVJEswsQBAIrAA==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. I am working with HAML but I don't think that is the problem. Index is still .html extension which also doesn't seem to be causing problems.
Here is my index.html.
<html> <head> <meta charset="UTF-8"> <title>Freelance Bootcamp</title> <base href='/'> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <app>App Loading...</app> </body> </html> app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { HomepageComponent } from './homepage/homepage.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ imports: [ BrowserModule, HttpModule, AppRoutingModule ], declarations: [ AppComponent, HomepageComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} app.component.ts
import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'app', templateUrl: 'app.component.haml' }) export class AppComponent { title: 'Freelance Bootcamp Dashboard'; } homepage.component.ts
import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'homepage', templateUrl: 'homepage.component.haml' }) export class HomepageComponent {} app-routing.module.ts
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomepageComponent } from './homepage/homepage.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomepageComponent }, ] @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {} The redirectTo /home works when I go to localhost:4200. If I go to localhost:4200/home, that's when I get the error described and my page gets stuck in the App Loading... screen.
If it helps, I generated the application with angular-cli by typing:
ng new application If anyone could help me with this, that would be amazing and thank you in advance.
I hope this is enough information to go off of. If not, please let me know what else you need to know.