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中发生，为生产指定一个不同的主文件（即web / main_production.dart），并且该文件是具有非哈希路由提供程序的文件。这将消除对“ ServerEnvironment”和“ if / else”的需要，而在一个文件中使用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);
}

with

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

Ran as

# Build execution

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