Angular Dart project, why am I seeing error runApp(ng.AppComponentNgFactory)

Question

I am new to Angular Dart. I have installed Dart, and added dart plugin in VS code. Then I created a bare bone project thru VS command pallette. But when I added this line in main.dart, I got build error. It is as recommended by angular dart i.e angular dart

Here is my main.dart file.

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular_web_application/app_component.dart' as ng;
import 'package:http/browser_client.dart';

@GenerateInjector([
  ClassProvider(Client, useClass: BrowserClient),
])
void main() {
  runApp(ng.AppComponentNgFactory);
}

Here is my app_component.dart

import 'package:angular/angular.dart';
@Component(
  selector: 'my-app',
  template: '<h1>Hello {{name}}</h1>',
)
class AppComponent {
  var name = 'Angular';
}

In my index.html, I have this line

<my-app>Loading</my-app>

But I am facing build error for the line

runApp(ng.AppComponentNgFactory);

I get this error:

"message": "The name 'AppComponentNgFactory' is being referenced through the prefix 'ng', but it isn't defined in any of the libraries imported using that prefix.\nTry correcting the prefix or importing the library that defines 'AppComponentNgFactory'.

Answer 1

The factory is not declared in the app_component.dart.

It is generated by Angular compiler

import 'package:angular_web_application/app_component.template.dart' as ng;

Which should have the right implementation. See What does somecomponent.template.dart import in AngularDart point to? for example.