Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Example): make the example app more user friendly #1508

Merged
merged 2 commits into from
Jan 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions projects/example-app/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { reducers, metaReducers } from '@example-app/reducers';
import { schema } from '@example-app/db';

import { AppComponent } from '@example-app/core/containers/app.component';
import { environment } from '../environments/environment';
import { AppRoutingModule } from '@example-app/app-routing.module';

@NgModule({
Expand Down Expand Up @@ -55,7 +54,9 @@ import { AppRoutingModule } from '@example-app/app-routing.module';
*/
StoreDevtoolsModule.instrument({
name: 'NgRx Book Store App',
logOnly: environment.production,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would match this instead https://github.com/ngrx/platform/blob/master/modules/schematics/src/store/index.ts#L102. That way you still have it during development

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But then the deployed version at https://ngrx.github.io/platform/example-app/#/login won't have the devtools enabled since it's a production build? The main reason for this change would be to have it enabled on the deployed example app, which is included in the redux devtools docs.

The maintainer of redux devtools mentioned he would write e2e tests on the extension used in our example app.

Would it be OK to mention the snippet as a comment? Or should we indeed not include the store devtools?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still want to include it as not something we have to flip manually when deploying the example. If we need to deploy it with the devtools enabled, we can do that using configuration and the environment variables.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yea definitely! I also don't want to introduce a (manual) toggle on builds.
I wanted to always build the app with the devtools fully enabled but still wanted to mention that as a user, you wouldn't want to include the dev tools in a production build.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


// In a production build you would want to disable the Store Devtools
// logOnly: environment.production,
}),

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export class LoginFormComponent implements OnInit {
@Output() submitted = new EventEmitter<Credentials>();

form: FormGroup = new FormGroup({
username: new FormControl(''),
username: new FormControl('ngrx'),
password: new FormControl(''),
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ exports[`Login Page should compile 1`] = `
>
<mat-form-field
_ngcontent-c0=""
class="mat-form-field ng-tns-c2-0 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid _mat-animation-noopable"
class="mat-form-field ng-tns-c2-0 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-should-float mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid _mat-animation-noopable"
>
<div
class="mat-form-field-wrapper"
Expand Down Expand Up @@ -68,7 +68,7 @@ exports[`Login Page should compile 1`] = `

<label
aria-owns="mat-input-0"
class="mat-form-field-label ng-tns-c2-0 mat-empty mat-form-field-empty ng-star-inserted"
class="mat-form-field-label ng-tns-c2-0 ng-star-inserted"
for="mat-input-0"
id="mat-form-field-label-1"
ng-reflect-disabled="true"
Expand Down
2 changes: 1 addition & 1 deletion projects/example-app/src/app/auth/services/auth.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class AuthService {
* Simulate a failed login to display the error
* message for the login form.
*/
if (username !== 'test') {
if (username !== 'test' && username !== 'ngrx') {
return throwError('Invalid username or password');
}

Expand Down