Question

我试图通过自定义模块在drupal中创建简单的angularjs 4应用程序。问题是当页面打开时抛出错误说＆＃34; SyntaxError：import声明只能出现在模块的顶层＆＃34;。

在我的新模块中，我创建了 1. angular_demo.module

  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'; 
}

app.module.ts

  import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent }  from './app.component';

  @NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
  })
  export class AppModule { }

main.ts

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

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

  platformBrowserDynamic().bootstrapModule(AppModule);

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

Answer 1

不幸的是，这并不是特定于在Drupal中使用Angular（这绝对是可能的，我自己帮助设置了它）。

请参阅ES2015 import doesn't work (even at top-level) in Firefox

Answer 2

仅使用webpack解决了上述问题。从https://angular.io/guide/webpack下载最终结果并进行必要的更改。希望这可以帮助某人。

如何在drupal中创建angularjs页面

2 个答案: