Angular 2 и Scrollmagic

Я построил тестовую систему с Angular CLI + ScrollMagic и нашел одну проблему.

Информация о версии ng

Угловой CLI: 1.5.2
Узел: 6.10.3
ОС: win32 x64
Угловое: 5.1.2
... анимации, общий, компилятор, компилятор-cli, ядро, формы
... http, language-service, platform-browser
... платформа-браузер-динамик, маршрутизатор

@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@схематические/угловые: 0.1.11
@схемы/схемы: 0.0.11
машинопись: 2.4.2
webpack: 3.8.1

Шаги по созданию

• ng new scrollmagictest
• пряжа
• пряжа добавить scrollmagic
• пряжа добавить gsap
• пряжа добавить --dev @types/gsap

Контрольный компонент

Заметьте, мой код ScrollMagic может оказаться не оптимальным.

app.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { TweenMax, TimelineMax } from 'gsap';
import * as ScrollMagic from 'ScrollMagic';
import 'ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js';
// import 'ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  ctrl = new ScrollMagic.Controller();

  ngAfterViewInit() {
    new ScrollMagic.Scene({
      triggerElement: '.menu-trigger',
      duration: window.screen.height,
      triggerHook: 0
    })
    .setPin('#menu', { pushFollowers: false })
    .addTo(this.ctrl);
  }

}

app.component.html

<nav class="nav">
  <h1 class="header">Header</h1>
  <div class="menu-trigger">
    <ul id="menu">
      <li><a href="">ScrollMagic</a></li>
      <li><a href="">Will</a></li>
      <li><a href="">Pin</a></li>
      <li><a href="">This</a></li>
      <li><a href="">Menu</a></li>
      <li><a href="">Until</a></li>
      <li><a href="">Second</a></li>
      <li><a href="">Slide</a></li>
    </ul>
  </div>
</nav>

<section class="slide slide01">
  <h1>Content</h1>
</section>

<section class="slide slide02">
  <h1>More Content</h1>
</section>

app.component.css

body { font-family: Helvetica, Arial, sans-serif; color: rgb(70, 67, 67); }

html, body { margin: 0; height: 100%; }

.nav {
  color: rgb(255, 255, 255);
}

.nav .header {
  font-size: xx-large;
  padding: 20px 10px 20px 10px;
  color: rgb(70, 67, 67);
  background-color: rgb(212, 215, 248);
}

#menu {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-left: 0;
  list-style: none;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 0;
  margin-top: 0;
  border-bottom: 1px solid rgb(203, 189, 189);
}

#menu li {
  padding: 10px;
}

#menu li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-weight: bold;
}

h1, p {
  margin: 0; padding: 0;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #efefef;
  height: 1200px;
}

.slide01 { background-color: rgb(168, 190, 246); }
.slide02 { background-color: rgb(4, 63, 164); }

Проблема, которую я нашел

Обратите внимание на строку с комментариями

// import 'ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js';

Если мы попытаемся включить этот плагин, у webpack возникнет проблема с подключением его к gsap.

После ng build,

ОШИБКА в. /node_modules/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Модуль не найден: ошибка: не удается разрешить "TimelineMax" в...

Решение проблемы

Это сообщение tsconfig paths, которое не соблюдается 4 ноября 2017 года, дает разрешение, но оно включает исправление node_modules/@ngtools/webpack/src/paths-plugin.js.

С поста,

FYI, для всех, кто нуждается в пред-1.2.6, решение, на которое я приземлился, использует новейшие Угловые /CLI/и т.д. и просто переписывая node_modules/@ngtools/webpack/src/paths-plugin.js с /paths-plugin.js. Он не очень изящный и может быть разорван будущим выпуском, но теперь выполняет свою работу без блокировки обновления до Angular 5.

---

Альтернативное разрешение

Если вы не хотите взломать npm-installed @ngtools/webpack/src/paths-plugin.js, вот альтернатива.

Часть сообщения об ошибке сборки

путь \to\myProject\src\TweenMax.js не существует

поэтому мы можем (грубо) исправить это, скопировав исходные файлы ./src папку ./src.

См. Как подключить сторонние скрипты перед тем, как обслуживать/создавать приложение с помощью angular-cli, Cory Rylan показывает, как использовать скрипты npm в package.json для подключения к процессу сборки.

• добавьте два новых сценария npm в package.json, оставив скрипт build как есть, поэтому его можно запустить как обычно.
• запустите команду npm run startbuild всякий раз, когда вы делаете глобальную npm install, или другую команду, которая может изменить файлы взрыва.
• Заметьте, я установил copyfiles по всему миру, для удобства.

package.json

{
  "name": "myProject",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    ...
    "startbuild": "npm run prebuild && ng build",
    "prebuild": "copyfiles -f node_modules/gsap/src/uncompressed/*.js src",
    "build": "ng build",
    ...
  },