LoginSignup
0
0

More than 5 years have passed since last update.

Angular[メモ] AOTコンパイル `Destructured variable or constant not supported`でエラーになる場合

Posted at

AOTコンパイルに切り替えたときにエラーがでたのでメモ。

typescript 的にはOK(?)でもaotコンパイルでは、NG な書き方がいろいろとあるみたいです。

https://github.com/angular/angular/blob/master/aio/content/guide/aot-compiler.md

その中で今回エラーが出たのは下記。(非構造化変数または定数はサポートされていません)


{@a destructured-variable-not-supported}

Destructured variable or constant not supported
Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring.

The compiler does not support references to variables assigned by destructuring.

For example, you cannot write something like this:

// ERROR import { configuration } from './configuration';
// destructured assignment to foo and bar const {foo, bar} = configuration; ... providers: [ {provide: Foo, useValue: foo}, {provide: Bar, useValue: bar}, ] ...

To correct this error, refer to non-destructured values.

// CORRECTED import { configuration } from './configuration'; ... providers: [ {provide: Foo, useValue: configuration.foo}, {provide: Bar, useValue: configuration.bar}, ] ...

下記のように、AppRouteConstant としてルーティング用の定数の中から必要なものを const {...} = AppRouteConstant で取り出して、@NgModuleなどのangular用のデコレータにimport(参照させること)はできない



/**
 * ルーティング設定
 */
const {HOGE, FUGA} = AppRouteConstant; // これがNG

const routes: AppRoute[] = [
  // HOGE
  {
    path: HOGE.INDEX.path,
    component: HogeIndexPageComponent,
    data: HOGE.INDEX.data,
  },
  // FUGA
  {
    path: FUGA.INDEX.path,
    component: FUGAIndexPageComponent,
    data: FUGA.INDEX.data,
  },
];

export const routing = RouterModule.forChild(routes);

// ----略

@NgModule({
  imports: [
    CommonModule,
    //---------略
    routing,
  ],
  declarations: [
   // ----------略
  ],
})
export class HogePageModule {
}

おとなしく個別に書く。


/**
 * ルーティング設定
 */

const routes: AppRoute[] = [
  // HOGE
  {
    path: AppRouteConstant.HOGE.INDEX.path,  // 少し冗長になるがAOTコンパイルOK
    component: HogeIndexPageComponent,
    data: AppRouteConstant.HOGE.INDEX.data,
  },
  // FUGA
  {
    path: AppRouteConstant.FUGA.INDEX.path,
    component: FUGAIndexPageComponent,
    data: AppRouteConstant.FUGA.INDEX.data,
  },
];

export const routing = RouterModule.forChild(routes);

// ----略

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0