•  02-01-2020
  •  | 
  •  

Question

I made the below simple code while learning AngularDART Component, but nothing is displayed, can anyone help me knowing what mistake I made:

my html main file:

    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <title>AngularDART training</title>
        <script type="application/dart" src="main.dart"></script>
        <script src="packages/browser/dart.js"></script>
    </head>
    <body ng-app>
        <h1 id='text_id'>Welcome</h1>
        <the-component></the-component>
    </body>
    </html>

the main.dart file is:

      import 'package:angular/angular.dart';
      import 'package:angular/application_factory.dart';

      @Component(
          selector: 'the-component',
          templateUrl: 'angularComponent.html',
          cssUrl: 'angularComponent.css',
          publishAs: 'cmp')
      class myComponent {var name = 'Component';}

      main() {
        var module = new Module()
                         ..bind(myComponent);

        applicationFactory().addModule(module).run();
      }

the angularComponent.html file is: <p>This is the angular: {{cmp.name}}</p>

the <the-component></the-component> is not working, and not displaying anything!

thanks

Was it helpful?

Solution 2

Thanks for all who tried to help, the solution was writing the pubspec.yaml as:

dependencies:
angular: '>=0.12.0 <0.13.0'
transformers:
- angular: {html_files: "web/angularComponent.html"}

Thanks.

OTHER TIPS

Angular transformer picks the components from the lib folder. If you place your component's files (.dart, .html, .css) in other folders (i.e. web), you need to specify them in the transformers section of pubspec.yaml.

For example,

transformers
   - angular:
     -html_files:
        - absolute/path/to/your/html

Hope this works for you.

The bug is that your pubspec.yaml doesn't list angularComponent.html as an asset.

The Angular transformer which creates the StaticClosureMap did not parse the template, never saw the cmp.name expression and never generated a getter.

We should have given you a better error message. If you still have the complete project isolated well, please file a bug on the Github project and we can make this experience better.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top