No macro text and route update

src/components/macro/edit/macro-edit.component.html

@@ -13,5 +13,5 @@
 </template>
 
 <div *ngIf="!macro" class="not-found">
-    Sorry, there is no macro with this id.
+    There is no macro with id {{ route.params.select('id') | async }}.
 </div>

src/components/macro/edit/macro-edit.component.ts

@@ -25,7 +25,7 @@ export class MacroEditComponent implements OnDestroy {
     private macro: Macro;
     private isNew: boolean;
 
-    constructor(private store: Store<AppState>, private route: ActivatedRoute) {
+    constructor(private store: Store<AppState>, public route: ActivatedRoute) {
         this.subscription = route
             .params
             .select<string>('id')

src/components/macro/index.ts

@@ -2,6 +2,7 @@ export * from './edit/macro-edit.component';
 export * from './list/macro-list.component';
 export * from './header/macro-header.component';
 export * from './macro.routes';
+export * from './not-found';
 export * from './item';
 export * from './action-editor';
 export * from './action-editor/tab';

src/components/macro/macro.routes.ts

@@ -1,11 +1,12 @@
 import { Routes } from '@angular/router';
 
 import { MacroEditComponent } from './edit/macro-edit.component';
+import { MacroNotFoundComponent } from './not-found';
 
 export const macroRoutes: Routes = [
     {
         path: 'macro',
-        component: MacroEditComponent
+        component: MacroNotFoundComponent
     },
     {
         path: 'macro/:id',

src/components/macro/not-found/index.ts

@@ -0,0 +1 @@
+export { MacroNotFoundComponent} from './macro-not-found.component';

src/components/macro/not-found/macro-not-found.component.html

@@ -0,0 +1,3 @@
+<div class="not-found">
+    You don't have any macros. Try to add one!
+</div>

src/components/macro/not-found/macro-not-found.component.scss

@@ -0,0 +1,5 @@
+.not-found {
+    margin-top: 30px;
+    font-size: 16px;
+    text-align: center;
+}

src/components/macro/not-found/macro-not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'macro-not-found',
+    template: require('./macro-not-found.component.html'),
+    styles: [require('./macro-not-found.component.scss')]
+})
+export class MacroNotFoundComponent { }