How to integrate Angular 6 with Drupal 8

1. Custom module

Follow the examples module.

2. Header attributes

Via the module file

function module_preprocess_html(&$variables) {
  $xuacompatible = [
    '#tag' => 'base',
    '#attributes' => [
      'href' => '/my-will',
    ],
  ];

  $variables['page']['#attached']['html_head'][] = [
    $xuacompatible,
    'x-ua-compatible',
  ];

  $variables['html_attributes']['data-critters-container'] = "";
}

3. Include js via module hook.

I want to keep it on a specific page

function module_js_alter(&$javascript,) {
  $current_path = \Drupal::service('path.current')->getPath();
  if ($current_path === '/node/4') {
    $javascript = [];

    $polyfill = Drupal::service('extension.list.module')
        ->getPath('will_exporter') . '/docwills/browser/polyfills.js';

    $javascript[$polyfill] = [
      'weight' => 100,
      'minified' => FALSE,
      'group' => 'interlated',
      'type' => 'file',
      'data' => $polyfill,
      'version' => '1.0.1',
      'cache' => TRUE,
      'preprocess' => FALSE,
      'attributes' => ['type' => 'module'],
      'licence' => [
        'name' => 'custom',
        'url' => 'https://www.interlated.com.au',
        'gpl-compatible' => FALSE,
      ],
      'scope' => 'footer',
    ];

    $angular_main = Drupal::service('extension.list.module')
        ->getPath('will_exporter') . '/docwills/browser/main.js';

    $javascript[$angular_main] = [
      'weight' => 100,
      'minified' => FALSE,
      'group' => 'interlated',
      'type' => 'file',
      'data' => $angular_main,
      'version' => '1.0.1',
      'cache' => TRUE,
      'preprocess' => FALSE,
      'attributes' => ['type' => 'module'],
      'licence' => [
        'name' => 'custom',
        'url' => 'https://www.interlated.com.au',
        'gpl-compatible' => FALSE,
      ],
      'scope' => 'footer',
    ];
  }
}

4. Include css via module.libaries.yml

module:
css:
theme:
docwills/browser/styles.css: { }

5. Create a block for the html element. Use the block example from the examples module

In the past I've attached the js files here. Link the inclusion of the files to the presence of the block.

/**
 * @Block(
 *   id = "will_exporter",
 *   admin_label = @Translation("Will Exporter"),
 *   category = @Translation("Interlated"),
 * )
 */
class AngularAppBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#type' => 'html_tag',
      '#tag' => 'app-root',
      '#attached' => [
        'library' => [
          'module/module',
        ],
      ],
    ];
  }
}

6. Change the build destination in the angular app to the module location

angular.json

"outputPath": "../../web/modules/custom/module/exporter",

All the paths above point here

7. No output hashing in the package.json build script

If you keep this, you need to change the main.js and polyfills.js file names every time you build

"prod": "ng build --configuration=production --output-hashing=none --base-href=./wills",

8. Run the "prod" script

npm run prod

rebuild caches. Repeat until the javascript console shows no errors.