feat(empty): add empty component #265875

examples/app1/src/app/app.module.ts

@@ -8,20 +8,13 @@ import { NgxTethysModule } from 'ngx-tethys';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { routers } from './app.routing';
 import { UserDetailComponent } from './user/detail/user-detail.component';
-import { EmptyComponent } from './empty/empty.component';
 import { AppRootComponent } from './root/root.component';
 import { DemoCommonModule } from '@demo/common';
+import { NgxPlanetModule } from 'ngx-planet';
 
 @NgModule({
-    declarations: [
-        AppComponent,
-        AppRootComponent,
-        UserListComponent,
-        UserDetailComponent,
-        DashboardComponent,
-        EmptyComponent
-    ],
-    imports: [BrowserModule, RouterModule.forRoot(routers), NgxTethysModule, DemoCommonModule],
+    declarations: [AppComponent, AppRootComponent, UserListComponent, UserDetailComponent, DashboardComponent],
+    imports: [BrowserModule, RouterModule.forRoot(routers), NgxTethysModule, DemoCommonModule, NgxPlanetModule],
     providers: [],
     entryComponents: [UserDetailComponent],
     bootstrap: [AppComponent]

examples/app1/src/app/app.routing.ts

@@ -2,8 +2,8 @@ import { UserListComponent } from './user/user-list.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { Route } from '@angular/router';
 import { UserDetailComponent } from './user/detail/user-detail.component';
-import { EmptyComponent } from './empty/empty.component';
 import { AppRootComponent } from './root/root.component';
+import { EmptyComponent } from 'ngx-planet';
 
 export const routers: Route[] = [
     {

examples/app2/src/app/app.module.ts

@@ -7,11 +7,10 @@ import { ProjectListComponent } from './projects/project-list.component';
 import { AppRootComponent } from './root/root.component';
 import { NgxTethysModule } from 'ngx-tethys';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { EmptyComponent } from './empty/empty.component';
 import { ProjectDetailComponent } from './projects/detail/detail.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { PlanetComponentLoader } from 'ngx-planet';
+import { PlanetComponentLoader, EmptyComponent, NgxPlanetModule } from 'ngx-planet';
 import { DemoCommonModule } from '@demo/common';
 
 const routers: Route[] = [
@@ -41,22 +40,16 @@ const routers: Route[] = [
 ];
 
 @NgModule({
-    declarations: [
-        AppComponent,
-        AppRootComponent,
-        ProjectListComponent,
-        DashboardComponent,
-        EmptyComponent,
-        ProjectDetailComponent
-    ],
+    declarations: [AppComponent, AppRootComponent, ProjectListComponent, DashboardComponent, ProjectDetailComponent],
     entryComponents: [AppComponent, ProjectDetailComponent],
     imports: [
         CommonModule,
         FormsModule,
         BrowserModule,
         RouterModule.forRoot(routers),
         NgxTethysModule,
-        DemoCommonModule
+        DemoCommonModule,
+        NgxPlanetModule
     ],
     providers: [],
     bootstrap: [AppComponent]

packages/planet/src/empty/empty.component.spec.ts

@@ -0,0 +1,34 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NgxPlanetModule } from '../module';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { EmptyComponent } from './empty.component';
+
+@Component({
+    selector: 'empty-component-basic',
+    template: '<empty-component></empty-component>'
+})
+class EmptyComponentBasicComponent {}
+
+describe('empty-component', () => {
+    let fixture: ComponentFixture<EmptyComponentBasicComponent>;
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [EmptyComponentBasicComponent],
+            imports: [NgxPlanetModule]
+        });
+        fixture = TestBed.createComponent(EmptyComponentBasicComponent);
+        TestBed.compileComponents();
+    });
+
+    it(`should create empty component`, () => {
+        const emptyComponentDebugElement = fixture.debugElement.query(By.directive(EmptyComponent));
+        expect(emptyComponentDebugElement).toBeTruthy();
+        expect(emptyComponentDebugElement.componentInstance).toBeTruthy();
+    });
+
+    it(`should content is empty in empty component`, () => {
+        const emptyComponentDebugElement = fixture.debugElement.query(By.directive(EmptyComponent));
+        expect((emptyComponentDebugElement.nativeElement as HTMLElement).children.length).toBe(0);
+    });
+});

packages/planet/src/empty/empty.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'empty-component',
+    template: ``
+})
+export class EmptyComponent {}

packages/planet/src/module.ts

@@ -2,14 +2,15 @@ import { NgModule, InjectionToken, ModuleWithProviders } from '@angular/core';
 import { GlobalEventDispatcher } from './global-event-dispatcher';
 import { PlanetApplication } from './planet.class';
 import { HttpClientModule } from '@angular/common/http';
+import { EmptyComponent } from './empty/empty.component';
 
 const PLANET_APPLICATIONS = new InjectionToken<PlanetApplication>('PLANET_APPLICATIONS');
 
 @NgModule({
-    declarations: [],
+    declarations: [EmptyComponent],
     imports: [HttpClientModule],
     providers: [GlobalEventDispatcher],
-    exports: [HttpClientModule]
+    exports: [HttpClientModule, EmptyComponent]
 })
 export class NgxPlanetModule {
     static forRoot(apps: PlanetApplication[]): ModuleWithProviders {

packages/planet/src/public-api.ts

@@ -14,3 +14,4 @@ export * from './assets-loader';
 export { PlanetComponent, PlanetComponentLoader } from './component/planet-component-loader';
 export { PlanetComponentRef } from './component/planet-component-ref';
 export { PlantComponentConfig } from './component/plant-component.config';
+export * from './empty/empty.component';

packages/planet/tslint.json

@@ -1,17 +1,7 @@
 {
   "extends": "../../tslint.json",
   "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "lib",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "lib",
-      "kebab-case"
-    ]
+    "directive-selector": [true, "attribute", "lib", "camelCase"],
+    "component-selector": [true, "element", "empty", "kebab-case"]
   }
 }