CODEWITHSUNDEEP
angulartypescript
John Baird
John Baird

Reputation: 2676

How do I determine what zone is already loaded?

I have an angular final app that loads lots of routes and modules. I started getting a "Zone is already loaded" error in the console and now I'm getting it twice.

I've looked at the zone object to try and figure out what is going on, but that is almost impossible to decipher without knowing what zone is supposed to do.

Main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

import { environment } from './app/';
import {AppModule} from './app/app.module';

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule,[]);

app.module.ts (I omitted all of the imports):

@NgModule({

    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(), 
               HomeModule, DocumentsModule, AboutModule, SettingsModule, FoodModule, CalculatorModule, 
               ThemesModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]

}) 

export class AppModule {}

app.component.ts

@Component({
    moduleId: module.id,
    selector: 'kg-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css']

})

export class AppComponent implements OnInit {
    private items: MenuItem[];
    appPageHeaderDivStyle: {};
    selectedTheme: Theme;
    errorMessage: string;
    loggedIn: LoggedIn;
    loggedInEmail: string = "";
    isLoggedIn: boolean;

    constructor(
        private as: AppMenuService,
        private ts: ThemeService,
        private ss: SettingsService,
        private ls: LoginService) {
    }

    ngOnInit() {

        this.ts.getNewTheme()
            .subscribe(
            theme => this.selectedTheme = theme,
            error => {
                this.errorMessage = error
            },
            () => this.completeGetNewTheme()
            );

        this.ts.setTheme("Pepper-Grinder");
        this.items = this.as.getNoLoginMenu();

        this.ls.getLoggedIn()
            .subscribe(
            loggedIn => {
                if (loggedIn.error != undefined && loggedIn.error === "" && loggedIn.email != "") {
                    this.items = this.as.getLoggedInMenu();

                    var us = this.ss.getUserSettings();
                    if (us != undefined && us.theme != null && us.theme != "") {
                        this.ts.setTheme(us.theme);
                    }
                }
                else {
                    this.items = this.as.getNoLoginMenu();
                    this.ts.setTheme("Pepper-Grinder");
                }

                this.completeLoggedIn(loggedIn.email);
            });
    }

    completeLoggedIn(email: string) {
        this.loggedInEmail = email;
        this.isLoggedIn = (this.loggedInEmail.length > 0);

    }

    completeGetNewTheme() {
        this.appPageHeaderDivStyle = this.ts.getAppPageHeaderDivStyle();
    }

Upvotes: 1

Views: 2457

Answers (1)

John Baird
John Baird

Reputation: 2676

I assumed that this error meant that some given zone was already loaded. It appears that this means that "zone.js" had already been loaded. When I switched to Angular-cli, its already loaded in the angular-cli-build.js. So removing it from the index.html solved the problem.

I'm posting this in case anyone else runs across the error.

Upvotes: 2

Related Questions