Generator-jhipster: Client bundle not rebuilt after entity generation

[mraible]

• Please follow the issue template below for bug reports and feature requests.
• Tickets opened without any of these informations will be closed without any explanation.

Overview of the issue

I tried to create my blog demo from using JHipster 4.0.0 and found that no site is rendered on http://localhost:8080 after generating entities. yarn start still works and I can see my app on http://localhost:9000.

Motivation for or Use Case

This worked when using npm link from master a few weeks ago.

Reproduce the error

Create a new application with the following settings.

Here's my .yo-json.rc:

{
  "generator-jhipster": {
    "jhipsterVersion": "4.0.0",
    "baseName": "blog",
    "packageName": "org.jhipster",
    "packageFolder": "org/jhipster",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "3725191ac098f3a1425059b2808301ab7c546e39",
    "useSass": true,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "clientFramework": "angular2",
    "testFrameworks": [
      "gatling",
      "protractor"
    ],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "es"
    ]
  }
}

Create an jhipster-jdl.jh with the following contents.

entity Blog {
    name String required minlength(3),
    handle String required minlength(2)
}

entity Entry {
    title String required,
    content TextBlob required,
    date ZonedDateTime required
}

entity Tag {
    name String required minlength(2)
}

relationship ManyToOne {
    Blog{user(login)} to User,
    Entry{blog(name)} to Blog
}

relationship ManyToMany {
    Entry{tag(name)} to Tag{entry}
}

paginate Entry, Tag with infinite-scroll

Generate entities using yo jhipster:import-jdl jhipster-jdl.jh.

I had Maven running when I did this and noticed the menu was all wonky and didn't have messages translated. I restarted and localhost:8080 results in a blank page. I ran mvn clean and restarted again, but it's still blank with no errors in my console. Running yarn start works, but there's still no app on localhost:8080.

Related issues

I noticed the navbar.component.html still has old UI-Router attributes.

<ul class="dropdown-menu" ngbDropdownMenu>
    <li uiSrefActive="active">
        <a class="dropdown-item" routerLink="blog" (click)="collapseNavbar()">
            <i class="fa fa-fw fa-asterisk" aria-hidden="true"></i>
            <span jhiTranslate="global.menu.entities.blog">Blog</span>
        </a>
    </li>
    <li uiSrefActive="active">
        <a class="dropdown-item" routerLink="entry" (click)="collapseNavbar()">
            <i class="fa fa-fw fa-asterisk" aria-hidden="true"></i>
            <span jhiTranslate="global.menu.entities.entry">Entry</span>
        </a>
    </li>
    <li uiSrefActive="active">
        <a class="dropdown-item" routerLink="tag" (click)="collapseNavbar()">
            <i class="fa fa-fw fa-asterisk" aria-hidden="true"></i>
            <span jhiTranslate="global.menu.entities.tag">Tag</span>
        </a>
    </li>
    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
</ul>

Suggest a Fix

JHipster Version(s)

4.0.0

JHipster configuration

Welcome to the JHipster Information Sub-Generator

##### **JHipster Version(s)**

[email protected] /Users/mraible/dev/blog
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└── [email protected]

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

```yaml
{
  "generator-jhipster": {
    "jhipsterVersion": "4.0.0",
    "baseName": "blog",
    "packageName": "org.jhipster",
    "packageFolder": "org/jhipster",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "3725191ac098f3a1425059b2808301ab7c546e39",
    "useSass": true,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "clientFramework": "angular2",
    "testFrameworks": [
      "gatling",
      "protractor"
    ],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "es"
    ]
  }
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

Blog.json

{
    "fluentMethods": true,
    "relationships": [
        {
            "relationshipType": "many-to-one",
            "relationshipName": "user",
            "otherEntityName": "user",
            "otherEntityField": "login"
        }
    ],
    "fields": [
        {
            "fieldName": "name",
            "fieldType": "String",
            "fieldValidateRules": [
                "required",
                "minlength"
            ],
            "fieldValidateRulesMinlength": 3
        },
        {
            "fieldName": "handle",
            "fieldType": "String",
            "fieldValidateRules": [
                "required",
                "minlength"
            ],
            "fieldValidateRulesMinlength": 2
        }
    ],
    "changelogDate": "20170202135634",
    "entityTableName": "blog",
    "dto": "no",
    "pagination": "no",
    "service": "no"
}

Entry.json

{
    "fluentMethods": true,
    "relationships": [
        {
            "relationshipType": "many-to-one",
            "relationshipName": "blog",
            "otherEntityName": "blog",
            "otherEntityField": "name"
        },
        {
            "relationshipType": "many-to-many",
            "otherEntityRelationshipName": "entry",
            "relationshipName": "tag",
            "otherEntityName": "tag",
            "otherEntityField": "name",
            "ownerSide": true
        }
    ],
    "fields": [
        {
            "fieldName": "title",
            "fieldType": "String",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "content",
            "fieldType": "byte[]",
            "fieldTypeBlobContent": "text",
            "fieldValidateRules": [
                "required"
            ]
        },
        {
            "fieldName": "date",
            "fieldType": "ZonedDateTime",
            "fieldValidateRules": [
                "required"
            ]
        }
    ],
    "changelogDate": "20170202135635",
    "entityTableName": "entry",
    "dto": "no",
    "pagination": "infinite-scroll",
    "service": "no"
}

Tag.json

{
    "fluentMethods": true,
    "relationships": [
        {
            "relationshipType": "many-to-many",
            "relationshipName": "entry",
            "otherEntityName": "entry",
            "ownerSide": false,
            "otherEntityRelationshipName": "tag"
        }
    ],
    "fields": [
        {
            "fieldName": "name",
            "fieldType": "String",
            "fieldValidateRules": [
                "required",
                "minlength"
            ],
            "fieldValidateRulesMinlength": 2
        }
    ],
    "changelogDate": "20170202135636",
    "entityTableName": "tag",
    "dto": "no",
    "pagination": "infinite-scroll",
    "service": "no"
}

Browsers and Operating System

java version "1.8.0_112"
Java(TM) SE Runtime Environment (build 1.8.0_112-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.112-b16, mixed mode)

git version 2.10.2

node: v6.9.1

npm: 3.10.8

bower: 1.8.0

gulp:
[07:11:37] CLI version 1.2.2

yeoman: 1.8.5

yarn: 0.18.1

Docker version 1.13.0, build 49bf474

docker-compose version 1.10.0, build 4bd6f1a
```

[jdubois]

@mraible don't hesitate to chat with me, you wrote the book, you deserve more help than just the ticket system :-)

I'm having a look ASAP, but you could try:

• Delete your node_modules folder to be sure you don't have some old JHipster link there
• Delete your src folder -> we refactored very recently the routes, so the names have changed. So if you regenerate on top of an older project, you might have different files for the same route, and that should be pretty bad!!

[pascalgrimaud]

The 1st time you generated the project, I can see some folder inside target/www
Every time you launch mvn clean will delete target, so there is no www
I think you have to run yarn run webpack:build, and after, mvn

I'm learning the new workflow with Angular2, am I correct ?

[mraible]

I generated from scratch and I believe this issue was caused by the fact that I had Maven running when I generated the entities, then I ran ./mvnw in another window after generating them. I tried again and this time, localhost:8080 loads, but there's no items in the menu.

I tried yarn start and that version has menu items. After doing this, I reloaded my localhost:8080 tab and the menu items show.

I think you're right @pascalgrimaud, you can't just run ./mvnw, there's another step that needs to happen. I'll try again and see if I can figure out what it is.

[jdubois]

Yes you should have:

• mvn running for the backend
• yarn start running for the frontend

I documented this here: https://jhipster.github.io/development/

[jdubois]

OK I got it working on my laptop without any issue, this is either a config error (my first comment) or the commands not running (my second comment)

[mraible]

@jdubois OK, but this is different from JHipster 3.x. I can document accordingly. With JHipster 3, gulp was run after the entity generation. With JHipster 4, it seems like npm run webpack:build:dev should be run after entity generation. If you do this, ./mvnw works as expected.

[jdubois]

Yes and no :-)

• We do run yarn start (== Webpack) after project generation, that's why the initial project works
• We don't run it after entity generation -> the issue is that people might already have it running (I keep it running all the time), so we can't run it at that moment. So in that case you need to run it manually. But anyway, if you are developing, this should always be running.

[deepu105]

If you do a clean then you need to pass the the webpack profile switch in
order to rebuild everything (I need to update this in docs)
for maven/gradle run

• ./mvnw -Pdev,
  ​webpack
  -
• ./gradlew -P
  ​dev
  -P
  ​
  webpack

Thanks & Regards,
Deepu

On Thu, Feb 2, 2017 at 3:24 PM, Julien Dubois [e-mail]
wrote:

OK I got it working on my laptop without any issue, this is either a
config error (my first comment) or the commands not running (my second
comment)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/5062#issuecomment-276971078,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlFxm6hAOLwYvyUhhmyYGK-Hqexd8pks5rYecYgaJpZM4L1J_u
.

[deepu105]

​If you have webpack dev server running with yarn start then it should
compile the new files automatically when created. I'll test this tonight
and fix if there is any issue. I'll also update the docs with the new dev
workflow​

Thanks & Regards,
Deepu

On Thu, Feb 2, 2017 at 3:28 PM, Matt Raible [e-mail]
wrote:

@jdubois https://github.com/jdubois OK, but this is different from
JHipster 3.x. I can document accordingly. With JHipster 3, gulp was run
after the entity generation. With JHipster 4, it seems like npm run
webpack:build:dev should be run after entity generation. If you do this,
./mvnw works as expected.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/5062#issuecomment-276971999,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF5lMO1cN-HpRkpIgbKSFPRvhKNItks5rYef4gaJpZM4L1J_u
.

[deepu105]

For angular 2 yarn start must be running or you need to run yarn run webpack:build:dev manually as there is no point in running them after
generation. Its like having to run mvnw if you want to run the with
typescript you have to have both process running. we should just document
this and people need to follow this there is no way around it.

Thanks & Regards,
Deepu

On Thu, Feb 2, 2017 at 3:31 PM, Julien Dubois [e-mail]
wrote:

Yes and no :-)

• We do run yarn start (== Webpack) after project generation, that's
  why the initial project works
• We don't run it after entity generation -> the issue is that people
  might already have it running (I keep it running all the time), so we can't
  run it at that moment. So in that case you need to run it manually. But
  anyway, if you are developing, this should always be running.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/5062#issuecomment-276972796,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlFwOvWB-2FJY0h_Qv59PRarf0heNHks5rYei0gaJpZM4L1J_u
.

[mraible]

This makes sense now that I know about it. We should just make sure and document this since using ./mvnw with JHipster 3 would automatically rebuild everything w/o an additional profile.

I found another issue - the "Administration" menu doesn't disappear for non-admin users. It just doesn't render - so there's a large gap in the menu.

[jdubois]

Oh this might be linked to the latest PR from @gmarziou with the "invisible" class.... Could you do a specific ticket for that?

[mraible]

@jdubois Done at https://github.com/jhipster/generator-jhipster/issues/5063

[deepu105]

closing this as there is nothing to do here except improving docs if possible

[mraible]

I think we can do better than improve the docs. With AngularJS, the entity generator runs gulp after it generates the entities, both for jhipster:entity[1] and jhipster:import-jdl[2].

We've seen a LOT of issues related to this since we released 4.x. Why can't the entity/import-jdl generators just run webpack:build after generation like we do with AngularJS?

1. https://github.com/jhipster/generator-jhipster/blob/master/generators/entity/index.js#L641
2. https://github.com/jhipster/generator-jhipster/blob/master/generators/import-jdl/index.js#L85

[jdubois]

It could, but the issue is that it's supposed to be already running, as you should have yarn start (or npm start) running if you follow the doc. And we can't start it twice, or we would probably have some wrong result.

[jdubois]

The best we could do is add even more documentation.
Then I don't understand what people do, if yarn start doesn't work, then nothing works. You can't work with Angular 2 without it.

[mraible]

And we can't start it twice, or we would probably have some wrong result.

Correct, but we can build npm run webpack:build:dev which is what we did with AngularJS and gulp.

With JHipster 3.x, if you generated entities, the UI was rebuilt for you after generation. With JHipster 4.x, it is not. Yes, if you're running yarn start, it will be - but in 3.x this was not a requirement. We've changed the behavior and made it difficult for people familiar with the library to use 4.x.

I think it makes sense to fix this since even I had an issue with it initially. I'd be happy to create a PR.

[jdubois]

For JHipster 3 we didn't have to rebuild anything, as it was all JavaScript. With TypeScript it's different, you need to compile the application to have something running.
I don't have a better solution than adding documentation - and anyway you will need to get used to yarn start if you want to develop. But if you find something better, yes please do a PR.

[mraible]

We didn't have to build anything, but we did have to inject the new JS files into index.html, which is _similar_ to building everything.

[jdubois]

Oh yes you are right. But we didn't have another server running at the same time - maybe you could try to run it, I have no idea if that would fail or not.

[mraible]

OK, I'll create a PR and do some tests. Reopening this issue so I can target it with the PR.