Angular-cli: The generated app.component.ts title should default to the project name, not the prefix.

[DeborahK]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Area

- [ ] devkit
- [x ] schematics

Versions

node v8.10.0
npm 6.0.1
Windows

Repro steps

ng new AppWithPrefix --prefix awp

This generates an app.component.ts file with the title property set to awp (the prefix). Should it instead set the title to AppWithPrefix (the application name)?

As it is, the tests fail when run: ng test

The log given by the failure

Desired functionality

Since the title is used to display "Welcome to xxx!", it seems that "Welcome To AppWithPrefix!" would be better than "Welcome to awp!".

Also, the generated tests fail: "Expected ' Welcome to awp! ' to contain 'Welcome to AppWithPrefix!'."

So if the title does remain the prefix, the generated app.component.spec.ts needs to be changed:

expect(compiled.querySelector('h1').textContent).toContain('Welcome to AppWithPrefix!');

Mention any other details that might be useful

[santoshugale]

Hi,
I tried to reproduce the issue.
When you create a project using ng new project app.component.ts title will be app which is default prefix.
now if you provide the prefix parameter the title will be prefix value.
Now suppose we have created project using cli ng new project --prefix awp
Angular cli uses prefix value to set the selector value for component generation like if we create component using flowing command ng generate component abcd, then component selector will be **awp-abcd

[DeborahK]

Did you try to run the tests?

[Brocco]

Can you please post which versions are reported for this application?

This would be the output from running ng --version.

Thanks!

[psmyrdek]

If I can add something - it happens on Angular CLI: 6.0.8 - command I used to bootstrap project was simple ng new my-custom-app. There was no errors during initialization, project name is included in app.component.spec.ts, but app.component.ts is being created with default title app.

Compare title check from 2nd test, to app property, to 3rd test.

[santoshugale]

@DeborahK

Yes, I tried running the test and tests are failing

Created a project with ng new AppWithPrefix --prefix awp

Output of the test

Chrome 66.0.3359 (Windows 10.0.0): Executed 2 of 3 SUCCESS (0 secs / 0.131 secs)
Chrome 66.0.3359 (Windows 10.0.0) AppComponent should render title in a h1 tag FAILED
Expected ' Welcome to awp! ' to contain 'Welcome to AppWithPrefix!'.
at UserContext. src/app/app.component.spec.ts:25:54)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:713:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.jChrome 66.0.3359 (Windows 10.0.0) AppComponent should render title in a h1 tag FAILED
Expected ' Welcome to awp! ' to contain 'Welcome to AppWithPrefix!'.
at UserContext. src/app/app.component.spec.ts:25:54)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:713:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:285:1)
Chrome 66.0.3359 (Windows 10.0.0): Executed 3 of 3 (1 FAILED) (0 secs / 0.179 secs)
Chrome 66.0.3359 (Windows 10.0.0) AppComponent should render title in a h1 tag FAILED
Expected ' Welcome to awp! ' to contain 'Welcome to AppWithPrefix!'.
at UserContext. src/app/app.component.spec.ts:25:54)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:713:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.jChrome 66.0.3359 (Windows 10.0.0): Executed 3 of 3 (1 FAILED) (0.2 secs / 0.179 secs)

Version

Angular CLI: 6.0.8
Node: 9.8.0
OS: win32 x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

[santoshugale]

as per @clydin The prefix option’s only purpose is to prefix the html selectors within the project and intentionally has no relation to file names.
So the title should be app name not prefix

[Brocco]

I have confirmed 2 things...

• this is an issue in the latest v6.0
• this is fixed in 6.1+

[NKCSS]

Maybe naive of me, but why not generate the .spec.ts file to hold an app reference to the title property to make sure the test doesn't break when you change it? It's a bad test imho like this.

Something like:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    expect(app).toBeTruthy();
  }));
  it(`should have as title '${app.title}'`, async(() => {
    expect(app.title).toEqual(app.title);
  }));
  it('should render title in a h1 tag', async(() => {
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain(`Welcome to ${app.title}!`);
  }));
});

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}