I forgot to adjust the class in some steps in 4d1196b

When we use our form and we press the +-Button to add an author or an thumbnail row, the form is submitted.

See https://book-monkey2.angular-buch.com/iteration-4/template-driven-forms/admin

git clone [email protected]:book-monkey2-build/iteration-4-template-driven-forms.git
cd iteration-4-template-driven-forms
ng build --prod --aot

Issue:

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'registerControl' of null
TypeError: Cannot read property 'registerControl' of null

Reason:
https://github.com/angular-buch/book-monkey2/blob/master/src/app/book-monkey/iteration-4/template-driven-forms/book-form/book-form.component.html#L66
ngModelGroup="thumbnail" and name="url" are somehow colliding, when executing this code:
https://github.com/angular/angular/blob/45ddd6ba78b5c9a6994b800f77a0499abb5b9b1a/modules/%40angular/forms/src/directives/ng_form.ts#L93

    NgForm.prototype.addControl = function (dir) {
        var _this = this;
        resolvedPromise.then(function () {
            var container = _this._findContainer(dir.path); // <--- path has "url / thumbnail" --> container goes null
            dir._control = container.registerControl(dir.name, dir.control); // <--- BOOOM!
            setUpControl(dir.control, dir);
            dir.control.updateValueAndValidity({ emitEvent: false });
        });
    };

We need to have always an empty line between application and third party imports (see: https://angular.io/styleguide#!#03-06 )

That mean that we have to move the DateValueAccessorModule to the beginning of each file where the angular imports are

Consider using the ActiveClassDirective instead of .router-link-active in the general app

At the moment, the loading indicator just shows Loading....
We could pretty it up a bit, e.g. with the Semantic UI Loader: http://semantic-ui.com/elements/loader.html

Build for iteration-2-navigation fails with strange error...
see https://travis-ci.org/angular-buch/book-monkey2/jobs/175577742

siehe 4f3620c#commitcomment-17115973

62cf815#commitcomment-17130112

Das Problem liegt schon in der grundsätzlichen Einbindung:

import {BookListSimpleComponent} from './book-list-simple/book-list-simple.component';
import {BookListComponent} from './book-list/book-list.component';

// oder später dann 
import {HttpApp} from './http/http.component';

(siehe https://github.com/Angular2Buch/book-monkey2/blob/refactoring_it1/src/client/app/book-monkey/iteration-1/iteration-1.component.ts)

das geht so nicht. Der BookMonkey wird doch einfach nur weiter entwickelt und bekommt nicht ständig einen neuen Namen!?!
Daher lieber so:

import {BookListComponent as BookListComponent1} from './book-list/book-list.component';
import {BookListComponent as BookListComponent2} from './book-list-refactored/book-list.component';

// oder später dann
import {BookListComponent as BookListComponentXX} from './http/book-list.component';

Das bedeutet, das am Ende tatsächlich immer die BookListComponent eingebunden wird.
Sofern BookList unsere "Startseite" sein soll. @GregOnNet @d-koppenhagen, @fmalcher

Alle Verzeichnisse gleichen sich dann mehr oder weniger und auch der Graph sollte besser ausschauen.

Ich wäre ja zusätzlich noch dafür, die "Home" as startseite wieder einzuführen!

TODO @JohannesHoppe

Ich bin gerade dabei, das mal für iteration1 gerade zu ziehen:
https://github.com/Angular2Buch/book-monkey2/tree/refactoring_it1

BUG: BM-2 uses an outdated errorHandler for the book-store.service.ts

Description

An error handler was introduced in iteration 3 (http)
It is currently using the outdated throw() function which will not throw the desired API-Call error, nor a code-error in VS-Code while compiling.
However it will throw a console error in the dev-tools:

core.js:14597 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function
    at CatchSubscriber.push../src/app/shared/book-store.service.ts.BookStoreService.errorHandler [as selector] (book-store.service.ts:37)
    at 

You can test it by turning off your internet connection.

Implementation

👎Current Implementation (outdated)

  private errorHandler(error: Error | any): Observable<any> {
    return Observable.throw(error);
  }

see Iteration 3 and the corresponding book (1st reprinted edition) on page 178/179

👍 Correct Implementation

  private errorHandler(error: Error | any): Observable<any> {
    return throwError(error);
  }

Source for the issue: Issue 3733 on Rxjs
I´ve also checked your update blog posts but couldn´t find a note about this change. (should be added if possible imo)

Hope this gets fixed soon, it caused quite some confusion. :/

Best Regards
Diverent2 aka Maxi 😄

Wurden für die schönen Skizzen der Ansichten auf Seite 50 und 51 (Liste/Detailansicht..) ein Tool verwendet? Wenn ja welches.

Integrate book.empty() (see: here) in all necessary components/services (e.g. here)

If we want to edit an existing book the value for published is currently not displayed in the corresponding input filed.

Updated:
We now have one app.module.ts per mini app, see here. To make mini monkeys work, change the following:

• Uncomment three lines (in above example: 1, 12, 24) and delete the line below each
• delete app-routing.module.1

To extract the mini monkeys you'll need to change (each scoped to a single mini app):

• app.routing.ts
  • replace RouterModule.forChild with RouterModule.forRoot
• app.module.ts
  • replace line 1: import { CommonModule } from '@angular/common';
    • with import { BrowserModule } from '@angular/platform-browser';
  • replace module import CommonModule with BrowserModule
• (optional) Remove default in export default class AppModule { }

The validation of the authors fails right now in reactive forms example. This happens in edit and in create mode.

Steps to reproduce

• Start local dev server
• Visit http://localhost:4200/iteration-4/http/admin/9783864903571

Shown Error

TSLint grouses about this:

updateErrorMessages() {
    for (let field in this.validation) {
      this.validation[field].error = '';
      let control = this.myForm.get(field);

      if (control && control.dirty && control.invalid) {
        for (let key in control.errors) {
          this.validation[field].error = this.validation[field].messages[key];
        }
      }
    };
  }

TSLInt: for (... in ...) statements must be filtered with an if statement.

Does anybody know a better solution for the whole code-block?
@GregOnNet @fmalcher @JohannesHoppe

If we want to edit a book the validation takes no effect right now.
Using the "normal" form without any init-values, the validation works fine.

The Ide is to have less code in the template and only one area where all error for not valid fields are displayed see here.

Steps to reproduce

• Start development server
• Visit http://localhost:4200/iteration-4/http/books

Actual Behavior

Expected behavior

For each book a thumbnail is shown.