CODEWITHSUNDEEP
dartangular-dart
Jan Vladimir Mostert
Jan Vladimir Mostert

Reputation: 12992

Running Normal Dart HTML and Angular Dart 2 in the same app

Is it possible to mix a normal Dart HTML application with Angular Dart 2 and have Angular Dart 2 run in certain parts of the application and not other parts?

I've attempted that, but it seems Angular is injecting itself into every page.

index1.html:

<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
</body>

index2.html:

<my-app>Loading...</my-app>
<script async src="main2.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
</body>

main.dart:

// many imports

void main() {
  // manual code to hook urls, html etc
}

main2.dart:

import 'package:angular2/angular2.dart';
import 'package:angular2/bootstrap.dart';

@Component(selector: 'my-app', template: '<h1>Testing Angular Dart 2</h1>')
class AppComponent {}
main() {
    bootstrap(AppComponent);
}

pubspec.yaml:

...
environment:
  sdk: '>=1.0.0 <2.0.0'
dependencies:
  ...
  less_dart: any
  browser: any
  http: any
  event_bus: any
  dart_to_js_script_rewriter: any
  angular2: 2.0.0-beta.0
transformers:
- dart_to_js_script_rewriter
- $dart2js:
    commandLineOptions: [--enable-experimental-mirrors]
- less_dart:
    entry_points: [web/styles/main.less, web/styles/test.less]
    build_mode: dart
- angular2:
    entry_points: web/main2.dart

The angular2 transformer is clearly pointing at main2.dart and only index2.html is importing main2.dart, but when I load index1.html which is importing main.dart, the angular app runs.

Is it possible to do what I want to do or is it a case of all-or-nothing when including Angular Dart 2?

Upvotes: 3

Views: 181

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657536

What do you mean by "it seems Angular is injecting itself into every page."? If you have different entry points (index1.html, index2.html, ...) each entry point is an individual application and for each you can enable Angular or not. If this doesn't work it's a bug in some transformer.

Upvotes: 2

Related Questions