AngularDart:如何为开发和生产环境配置routerProviders / routerProvidersHash？

Question

有一个关于相同问题的SO question。但是我找不到在实际应用程序中如何使用routerProviders / routerProvidersHash的生产就绪代码示例。

据我所知，我们需要定义两个注入器，并根据编译时环境变量使用其中一个，如下所示。

// File: web/main.dart

// >>> Have to use 2 injectors:
@GenerateInjector([
  routerProvidersHash,
  ClassProvider(Client, useClass: BrowserClient),
])
final InjectorFactory injectorDev = self.injectorDev$Injector;

@GenerateInjector([
  routerProviders,
  ClassProvider(Client, useClass: BrowserClient),
])
final InjectorFactory injectorProd = self.injectorProd$Injector;
// <<<

void main() {
  final env = ServerEnvironment();
  if (env.isProduction) {
    runApp(ng.AppComponentNgFactory, createInjector: injectorProd);
  } else {
    runApp(ng.AppComponentNgFactory, createInjector: injectorDev);
  }
}

// File: lib/server_environment.dart

enum ServerEnvironmentId { development, production }

class ServerEnvironment {

  ServerEnvironmentId id;

  static final ServerEnvironment _instance = ServerEnvironment._internal();
  factory ServerEnvironment() => _instance;

  ServerEnvironment._internal() {
    const compileTimeEnvironment = String.fromEnvironment('MC_ENVIRONMENT', defaultValue: 'development');
    if (compileTimeEnvironment != 'development') {
      id = ServerEnvironmentId.production;
    } else {
      id = ServerEnvironmentId.development;
    }
  }

  bool get isProduction {
    return id == ServerEnvironmentId.production;
  }

}

File: build.production.yaml

targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        generate_for:
          - web/main.dart
        options:
          compiler: dart2js
          # List any dart2js specific args here, or omit it.
          dart2js_args:
          - -DMC_ENVIRONMENT=production
          - --fast-startup
          - --minify
          - --trust-primitives

# Build execution

pub run build_runner build --config production --release -o web:build

假设有两个注入器是正确的方法吗？

提前谢谢你！

Answer 1

我要做的是为您的不同喷油器设置创建一个不同的main.dart文件。你不应该在main.dart中有太多的东西，它应该只是作为启动你的应用程序的一种机制。分支应该在build.production.yaml中发生，因为它为生产指定了不同的main (即web/main_production.dart)，并且这个文件是具有非散列路由提供者的文件。这将不再需要在一个文件中使用"ServerEnvironment“和if/else以及可能令人困惑的双注入器设置。

// File: web/main.dart

@GenerateInjector([
  routerProvidersHash,
  ClassProvider(Client, useClass: BrowserClient),
])
final InjectorFactory injector = self.injector$Injector;

void main() {
  runApp(ng.AppComponentNgFactory, createInjector: injector);
}

和

// File: web/main_production.dart

@GenerateInjector([
  routerProviders,
  ClassProvider(Client, useClass: BrowserClient),
])
final InjectorFactory injector = self.injector$Injector;

void main() {
  runApp(ng.AppComponentNgFactory, createInjector: injector);
}

使用

File: build.production.yaml

targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        generate_for:
          - web/main_production.dart
        options:
          compiler: dart2js
          # List any dart2js specific args here, or omit it.
          dart2js_args:
          - --fast-startup
          - --minify
          - --trust-primitives

运行方式

# Build execution

pub run build_runner build --config production --release -o web:build