Importing ngrx StoreModule causes label to not work about angular-playground

[mgmarlow]

Ah, I see the scenario that you're describing. When you run angular-playground, we are technically serving one application (main.playground.ts) from the app entry within .angular-cli.json. That is why I was recommending the above approach to handling @ngrx/store.

With a monorepo, it is a little more complicated because (I am assuming) you have the potential for many apps listed within .angular-cli.json. To handle this case, I would recommend creating a separate playground module for each of your applications. As for libs, I don't see anything wrong with creating one playground to handle all libs, since they aren't likely to use a lot of module-specific configuration.

If there is enough demand for it (we are seeing more and more people using the nrwl/nx repo starter) we have been discussing different approaches to handling a multi-app architecture without creating more applications within .angular-cli.json. The problem lies in scalability and isolation, as the point of having applications separate is because they don't mix together. However, this is something that we could see becoming useful so we are open to it.

I'm going to close this issue since this is an unrelated topic, but if you run into any other configuration issues please feel free to put in a new ticket.

[mgmarlow]

StoreModule.forRoot() should not be called from within a component's sandbox. Instead, call that module's function from Playground's root module by tweaking it like so:

// ./src/ngrx-playground.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent, PlaygroundCommonModule } from 'angular-playground';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './app/reducers/counter.reducer';

@NgModule({
    imports: [
        BrowserModule,
        PlaygroundCommonModule,
        StoreModule.forRoot({ count: counterReducer })
    ],
    bootstrap: [ AppComponent ]
})
export class NgrxPlaygroundModule {
}

And reference this module from your main.playground.ts:

// ./src/main.playground.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { initializePlayground } from 'angular-playground';
import { NgrxPlaygroundModule } from './ngrx-playground.module';

initializePlayground('app-root');
platformBrowserDynamic().bootstrapModule(NgrxPlaygroundModule);

From here, a component's individual sandbox does not need to import the StoreModule.

// ./src/app/counter/counter.component.sandbox.ts
import { sandboxOf } from 'angular-playground';
import { CounterComponent } from './counter.component';

export default sandboxOf(CounterComponent, { label: 'libs' })
    .add('Default', {
        template: `<app-counter></app-counter>`
    });

For more information, see our docs about configuration animations, which also provides an example where a custom root module is required: http://www.angularplayground.it/docs/how-to/custom-root-ngmodule.

With the above configuration, I was able to successfully create a sandbox with a label.

[dereklin]

I am using nrwl/nx mono repo. I am create one playground app for all my apps and the libs folder. Having to import an app specific module is a little awkward.

In a mono repo, do you recommend creating individual playground per app and then an extra playground for the libs?

Or do you recommend creating one playground app for all apps and libs?