refactor: HTML5-Routing, styleUrls

Author: Felix Gladisch

src/app/about/about.component.scss

@@ -0,0 +1 @@
+// Nothing here...

src/app/about/about.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'seed-about',
   templateUrl: './about.component.html',
-  styles: [require('./about.component.scss')]
+  styleUrls: ['./about.component.scss']
 })
 export class AboutComponent { }

src/app/app.component.scss

@@ -0,0 +1,5 @@
+.jumbotron {
+  h1 {
+    font-weight: 700;
+  }
+}

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { TranslateService } from 'ng2-translate/ng2-translate';
   selector: 'app',
   encapsulation: ViewEncapsulation.None,
   templateUrl: './app.component.html',
-  styles: [require('./app.component.scss')]
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
 

src/app/app.module.ts

@@ -7,7 +7,7 @@ import { TranslateModule } from 'ng2-translate/ng2-translate';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 
 import { AppComponent } from './app.component';
-import { AppRoutes } from './app.routes';
+import { routing } from './app.routing';
 import { HomeComponent } from './home';
 import { AboutComponent } from './about';
 import { NavigationComponent } from './navigation';
@@ -21,14 +21,11 @@ import { NavigationComponent } from './navigation';
     AboutComponent
   ],
   imports: [
+    routing,
     HttpModule,
     FormsModule,
     BrowserModule,
-    TranslateModule.forRoot(),
-    RouterModule.forRoot(AppRoutes)
-  ],
-  providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy }
+    TranslateModule.forRoot()
   ]
 })
 export class AppModule { }

src/app/app.routes.ts renamed to src/app/app.routing.ts

@@ -1,9 +1,10 @@
-import { Routes } from '@angular/router';
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent } from './home';
 import { AboutComponent } from './about';
 
-export const AppRoutes: Routes = [
+export const appRoutes: Routes = [
   // #/ -> #/home
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   // #/home
@@ -13,3 +14,5 @@ export const AppRoutes: Routes = [
   // #/xyz -> #/home
   { path: '**', redirectTo: 'home' }
 ];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

src/app/home/home.component.scss

@@ -0,0 +1 @@
+// Nothing here...

src/app/home/home.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'seed-home',
   templateUrl: './home.component.html',
-  styles: [require('./home.component.scss')]
+  styleUrls: ['./home.component.scss']
 })
 export class HomeComponent { }

src/app/navigation/navigation.component.ts

@@ -4,7 +4,7 @@ import { TranslateService } from 'ng2-translate/ng2-translate';
 @Component({
   selector: 'seed-navigation',
   templateUrl: './navigation.component.html',
-  styles: [require('./navigation.component.scss')]
+  styleUrls: ['./navigation.component.scss']
 })
 export class NavigationComponent {
 

src/index.html

@@ -7,6 +7,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <base href="/">
+
   <title>Angular App</title>
 
 </head>