Converting routing of Angular[2] V3, Dart 1 to Angular 5, Dart 2

Issue

I’m busy migrating from Dart1 to Dart2 and as a result, i had to upgrade Angular from 3 to 5 as well.

I got stuck on the routing migration …

This is what we had in Angular2 which was the same in Angular3:

@Component(
    ...
)
@RouteConfig(const [

    /*Meta*/
    const Route(path: "/home", component: AppHomeScene,
        name: SceneRoute.APP_HOME_SCENE, useAsDefault: true),
    const Route(path: "/project-home", component: ProjectHomeScene,
        name: SceneRoute.PROJECT_HOME_SCENE,),
    ...

])
class AppBuild implements AfterContentInit, OnDestroy {
    ...
}

In Angular5, i’ve removed that @RouteConfig block, created a routes.dart and a paths.dart

import 'package:angular_router/angular_router.dart';
import 'package:appbuild/enum/enums.dart';

class Paths {

    static final home = new RoutePath(path: "home", useAsDefault: true, additionalData: SceneRoute.APP_HOME_SCENE);

    ...
}

and

import 'package:appbuild/paths.dart';

export 'paths.dart';

class Routes {

    static final all = <RouteDefinition>[

        /*Meta*/
        RouteDefinition(routePath: Paths.home, component: AppHomeScene),

        ...
    ];
}

Where i currently have component: AppHomeScene, the docs says it should be in the format hero_list_template.HeroListComponentNgFactory,

enter image description here

If i try to do the import though, IntelliJ marks it as an error:

import 'component/home/home-scene.template.dart' as 'home-scene-template';

enter image description here

At what point is that template generated for me to be able to do such an import or should i be doing something to the HomeScene class in order for that template to be importable?

HomeScene is just a standard component still in its Angular3 format:

@Component(
    selector: 'home-scene',
    // language=CSS
    styles: const[""" 
        ...
    """
    ],
    // language=HTML
    template: """
        ...
    """,
    providers: const [...],
    directives: const [...]
)
class AppHomeScene extends AppScene implements AfterContentInit, OnDestroy {

    ....

}

Solution

The template.dart file is created for each .dart file that has a template after the first build is run on your application. IntelliJ doesn’t know to compile your application before it should analyze your code.

Suggest you do a build of your app, and then refresh the analysis results.

Answered By – Ted Sander

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *