Unable to run Dart2 w/ Angular for web along side Flutter for mobile project - plan to share code

Question

I have made good progress with Flutter on mobile apps. Currently using:

[✓] Flutter (Channel master, v0.3.1-pre.13, on Mac OS X 10.13.4 17E199, locale en-US)

• Flutter version 0.3.1-pre.13 at /Users/golftocs/PhpstormProjects/flutter

• Framework revision 85be28d36b (32 hours ago), 2018-04-16 14:02:07 -0700

• Engine revision 76cb311d9c

• Dart version 2.0.0-dev.47.0.flutter-f76dad0adc

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.1)

• Android SDK at /Users/golftocs/Library/Android/sdk

• Android NDK location not configured (optional; useful for native profiling support)

• Platform android-27, build-tools 27.0.1

• ANDROID_HOME = /Users/golftocs/Library/Android/sdk

• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java

• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

• All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.3)

• Xcode at /Applications/Xcode.app/Contents/Developer

• Xcode 9.3, Build version 9E145

• ios-deploy 1.9.2

• CocoaPods version 1.5.0

[✓] Android Studio (version 3.1)

• Android Studio at /Applications/Android Studio.app/Contents

• Flutter plugin version 23.1.2

• Dart plugin version 173.4700

• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] Connected devices

! No devices available

Now I want to begin a project that uses this Flutter set-up for mobile and share code with a Dart2/Angular web app. I am unable to get a web app working successfully. I've cloned https://github.com/angular-examples/toh-5 and based on running 'pub get' this is returned:

Overriding the upper bound Dart SDK constraint to <=2.0.0- 
edge.0d5cf900b021bf5c9fa593ffa12b15bcd1cc5fe0 for the following packages:



archive, args, barback, bazel_worker, boolean_selector, build_barback, 
build_config, build_modules, charcode, cli_util, code_transformers, 
convert, crypto, csslib, dart_style, fixnum, front_end, glob, graphs, 
html, http, http_multi_server, http_parser, intl, io, isolate, js, 
json_annotation, kernel, logging, matcher, meta, multi_server_socket, 
node_preamble, package_config, package_resolver, path, plugin, pool, 
protobuf, pub_semver, quiver, quiver_hashcode, shelf, 
shelf_packages_handler, shelf_static, shelf_web_socket, 
source_map_stack_trace, source_maps, source_span, stack_trace, 
stream_channel, string_scanner, term_glyph, test, tuple, typed_data, yaml

Then, when I run 'pub run build_runner serve' from my terminal I get:

[INFO] Generating build script completed, took 446ms

[INFO] Setting up file watchers completed, took 25ms

[INFO] Waiting for all file watchers to be ready completed, took 199ms

[INFO] Building new asset graph completed, took 921ms

[INFO] Checking for unexpected pre-existing outputs. completed, took 2ms

[SEVERE] build_web_compilers|ddc on package:angular_router/src/url.module:


ProcessException: No such file or directory

  Command: /Users/golftocs/PhpstormProjects/flutter/bin/cache/dart-sdk/bin/dartdevc --persistent_worker

[WARNING] build_web_compilers|entrypoint on web/main.dart:

Unable to read angular_router|lib/src/url.ddc.js, check your console or         the `.dart_tool/build/generated/angular_router/lib/src/url.ddc.js.errors` log file.

[SEVERE] build_web_compilers|ddc on     package:angular_router/src/location/platform_location.module:


ProcessException: No such file or directory

Command: /Users/golftocs/PhpstormProjects/flutter/bin/cache/dart-sdk/bin/dartdevc --persistent_worker

[WARNING] build_web_compilers|entrypoint on web/main.dart:

Unable to read angular_router|lib/src/location/platform_location.ddc.js, check your console or the `.dart_tool/build/generated/angular_router/lib/src/location/platform_location.ddc.js.errors` log file.

...

Additionally, I am using WebStorm, actually PHPStorm, and the Pub actions links to 'Get Dependencies, Upgrade...' do not work. I can only execute from terminal.

My desire is to get to: 1) share code between mobile & web similar to https://github.com/apptreesoftware/letsvote/blob/master/README.md 2) run latest Dart2 with Angular5.0.0-alpha and current Flutter master channel 3) WebStorm IDE work seamlessly with either from a combined project

Thanks.

Solution

shared_code
  |- flutter_project
  |- angular_project

where both flutter_project and angular_project have shared-code as a dependency in pubspec.yaml

dependencies:
  shared_code:
    path: ../shared_code

assuming a directory structure like

my_project/shared_code
my_project/flutter_project
my_project/angular_project

The code in shared_code must not depend in any way on dart:io or flutter:ui otherwise it won't work with either flutter_project or angular_project

If you want to open all 3 at the same time in IntelliJ in the same window, adding them all as module to a single project worked for me. When I work on the Angular project I need to switch the Dart SDK in the Dart plugin to the Dart SDK, when I work on the Flutter project to the Flutter Dart SDK, otherwise running the app and tests doesn't work.

You can also open each project in its own IntelliJ window which keeps the setting for each window individually and doesn't need to switch depending on what code you're currently working.

Comments

[Larry King]

Thank you very much. I was trying to run Dart for the Angular side w/ Flutter Dart SDK. Downloading Dart SDK separately, pointing Dart SDK Path here, and restarting my IDE then works!! My plan for the shared code will be pure Dart and include the server interface and as business logic as possible. I appreciate your guidance on project architecture also. Cheers!

[Günter Zöchbauer]

Glad to hear. The Flutter SDK is customized and doesn't contain dart:html, this is why you need the Dart SDK as well. Glad to hear you could make it work.