How to create angularjs page in drupal

Question

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

2. angular-component.tpl.php

   Loading...

3. app.component.ts

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

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

5. 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.

Answer 1

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

Answer 2

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.