CODEWITHSUNDEEP
angularjsdrupal-7
Sudha Bisht
Sudha Bisht

Reputation: 1615

How to create angularjs page in drupal

I m trying to create simple angularjs 4 app in drupal through custom module. Problem is when page get open it throw error saying "SyntaxError: import declarations may only appear at top level of a module".

Inside my new module, I have created 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;
  }

  1. angular-component.tpl.php

    Loading...

  2. app.component.ts

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

  3. 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 { }

  4. main.ts

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

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

  platformBrowserDynamic().bootstrapModule(AppModule);

Is i m missing something ? Is there any specific way or documentation to make a simple angularjs 4 app work with drupal 7.

Upvotes: 0

Views: 393

Answers (2)

Sudha Bisht
Sudha Bisht

Reputation: 1615

Resolved above issue using only webpack. Downloaded the final result from https://angular.io/guide/webpack and did necessary changes. Hope this may help someone.

Upvotes: 0

Joe Pontani
Joe Pontani

Reputation: 451

Unfortunately this isn't specific to using Angular inside Drupal (which is definitely possible, I've helped get it set up myself).

See ES2015 import doesn't work (even at top-level) in Firefox

Upvotes: 1

Related Questions