Hi all, | Angular Community | Page 1

stoic barn Dec 17, 2024, 8:45 AM

#

I am tasked with upgrading a mid-sized(~500k LOC) AngularJs app to Angular. While this will be a pretty long lived lived project, I have some success with bootstrapping all the joy as a hybrid app.
I am however interested in upgrading to standalone components and I have not been able to make this work. I am currently using the:

        .bootstrapModule(RelesysAppModule)```
And then I have the Angular app bootstrap AngularJs.
If anybody has some useful insights please let me no.
Also, send help 😢

still crypt Dec 17, 2024, 9:22 AM

#

What prevents you from using the standard standalone bootstrap exactly?

stoic barn Dec 17, 2024, 11:42 AM

#

It varies a little between getting this:
ERROR NullInjectorError: R3InjectorError(Environment Injector)[$injector -> $injector]:
NullInjectorError: No provider for $injector!
And just getting no erros , but still no angularJs app running.

still crypt Dec 17, 2024, 12:28 PM

#

And what is the code of your bootstrapping code when using standalone?

stoic barn Dec 17, 2024, 1:25 PM

#

I'm using

import 'zone.js';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {RelesysAppModule} from "./rl-app.module";

platformBrowserDynamic()
    .bootstrapModule(RelesysAppModule).catch(() => {
        /* no-op */
    });

bootstrapping this:

@NgModule({
 ...
})
export class RelesysAppModule implements DoBootstrap {
    constructor(@Inject(UpgradeModule) private upgrade: UpgradeModule) {}

    ngDoBootstrap(): void {
        console.log('Angular running, now bootstrapping angularJs');
        this.upgrade.bootstrap(document.body, ['App']);
    }
}```
I tried changing to using `bootstrapapplication` instead and removing the ngModule and bootstrap on ngInit. But I couldn't get it to work.
I hope any of this makes sense. My brain is currenly pretty smooth from understanding new angular/angularJs concepts.

still crypt Dec 17, 2024, 1:28 PM

#

You're asking about why some code does not work (the standalone bootstrap. So I ask you to post it. But instead you're posting some other code that works. Please post the code that does not work.

#

That said, I probably won't be able to help, and I'm not even sure upgrading is supported in standalone mode.

stoic barn Dec 17, 2024, 1:49 PM

#

Alright, I'm fearing that as well, anyway it looked something like this:

import 'zone.js';
import { bootstrapApplication, platformBrowser } from '@angular/platform-browser';
import { RootComponent } from './rl-app.module';
import { UpgradeModule } from "@angular/upgrade/static";

bootstrapApplication(RootComponent, {
    providers: [
        { provide: UpgradeModule }
    ]
}).catch(() => { });```

```import { Component, Inject } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule],
    template: `<p>Root Component</p>`
})
export class RootComponent {
    constructor(@Inject(UpgradeModule) private upgrade: UpgradeModule) { }

    ngOnInit(): void {
        this.upgrade.bootstrap(document.body, ['App']);
    }
}```
And it results in the error:
```ERROR NullInjectorError: R3InjectorError(Environment Injector)[$injector -> $injector]: 
  NullInjectorError: No provider for $injector!```
Which doesn't mean much to me.

Thanks for your time anyways!

#Hi all,