IdleService move out of app.component (#242)

* feat(): add ScullyModule
* feat(): add ScullyContentModule to ship individual pieces
* improvement(idleservice and componetsmodule): get gird of injecting idleService, and better name

This PR gets rid of the compentsModule name in favor for ScullyLibModule. Also it removed the need
to add the idleService to app.component.

BREAKING CHANGE: componentsModule is renamed

* refactor(remove stray nguniversal files): remove some stray ngUniversal files
* fix(appp.module): put browsermodule back in

Co-authored-by: Stewan Silva <oi@stewan.io>

Author: SanderElias

projects/sampleBlog/src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {Routes, RouterModule} from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
 
 const routes: Routes = [
   {

projects/sampleBlog/src/app/app.component.ts

@@ -12,5 +12,5 @@ export class AppComponent {
     : isScullyGenerated()
     ? 'Loaded from static HTML'
     : 'SPA mode';
-  constructor(private idle: IdleMonitorService) {}
+  constructor() {}
 }

projects/sampleBlog/src/app/app.module.ts

@@ -1,12 +1,13 @@
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
+import {ScullyLibModule} from '@scullyio/ng-lib';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [HttpClientModule, BrowserModule.withServerTransition({appId: 'serverApp'}), AppRoutingModule],
+  imports: [BrowserModule, HttpClientModule, AppRoutingModule, ScullyLibModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

projects/sampleBlog/src/app/app.server.module.ts

@@ -1,12 +1,12 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {ComponentsModule} from '@scullyio/ng-lib';
+import {ScullyLibModule} from '@scullyio/ng-lib';
+import {BlogListComponent} from './blog-list/blog-list.component';
 import {BlogRoutingModule} from './blog-routing.module';
 import {BlogComponent} from './blog.component';
-import {BlogListComponent} from './blog-list/blog-list.component';
 
 @NgModule({
   declarations: [BlogComponent, BlogListComponent],
-  imports: [CommonModule, BlogRoutingModule, ComponentsModule],
+  imports: [CommonModule, BlogRoutingModule, ScullyLibModule],
 })
 export class BlogModule {}

projects/sampleBlog/src/app/blog/blog.module.ts

@@ -1,8 +1,8 @@
 import {NgModule} from '@angular/core';
-import {ScullyContentComponent} from './scully-content/scully-content.component';
+import {ScullyContentComponent} from './scully-content.component';
 
 @NgModule({
   declarations: [ScullyContentComponent],
   exports: [ScullyContentComponent],
 })
-export class ComponentsModule {}
+export class ScullyContentModule {}

projects/sampleBlog/src/main.server.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {IdleMonitorService} from './idleMonitor/idle-monitor.service';
+import {ScullyContentModule} from './scully-content/scully-content.module';
+
+@NgModule({
+  imports: [ScullyContentModule],
+  exports: [ScullyContentModule],
+})
+export class ScullyLibModule {
+  /**
+   * We use a little trick to get a working idle-service.
+   * First, we separate out the component in a separate module to prevent a circulair injection
+   * second we create a constuctor that activates the IdleMonitorService. as that is provided for 'root'
+   * there will be only 1 instance in our app.
+   * We don't need forRoot, as we are not configuring anything in here.
+   */
+  constructor(private idle: IdleMonitorService) {}
+}

projects/scullyio/ng-lib/src/lib/components.module.ts renamed to projects/scullyio/ng-lib/src/lib/scully-content/scully-content.module.ts

@@ -2,9 +2,10 @@
  * Public API Surface of ng-lib
  */
 
-export * from './lib/components.module';
 export * from './lib/idleMonitor/idle-monitor.service';
-export * from './lib/transfer-state/transfer-state.service';
 export * from './lib/route-service/scully-routes.service';
 export * from './lib/scully-content/scully-content.component';
+export * from './lib/scully-content/scully-content.module';
+export * from './lib/scully-lib.module';
+export * from './lib/transfer-state/transfer-state.service';
 export * from './lib/utils/isScully';

projects/scullyio/ng-lib/src/lib/scully-lib.module.ts

@@ -1,11 +1,11 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {ComponentsModule} from '@scullyio/ng-lib';
+import {ScullyLibModule} from '@scullyio/ng-lib/bundles/scullyio-ng-lib.umd';
 import {BlogRoutingModule} from './blog-routing.module';
 import {BlogComponent} from './blog.component';
 
 @NgModule({
   declarations: [BlogComponent],
-  imports: [CommonModule, BlogRoutingModule, ComponentsModule],
+  imports: [CommonModule, BlogRoutingModule, ScullyLibModule],
 })
 export class BlogModule {}