How can I bootstrap an angular app that has routing with ivy?

Question

I'm trying to enable the new ivy bootstrap for my Angular app.

in main.ts I replaced

platformBrowserDynamic().bootstrapModule(AppModule);

with

import { enableProdMode, ɵrenderComponent as renderComponent, Injector, INJECTOR } from '@angular/core';
const injector: Injector = Injector.create({
  name: 'root',
  providers: [
    {
      provide: UserService,
      deps: [ApiService, JwtService]
    },
    {
      provide: ApiService,
      deps: [HttpClient]
    },
    {
      provide: HttpClient,
      deps: []
    },
    {
      provide: JwtService,
      deps: []
    }
  ]
});

renderComponent(AppComponent, {
  injector: injector
});

However I keep running into this error

StaticInjectorError(root)[ChildrenOutletContexts]: NullInjectorError: No provider for ChildrenOutletContexts!

I tried to add all the services/dependencies that AppComponent relies on to the injector's providers as shown above, but my guess is that its failing because it can't understand how the routing is set up, any ideas?

Answer 1

before you run ng serve

you need to run ivy-ngcc first

then try ng serve --aot