Angular Component not loaded, when exported from other module

[grendizeras]

In my Angular Native script app I have top level AppModule. I have sub-module called SharedModule and another sub-module UserModule. In SharedModule I declared and exported SearchComponent, that should be used across all modules in app:

@NgModule({
  declarations: [
  SearchComponent,

  ],
  exports:[SearchComponent],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class SharedModule { }

@Component({
  moduleId: module.id,
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

In AppModule I import that shared module:

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        AppRoutingModule,
        SharedModule,
        UserModule
    ],   
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

In app routing I have lazy loading:

const routes: Routes = [
    { path: "", redirectTo: "/user", pathMatch: "full" },
    { path: "home", loadChildren: "./home/home.module#HomeModule" },
    { path: "user", loadChildren: "./user/user.module#UserModule" }

];

So when my application starts, it goes directly to user module's UserComponent (UserModule's routing specifies this component).

UserComponent's html:

<StackLayout class="nav">
  <app-search height=100></app-search>
  <Button text="hello"></Button>
  <TextField text="hi"></TextField>
  <app-profile></app-profile>
</StackLayout>

User component itself:

@Component({
  moduleId:module.id,
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],

})
export class UserComponent implements OnInit {

  constructor() { }

  ngOnInit() { console.log("USER COMPONNEEEEENT")}

}

So UserComponent doesn't load. OnInit isn't fired and it's not visible.
When I try the same for ProfileComponent in the same module, this code works.

I use tns version 4.1.0. This behaviour occurs on Android phone (I don't know about IOS).
These are my package.json configurations:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.betobe",
    "tns-android": {
      "version": "4.1.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~6.0.0",
    "@angular/common": "~6.0.0",
    "@angular/compiler": "~6.0.0",
    "@angular/core": "~6.0.0",
    "@angular/forms": "~6.0.0",
    "@angular/http": "~6.0.0",
    "@angular/platform-browser": "~6.0.0",
    "@angular/platform-browser-dynamic": "~6.0.0",
    "@angular/router": "~6.0.0",
    "nativescript-angular": "~6.0.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "tns-core-modules": "4.1.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular-devkit/core": "~0.6.3",
    "@angular/cli": "^6.0.7",
    "@angular/compiler-cli": "~6.0.0",
    "@ngtools/webpack": "~6.0.3",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.5.1",
    "css-loader": "~0.28.11",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^0.4.2",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "~0.12.0",
    "nativescript-worker-loader": "~0.9.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.3.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "webpack": "~4.6.0",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0"
  }
}

PLEASE HELP!

[NickIliev]

@grendizeras declare and import the shared module in the lazily loaded modules

For example

shared/shared.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { SharedComponent } from "./shared.component";

@NgModule({
    imports: [
        NativeScriptCommonModule,
    ],
    exports: [SharedComponent],
    declarations: [SharedComponent]
})
export class SharedModule { }

Lazily loaded module

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { InfoComponent } from "./info.component";

import { SharedModule } from "../../shared/shared.module";

export const routerConfig = [
    {
        path: "",
        component: InfoComponent
    }
];

@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forChild(routerConfig),
        SharedModule
    ],
    declarations: [InfoComponent],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class InfoModule {
    constructor() { }
}

Full demo of the above can be found here

[javierarocena]

Hi @NickIliev, your demo doesn't work on playground...

I can't import shared angular component modules.

Any Idea? :(