Unable to generate entity named 'Subscription' in Angular 4 app

jCube1980 commented 7 years ago

Overview of the issue

Unable to generate entity named 'Subscription' in Angular 4 app.

Motivation for or Use Case

Subscription is a common entity in many verticals. Being unable to generate a 'Subscription' could be a show-stopper in some projects.

Reproduce the error

Create an Angular4 app with a basic entity named Subscription. Running yarn install fails with the following error.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:3:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:6:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:15:5 TS2687: All declarations of 'subscription' must have identical modifiers.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:16:13 TS2300: Duplicate identifier 'subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:16:13 TS2403: Subsequent variable declarations must have the same type. Variable 'subscription' must be of type 'Subscription', but here has type 'any'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:16:13 TS2687: All declarations of 'subscription' must have identical modifiers.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:35:13 TS90010: Type 'Subscription' is not assignable to type 'Subscription'. Two different types with this name exist, but they are unrelated.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:35:13 TS90010: Type 'Subscription' is not assignable to type 'Subscription'. Two different types with this name exist, but they are unrelated. Property 'closed' is missing in type 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:48:134 TS2339: Property 'id' does not exist on type 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription.component.ts:4:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription.component.ts:7:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription.component.ts:50:21

Related issues

Suggest a Fix

JHipster Version(s)

subscription-test@0.0.0 E:\projects\jhipster\subscription-test
+-- UNMET PEER DEPENDENCY @angular/common@4.0.0
+-- UNMET PEER DEPENDENCY @angular/core@4.0.0
`-- generator-jhipster@4.3.0

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

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp"
    },
    "jhipsterVersion": "4.3.0",
    "baseName": "SubscriptionTest",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "session",
    "hibernateCache": "no",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "rememberMeKey": "0c75eb6a7a7e887ae925324073bfc6135875db74",
    "clientFramework": "angular2",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": false
  }
}

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

Subscription.json

{
    "fluentMethods": true,
    "relationships": [],
    "fields": [
        {
            "fieldName": "name",
            "fieldType": "String"
        }
    ],
    "changelogDate": "20170423051400",
    "dto": "mapstruct",
    "service": "serviceImpl",
    "entityTableName": "subscription",
    "pagination": "no"
}

Browsers and Operating System

java version "1.8.0_121" Java(TM) SE Runtime Environment (build 1.8.0_121-b13) Java HotSpot(TM) 64-Bit Server VM (build 25.121-b13, mixed mode)

git version 2.9.0.windows.1

node: v6.10.0

npm: 3.10.10

yeoman: 1.8.5

yarn: 0.23.2

[X] Checking this box is mandatory (this is just to show you read everything)

deepu105 commented 7 years ago

I think its conflicting with the Subscription object from RxJS

On Mon, 24 Apr 2017, 4:48 pm Joseph Justus, notifications@github.com wrote:

Overview of the issue

Unable to generate entity named 'Subscription' in Angular 4 app. Motivation for or Use Case

Subscription is a common entity in many verticals. Being unable to generate a 'Subscription' could be a show-stopper in some projects. Reproduce the error

Create an Angular4 app with a basic entity named Subscription. Running yarn install fails with the following error.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:3:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:6:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:15:5 TS2687: All declarations of 'subscription' must have identical modifiers.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:16:13 TS2300: Duplicate identifier 'subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:16:13 TS2403: Subsequent variable declarations must have the same type. Variable 'subscription' must be of type 'Subscription', but here has type 'any'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:16:13 TS2687: All declarations of 'subscription' must have identical modifiers.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:35:13 TS90010: Type 'Subscription' is not assignable to type 'Subscription'. Two different types with this name exist, but they are unrelated.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:35:13 TS90010: Type 'Subscription' is not assignable to type 'Subscription'. Two different types with this name exist, but they are unrelated. Property 'closed' is missing in type 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription-detail.component.ts:48:134 TS2339: Property 'id' does not exist on type 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription.component.ts:4:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription.component.ts:7:10 TS2300: Duplicate identifier 'Subscription'.

ERROR in [at-loader] ./src/main/webapp/app/entities/subscription/subscription.component.ts:50:21 Related issues Suggest a Fix JHipster Version(s)

subscription-test@0.0.0 E:\projects\jhipster\subscription-test +-- UNMET PEER DEPENDENCY @angular/common@4.0.0 +-- UNMET PEER DEPENDENCY @angular/core@4.0.0 `-- generator-jhipster@4.3.0

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

{ "generator-jhipster": { "promptValues": { "packageName": "com.mycompany.myapp" }, "jhipsterVersion": "4.3.0", "baseName": "SubscriptionTest", "packageName": "com.mycompany.myapp", "packageFolder": "com/mycompany/myapp", "serverPort": "8080", "authenticationType": "session", "hibernateCache": "no", "clusteredHttpSession": false, "websocket": false, "databaseType": "sql", "devDatabaseType": "h2Memory", "prodDatabaseType": "postgresql", "searchEngine": false, "messageBroker": false, "serviceDiscoveryType": false, "buildTool": "maven", "enableSocialSignIn": false, "rememberMeKey": "0c75eb6a7a7e887ae925324073bfc6135875db74", "clientFramework": "angular2", "useSass": false, "clientPackageManager": "yarn", "applicationType": "monolith", "testFrameworks": [], "jhiPrefix": "jhi", "enableTranslation": false }}

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

Subscription.json

{ "fluentMethods": true, "relationships": [], "fields": [ { "fieldName": "name", "fieldType": "String" } ], "changelogDate": "20170423051400", "dto": "mapstruct", "service": "serviceImpl", "entityTableName": "subscription", "pagination": "no"}

Browsers and Operating System

java version "1.8.0_121" Java(TM) SE Runtime Environment (build 1.8.0_121-b13) Java HotSpot(TM) 64-Bit Server VM (build 25.121-b13, mixed mode)

git version 2.9.0.windows.1

node: v6.10.0

npm: 3.10.10

yeoman: 1.8.5

yarn: 0.23.2

Checking this box is mandatory (this is just to show you read everything)

— 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/5652, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlFy_7Z4RgmK4fWXqEZ8kT08W6c7W8ks5rzLY3gaJpZM4NGRQh .

jdubois commented 7 years ago

Yes and I don't think we can solve this easily -> let's just add it in our reserved keywords list

gmarziou commented 7 years ago

There are 2 conflicts here:

type name conflict
instance variable names

First one could be solved by aliasing imported Subscription from RxJs:

import { Subscription as RxSubscription } from 'rxjs/Rx';

Second one means renaming variables:

    subscription: Subscription;
    private rxSubscription: any;
    private eventSubscriber: RxSubscription;

By the way, the second variable should be typed RxSubscription rather than any

gmarziou commented 7 years ago

I made some tests, we have same issue with entities named as Component, Response, Observable, Injectable, Router and potentially with many other types that pollute global namespace that we may already use or will use.

So this is the case for Angular types and RxJs but this is also the case for JHipster types like Alert, why don't we use Jhi prefix here? Like NG Bootstrap does with Ngb.

jdubois commented 7 years ago

Yes we should prefix them with "Jhi"

deepu105 commented 7 years ago

we need to add angular reserved words now :sob:

deepu105 commented 7 years ago

anyway this is common sense and no other way to do even if you are coding it by hand

deepu105 commented 7 years ago

fixed via https://github.com/jhipster/generator-jhipster/commit/ed2742e908bcf37bef74b441b9aba9f31b801334, https://github.com/jhipster/generator-jhipster/commit/13b62712a929c0a50a1aa82242d6a52d752e6f23, https://github.com/jhipster/generator-jhipster/commit/3df177eb2a4eefb27de39dafc96d869414314160, https://github.com/jhipster/generator-jhipster/commit/3eb2a022a5515e52ed701fcd027cc454b044d48f, https://github.com/jhipster/ng-jhipster/commit/2acbfc481632501d8fab946849dfd537537ac219, https://github.com/jhipster/jhipster-core/commit/90ae6fb3001b6a80692a47b443d91374cef3d59d

nnpatel4u commented 6 years ago

I believe just prefixing keyword in file contents is not sufficient. It needs to have prefix in filename as well. For example, when I tried to generate entity with name alert (Jhipster v4.11.1), the webpack builds properly but unable to load in browser. Following error was observed -

Uncaught Error: Template parse errors: More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: JhiAlertComponent,AlertComponent ("pan> Create new Alert [ERROR ->]

<div class="table-responsive" *ngIf="alerts"> "): ng:///MyAlertModule/AlertComponent.html@0:335 at syntaxError (compiler.es5.js?524d:1690) at TemplateParser.parse (compiler.es5.js?524d:12814) at JitCompiler._compileTemplate (compiler.es5.js?524d:26966) at eval (compiler.es5.js?524d:26886) at Set.forEach () at JitCompiler._compileComponents (compiler.es5.js?524d:26886) at eval (compiler.es5.js?524d:26773) at Object.then (compiler.es5.js?524d:1679) at JitCompiler._compileModuleAndComponents (compiler.es5.js?524d:26772) at JitCompiler.compileModuleAsync (compiler.es5.js?524d:26701) syntaxError @ compiler.es5.js?524d:1690 TemplateParser.parse @ compiler.es5.js?524d:12814 JitCompiler._compileTemplate @ compiler.es5.js?524d:26966 (anonymous) @ compiler.es5.js?524d:26886 JitCompiler._compileComponents @ compiler.es5.js?524d:26886 (anonymous) @ compiler.es5.js?524d:26773 then @ compiler.es5.js?524d:1679 JitCompiler.compileModuleAndComponents @ compiler.es5.js?524d:26772 JitCompiler.compileModuleAsync @ compiler.es5.js?524d:26701 PlatformRef.bootstrapModuleWithZone @ core.es5.js?de3d:4536 PlatformRef.bootstrapModule @ core.es5.js?de3d:4522 (anonymous) @ app.main.ts?3881:11 ./src/main/webapp/app/app.main.ts @ main.bundle.js:579 webpack_require @ manifest.bundle.js:712 fn @ manifest.bundle.js:117 2 @ main.bundle.js:4759 webpack_require @ manifest.bundle.js:712 webpackJsonpCallback @ manifest.bundle.js:26 (anonymous) @ main.bundle.js:1

Can this be resolvable.

ruddell commented 6 years ago

@nnpatel4u This is an edge case affecting an Alert entity. It happens because your entity component's selector is jhi-alert and we also generate a jhi-alert component. You can workaround this by changing the selector of your component (alert.component.ts). For example:

From:

@Component({
    selector: 'jhi-alert',

To:

@Component({
    selector: 'jhi-alert-entity',

To fix this in the generator, we could either add Alert to restricted words or change the jhi-alert component selector to something else

nnpatel4u commented 6 years ago

@ruddell Thanks. That worked for me.

jhipster / generator-jhipster