오류 : ScrollMagic 및 GSAP와 함께 Angular CLI를 사용하는 중에 'TweenMax'를 해결할 수 없습니다.

Question

Scrollmagic 플러그인을 Angular CLI와 통합하려고합니다.

npm install gsap 
npm install scrollmagic 

.angular-cli.json

"scripts": [ 
     "../node_modules/gsap/src/uncompressed/TweenMax.js", 
     "../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js", 
     "../node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js", 
     "../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js" 
     ], 

구성 요소 : 나는 GSAP와 scrollmagic 라이브러리를 사용하여 NPM을 설치 한

./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TweenMax' in '/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/plugins'

: 그러나, 나는이 오류를 받고 있어요

import { Component, OnInit } 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-floating-butterfly', 
    templateUrl: './floating-butterfly.component.html', 
    styleUrls: ['./floating-butterfly.component.scss'] 
}) 
export class FloatingButterflyComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    var controller = new ScrollMagic.Controller(); 
    var scene = new ScrollMagic.Scene({ 
     triggerElement: ".floating-butterfly" 
    }) 
    .setTween(".floating-butterfly", 0.5, {backgroundColor: "green", scale: 2.5}) // trigger a TweenMax.to tween 
    .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) 
    .addTo(controller); 


    } 
} 

Answer 1

앱을 꺼내야합니다. 그러면 Webpack에 액세스 할 수있게됩니다 (되돌릴 수 없으므로 백업하십시오.).

npm install gsap imports-loader scrollmagic --save 

imports-loader를 설치해야합니다. webpack.config.js이 프로젝트 루트에 추가 될 때 설치하는 데 필요한 새로운 일이 있기 때문에, 응용 프로그램 npm install를 다시 설치 한 후 사용자의 웹팩 별칭에 넣고 :

"alias": { 
"TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'), 
"TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'), 
"TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'), 
"TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'), 
"ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), 
"animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), 
"debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),}, 

이 구성 요소에 이러한 추가 .TS : 순간에 같은 문제가

import 'imports-loader?define=>false!animation.gsap'; 
import ScrollMagic from 'ScrollMagic'; 
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; 
import {TweenMax} from 'gsap/TweenMax'; 
import {TweenLite} from 'gsap/TweenLite'; 
import {ScrollToPlugin} from "gsap/ScrollToPlugin"; 

작동합니다