Is Apollo template compatible with existing Angular projects generated by CLI?

[DABBEL-cheng]

I tried to follow the setup tutorial on YouTube but failed with below error message

ERROR RuntimeError: NG05100: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead

I'm curious whether this is a mis-configuration on my end, or it's caused by incompatibility with projects generated with ng new, which uses standalone component by default. Any suggestions on how to integrate the template to a CLI generated project?

Environment

Template used: apollo-ng-17.0.0
Angular CLI: 17.3.2
Node: 20.10.0

Steps to re-produce

1. Create a new project with ng new my-app
2. Generate a new component ng g c my-page
3. Install required packages

ng add primeflex
ng add primeicons
ng add primeng

4. Copy the folder src/app/layout from template to the same location of the app
5. Copy the folder src/assets/layout from template to the same location of the app
6. Edit style.scss by adding below line

@import "assets/layout/styles/layout/layout.scss";

7. Add AppLayoutModule into the imports array in app.component.ts. This instruction comes from Angular document

...
import { AppLayoutModule } from './layout/app.layout.module';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, AppLayoutModule],
  ...
})
export class AppComponent {
  title = 'my-app';
}

8. Update app.routes.ts to put existing component my-page inside template layout

import { Routes } from '@angular/router';
import { AppLayoutComponent } from './layout/app.layout.component';
import { MyPageComponent } from './my-page/my-page.component';

export const routes: Routes = [
    {
        path: '',
        component: AppLayoutComponent,
        children: [
            { path: '', component: MyPageComponent }
        ]
    }
];

9. When trying ng serve, TS-996001 error will happen, so I added "baseUrl": "./" to tsconfig.json
10. Running the app with ng serve

[GregOnNet]

Hi,

I am just guessing around:

• An app being generated with Standalone APIs will load BrowserModule under the hood.
• If there is any @NgModule in Apollo that has BrowserModule in its imports: [] an error will be raised.

Can you have a look if you load BrowserModule more than once?

Cheers
Gregor

[DABBEL-cheng]

Hi Gregor,

Thanks for your analysis. I think the cause of the problem is exactly as you said. Actually, in app.layout.module.ts (from the Apollo template), the BrowserModule is imported

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

...
@NgModule({
    declarations: [...],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ...
    ]
})
export class AppLayoutModule { }

I tried to

1. Delete BrowserModule, the same problem still exists
2. Delete both BrowserModule and BrowserAnimationsModule. This results in another error

   NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'

Do you have any suggestions on the directions I should try?

Best Regards,
Cheng

[GregOnNet]

I think NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div' is a follow-up error that is not directly related to BrowserModule.

ngClass comes from the CommonModule. If you use Stand-Alone-APIs the CommonModule is missing in the Setup.
The Apollo Theme does not use Standalone-APIs, yet.
You might need to migrate these components to Standalone-Components.

You can use a script for that: https://angular.io/guide/standalone-migration#migrate-an-existing-angular-project-to-standalone

Hope this helps

[DABBEL-cheng]

Your analysis of the error message was not only concise but also accurate. Moreover, the link you provided proved to be immensely helpful. With its guidance, I successfully converted the Apollo template to a standalone version. The process turned out to be much smoother and more manageable than I initially anticipated, thanks to your guidance.