Custom Angular Dart Component Package

Issue

I have an angular dart component I created that I am trying to use in my main project. I am using path packages to reference it. The component’s constructor (in the dart file) is being called, but I get errors that the .css and .html file cannot be found. The paths it is looking for them in seem to exist, so I’m not sure why it cannot find them.

I have other custom components I am using throughout my code, but there is no html or css files associated with them and they were fine, it seems to be limited to the html and css files.

Here are snippets of my code

test.dart located in test_component/lib/test_component/

library TestCom;

import 'package:angular/angular.dart';

@Component(
    selector: 'tester',
    templateUrl: 'test.html',
    cssUrl: 'test.css')
class TestComponent {
 String t = "this is the test component";

 TestComponent() {
    print("Test Component STARTED");
  }
}

test.html located in test_component/lib/test_component/

<h3>{{t}}</h3>

pubspec.yaml located in test_component

name: TestModule
dependencies:
  angular: "^1.1.2+2"
  browser: any
transformers:
- angular:
    html_files:
      - lib/test_component/test.html

main.dart located in main/src/main/dart/web

import 'package:TestModule/test_component/test.dart';

class MyAppModule extends Module {
  MyAppModule() {
    bind(TestComponent);
  }
}

index.html located in main/src/main/dart/web/

<tester></tester>

pubspec.yaml located in main/src/main/dart

name: main_package
dependencies:
  angular: "^1.1.2+2"
  browser: any
  shadow_dom: any
  json_object: any   
  bootjack: any
  crypto: any
  xml: "^2.3.2"
  TestModule:
    path: ../../../../test_component
transformers:
- angular:

After I run pub get, in the packages folder of my main project, TestModule/test_component/ exists with test.css, test.dart, and test.html in it. I’m not sure why when I run it, it can not find the .html and .css files.

This is what is displayed in the console when I run it

Observatory listening at http://127.0.0.1:54254/
Test Component STARTED
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.css 404 (Not Found)
index.html:1 GET http://127.0.0.1:3030/packages/TestModule/test_component/test.html 404 (Not Found)
2 HTTP 404: <html><head><title>404 Not Found</title></head><body>File not found</body></html>

STACKTRACE:
null

Solution

Try this

 name: TestModule
    dependencies:
      angular: "^1.1.2+2"
      browser: any
    transformers:
    - angular:
        html_files:
          - packages/TestModule/test_component/test.html

For the css file however, I think you only need to put them into the same folder as the component’s Dart file.

Answered By – Liew Jun Tung

Answer Checked By – Robin (FlutterFixes Admin)

Issue

Solution

Leave a Reply Cancel reply