title: Angular4 blank screen after importing component
body: <p>I am facing the following problem: 
  I have generated a JHipster Application and now need to import a component inside another component like shown in this tutorial:</p>
  
  <p><a href="https://coursetro.com/courses/12/Learn-Angular-4-from-Scratch/lessons/2" rel="nofollow noreferrer">https://coursetro.com/courses/12/Learn-Angular-4-from-Scratch/lessons/2</a></p>
  
  <p>I have a TeamMember.component</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  import { Subscription } from 'rxjs/Rx';
  import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
  
  import { Team } from './team.model';
  import { TeamService } from './team.service';
  import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../../shared';
  
  @Component({
  selector: 'jhi-team',
  templateUrl: './team.component.html'
  })
  export class TeamComponent implements OnInit, OnDestroy {
  teams: Team[];
  currentAccount: any;
  eventSubscriber: Subscription;
  
  constructor(
      private teamService: TeamService,
      private jhiAlertService: JhiAlertService,
      private eventManager: JhiEventManager,
      private principal: Principal
  ) {
  }
  
  loadAll() {
      this.teamService.query().subscribe(
          (res: ResponseWrapper) =&gt; {
              this.teams = res.json;
          },
          (res: ResponseWrapper) =&gt; this.onError(res.json)
      );
  }
  ngOnInit() {
      this.loadAll();
      this.principal.identity().then((account) =&gt; {
          this.currentAccount = account;
      });
      this.registerChangeInTeams();
      this.teamService.query();
  }
  
  ngOnDestroy() {
      this.eventManager.destroy(this.eventSubscriber);
  }
  
  trackId(index: number, item: Team) {
      return item.id;
  }
  registerChangeInTeams() {
      this.eventSubscriber = this.eventManager.subscribe('teamListModification', (response) =&gt; this.loadAll());
  }
  
  private onError(error) {
      this.jhiAlertService.error(error.message, null, null);
  }
  }
  </code></pre>
  
  <p>and a Team.component, where I want to import the teammembers.</p>
  
  <pre><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { EntrestratsSharedModule } from '../../shared';
  import {ButtonModule} from 'primeng/primeng';
  import {DataListModule} from 'primeng/primeng';
  import {TeamMemberComponent} from '../team-member/team-member.component';
  
  import {
  TeamService,
  TeamPopupService,
  TeamComponent,
  TeamDetailComponent,
  TeamDialogComponent,
  TeamPopupComponent,
  TeamDeletePopupComponent,
  TeamDeleteDialogComponent,
  teamRoute,
  teamPopupRoute,
  } from './';
  
  const ENTITY_STATES = [
  ...teamRoute,
  ...teamPopupRoute,
  ];
  
  @NgModule({
  imports: [
      EntrestratsSharedModule,
      ButtonModule,
      DataListModule,
      RouterModule.forRoot(ENTITY_STATES, { useHash: true }),
  ],
  declarations: [
      TeamComponent,
      TeamMemberComponent,
      TeamDetailComponent,
      TeamDialogComponent,
      TeamDeleteDialogComponent,
      TeamPopupComponent,
      TeamDeletePopupComponent,
  ],
  entryComponents: [
      TeamComponent,
      TeamDialogComponent,
      TeamPopupComponent,
      TeamDeleteDialogComponent,
      TeamDeletePopupComponent,
  ],
  providers: [
      TeamService,
      TeamPopupService,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class EntrestratsTeamModule {}
  </code></pre>
  
  <p>My Problem is the following: </p>
  
  <p>If I do this as described in the tutorial and as shown in my code snippets, I only get a blank page for this app. I don't get an error, just a white page for the whole app.</p>
  
  <p>Has anyone experienced this and some ideas for me? I sit on this the whole day now and don't have an idea what I could do with this.</p>
  
  <p>Thank you in advance for all suggestions!</p>
  
  <p>Karsten</p>
  
  <p>EDIT:</p>
  
  <p>Maybe it helps if i share my package.json:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
  "name": "entrestrats",
  "version": "0.0.1",
  "description": "Description for entrestrats",
  "private": true,
  "license": "UNLICENSED",
  "cacheDirectories": [
  "node_modules"
  ],
  "dependencies": {
  "@angular-devkit/schematics": "0.0.34",
  "@angular/animations": "4.3.2",
  "@angular/common": "4.3.2",
  "@angular/compiler": "4.3.2",
  "@angular/core": "4.3.2",
  "@angular/forms": "4.3.2",
  "@angular/http": "4.3.2",
  "@angular/platform-browser": "4.3.2",
  "@angular/platform-browser-dynamic": "4.3.2",
  "@angular/router": "4.3.2",
  "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
  "bootstrap": "4.0.0-beta",
  "core-js": "2.4.1",
  "font-awesome": "4.7.0",
  "jquery": "3.2.1",
  "ng-jhipster": "0.2.12",
  "ng2-webstorage": "1.8.0",
  "ngx-cookie": "1.0.0",
  "ngx-infinite-scroll": "0.5.1",
  "popper.js": "1.11.0",
  "primeng": "^4.3.0",
  "reflect-metadata": "0.1.10",
  "rxjs": "5.4.2",
  "swagger-ui": "2.2.10",
  "tether": "1.4.0",
  "zone.js": "0.8.16"
   },
  "devDependencies": {
  "@angular/cli": "1.4.2",
  "@angular/compiler-cli": "4.3.2",
  "@types/jasmine": "2.5.53",
  "@types/node": "8.0.18",
  "angular2-template-loader": "0.6.2",
  "awesome-typescript-loader": "3.2.2",
  "browser-sync": "2.18.13",
  "browser-sync-webpack-plugin": "1.2.0",
  "codelyzer": "3.1.2",
  "copy-webpack-plugin": "4.0.1",
  "css-loader": "0.28.4",
  "exports-loader": "0.6.4",
  "extract-text-webpack-plugin": "3.0.0",
  "file-loader": "0.11.2",
  "generator-jhipster": "4.10.2",
  "html-loader": "0.5.0",
  "html-webpack-plugin": "2.30.1",
  "jasmine-core": "2.7.0",
  "karma": "1.7.1",
  "karma-chrome-launcher": "2.2.0",
  "karma-coverage": "1.1.1",
  "karma-intl-shim": "1.0.3",
  "karma-jasmine": "1.1.0",
  "karma-junit-reporter": "1.2.0",
  "karma-notify-reporter": "1.0.1",
  "karma-remap-istanbul": "0.6.0",
  "karma-sourcemap-loader": "0.3.7",
  "karma-webpack": "2.0.4",
  "merge-jsons-webpack-plugin": "1.0.11",
  "ngc-webpack": "3.2.2",
  "node-sass": "4.5.3",
  "postcss-loader": "2.0.6",
  "proxy-middleware": "0.15.0",
  "puppeteer": "0.10.2",
  "rimraf": "2.6.1",
  "sass-loader": "6.0.6",
  "sourcemap-istanbul-instrumenter-loader": "0.2.0",
  "string-replace-webpack-plugin": "0.1.3",
  "style-loader": "0.18.2",
  "to-string-loader": "1.1.5",
  "tslint": "5.5.0",
  "tslint-loader": "3.5.3",
  "typescript": "2.5.2",
  "uglifyjs-webpack-plugin": "1.0.0-beta.2",
  "web-app-manifest-loader": "0.1.1",
  "webpack": "3.6.0",
  "webpack-dev-server": "2.8.2",
  "webpack-merge": "4.1.0",
  "webpack-notifier": "1.5.0",
  "webpack-visualizer-plugin": "0.1.11",
  "write-file-webpack-plugin": "4.1.0",
  "xml2js": "0.4.17"
  },
  "engines": {
  "node": "&gt;=6.9.0"
  },
  "scripts": {
  "lint": "tslint --type-check --project './tsconfig.json' -e 'node_modules/**'",
  "lint:fix": "yarn run lint -- --fix",
  "ngc": "ngc -p tsconfig-aot.json",
  "cleanup": "rimraf target/{aot,www}",
  "clean-www": "rimraf target//www/app/{src,target/}",
  "start": "yarn run webpack:dev",
  "serve": "yarn run start",
  "build": "yarn run webpack:prod",
  "test": "karma start src/test/javascript/karma.conf.js",
  "test:watch": "yarn test -- --watch",
  "webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base",
  "webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile",
  "webpack:build": "yarn run cleanup &amp;&amp; yarn run webpack:build:main",
  "webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
  "webpack:prod": "yarn run cleanup &amp;&amp; yarn run webpack:prod:main &amp;&amp; yarn run clean-www",
  "webpack:test": "yarn run test",
  "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
  "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  }</code></pre>
  </div>
  </div>
  </p>