导入组件后的Angular4空白屏幕

时间：2017-12-14 18:28:30

标签： javascript angular jhipster

我遇到以下问题： 我已经生成了一个JHipster应用程序，现在需要在另一个组件中导入一个组件，如本教程中所示：

https://coursetro.com/courses/12/Learn-Angular-4-from-Scratch/lessons/2

我有一个TeamMember.component 

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) => {
            this.teams = res.json;
        },
        (res: ResponseWrapper) => this.onError(res.json)
    );
}
ngOnInit() {
    this.loadAll();
    this.principal.identity().then((account) => {
        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) => this.loadAll());
}

private onError(error) {
    this.jhiAlertService.error(error.message, null, null);
}
}

和Team.component，我想导入团队成员。

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 {}

我的问题如下：

如果我按照教程中的描述执行此操作，并且如我的代码段所示，我只会获得此应用的空白页面。我没有收到错误，只是整个应用的白页。

有没有人经历过这个以及我的一些想法？我现在坐了一整天，并且不知道我能用这个做些什么。

提前感谢您提出的所有建议！

卡斯滕

编辑：

如果我分享我的package.json可能会有所帮助：

＆＃13;
＆＃13; 
{
"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": ">=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 && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && 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"
}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这听起来很疯狂，但尝试导入： templateUrl：＆＃39; ./ team.component.html＆＃39; 没有＆＃39; ./' templateUrl：＆＃39; team.component.html＆＃39; 并且还添加了 选择器上方的 moduleId：module.id 。

相关问题
最新问题