Error when trying to run the Front-end Dev Server

[aorlandou]

• Environment:
  Release V8.27.0
  After merging the new commits to my local repository. My repository is now up to date with the latest commit to the master branch (commit a21287018cef54b78bdd03a6b64d70a80b3431d6)

Steps to reproduce
I had already successfully followed the instructions to set up the development environment for TEAMMATES and the Front-end Dev Server was working with no problem. After pulling the recent commits, I was unable to start the Front-end Dev Server. I checked the Developer Troubleshooting Guide and found out that this is a common error. I tried to re-run the command to build the type definition but still I did not succeed.

After running these 2 commands:
./gradlew generateTypes this command runs without an error
npm run start

I get the following output:

Error: src/web/app/app.component.ts:9:14 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

9   template: '<router-outlet></router-outlet>', 
               ~~~~~~~~~~~~~~~



Error: src/web/app/app.module.ts:157:12 - error NG1010: Value at position 17 in the NgModule.imports of AppModule is not a reference
  Value could not be determined statically.

157   imports: [
               ~
158     SimpleModalModule,
    ~~~~~~~~~~~~~~~~~~~~~~
... 
181         ? AngularFireAuthModule : [],
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
182   ],
    ~~~

  src/web/app/app.module.ts:178:5
    178     environment.allowFirebaseLogin && environment.firebaseConfig?.projectId
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Unable to evaluate this expression statically.
  src/web/app/app.module.ts:178:39
    178     environment.allowFirebaseLogin && environment.firebaseConfig?.projectId
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Unable to evaluate statically.


Error: src/web/app/page.component.html:8:32 - error NG8002: Can't bind to 'ngStyle' since it isn't a known property of 'div'.

8   <div class="navbar-collapse" [ngStyle]="{ display: isCollapsed ? 'none' : 'block' }">
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/web/app/page.component.ts:30:16
    30   templateUrl: './page.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PageComponent.


-------More errors-------------

✖ Failed to compile.

Additional info

[wkurniawan07]

This is not at all a common error. The fact that basic Angular elements such as router-outlet, ngStyle are not being recognized means something is wrong with the project setup.

May I check, if you can recall, which commit was your repo in before pulling the recent commits? Some basic info of your setup such as OS version and Node.js version would also be helpful.

[wkurniawan07]

None of the things printed up there are a cause of concern.

Another thing to check: the last time you were able to run the dev server successfully, what was the Node.js version you're using? Node 18 might or might not be problem, but again, covering all grounds here.

[aorlandou]

First of all, thank you for the quick response and for trying to help me solve this issue. I downloaded Node.js for the purposes of the project and I haven't updated the version since I downloaded it. I was able to run the server with the same Node version before updating my repository.

[wkurniawan07]

I have never experienced this issue before, so I must admit that I'm quite at a loss here.
If it doesn't trouble you, can you try to go back to commit ffc67a083b and check if you can run the server as per normal? If you're able to, one thing you can try is to move forward one commit at a time (or a few at a time, like doing a binary search) until you find which commit causes this server run failure.

[zhaojj2209]

From this part of the error message:

src/web/app/app.module.ts:178:5
    178     environment.allowFirebaseLogin && environment.firebaseConfig?.projectId
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Unable to evaluate this expression statically.
  src/web/app/app.module.ts:178:39
    178     environment.allowFirebaseLogin && environment.firebaseConfig?.projectId
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Unable to evaluate statically.

It seems that your web dev environment does not have the firebaseConfig attribute. This is because the addition of firebase auth in a recent release has made changes to src/web/environments/config.ts.

To resolve this, do replace the contents of src/web/environments/config.ts with src/web/environments/config.template.ts.

[aorlandou]

Thank you so much @zhaojj2209 this solved my problem! The server is running without any problem now 🤩

[wkurniawan07]

Wouldn't expect that to cause all of the presented symptoms, but I guess we learn something new everyday. Thanks @zhaojj2209 for chipping in!