如何在drupal中创建angularjs页面

我试图通过定制模块在drupal中创建简单的AngularJS4应用程序。问题是当页面打开时，会抛出错误 “SyntaxError:导入声明只能出现在模块的顶层”

在我的新模块中，我创建了 1角模

  function angular_demo_menu() {
    $items = [];
    $items['reservation'] = [
      'access callback' => TRUE,
      'page callback' => 'angular_demo_callback',
    ];
    return $items;
  }

  function angular_demo_theme($existing, $type, $theme, $path) {
    return [
      'angular_component' => [
        'template' => 'angular-component',
        'variables' => array(),
        'path' => drupal_get_path('module', 'angular_demo'),
      ],
    ];
  }

  function angular_demo_callback() {
    $build = [];

    $build['content'] = [
      '#theme' => [
        'angular_component',
      ],
      '#attached' => [
        'js' => [
          libraries_get_path('node_modules') . '/core-js/client/shim.min.js',
          libraries_get_path('node_modules') . '/zone.js/dist/zone.js',
          libraries_get_path('node_modules') . '/reflect-metadata/Reflect.js',
          libraries_get_path('node_modules') . '/rxjs/bundles/Rx.js',
          libraries_get_path('node_modules') . '/@angular/core/bundles/core.umd.js',
          libraries_get_path('node_modules') . '/@angular/common/bundles/common.umd.js',
          libraries_get_path('node_modules') . '/@angular/compiler/bundles/compiler.umd.js',
          libraries_get_path('node_modules') . '/@angular/platform-browser/bundles/platform-browser.umd.js',
          libraries_get_path('node_modules') . '/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
          drupal_get_path('module', 'angular_demo') . '/app.component.ts',
          drupal_get_path('module', 'angular_demo') . '/app.module.ts',
          drupal_get_path('module', 'angular_demo') . '/main.ts',
        ],
      ],
    ];
    return $build;
  }

angular-component.tpl.php

加载

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { 
  name = 'Angular'; 
}

梅因酒店

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

  import { AppModule } from './app.module';

  platformBrowserDynamic().bootstrapModule(AppModule);

---

我错过什么了吗？是否有任何特定的方法或文档可以使简单的angularjs 4应用程序与drupal 7一起工作。

不幸的是，这不是drupal内部使用Angular的特定方法（这是绝对可能的，我自己已经帮助设置了它）

---

请参见仅使用网页解决上述问题。从下载了最终结果，并进行了必要的更改。希望这能帮助别人

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

  import { AppModule } from './app.module';

  platformBrowserDynamic().bootstrapModule(AppModule);