Angular 2의 AoT 컴파일러용 롤업 사용 및 Moment.js 가져오기

Angular 2의 AoT 컴파일러용 롤업 사용 및 Moment.js 가져오기

저는 Angular 2의 공식 AoT 가이드를 따르려고 노력하고 있으며, 제 애플리케이션에 Moment.js를 사용하고 있습니다.Moment.js는 제 packages.json 파일에 있고 저는 버전 2.15.0을 사용하고 있습니다.지금까지 이렇게 수입하고 있습니다.

import * as moment from 'moment';

그러나 롤업을 실행해야 하는 부분에 도달하면 다음과 같은 오류가 발생합니다.

네임스페이스('모멘트')를 호출할 수 없습니다.

이것은 제가 모멘트를 가져오는 방식과 관련이 있는 것으로 보입니다.그럼, 제가 이걸 어떻게 해야 하죠?저는 다른 방법으로는 순간을 가져올 수 없을 것 같습니다.사용할 경우

import moment from 'moment'

컴파일 오류가 발생합니다.

외부 모듈 ''모멘트''에는 기본 내보내기가 없습니다.

저는 마침내 두 가지 오류를 모두 제거할 수 있었습니다.정말 피해야 할 것:

네임스페이스('모멘트')를 호출할 수 없습니다.

다음을 사용해야 합니다.

import moment from 'moment'

그럼 피하려면

"filename"에는 기본 내보내기가 없습니다.

tsconfig.json(compilerOptions)에 다음을 추가해야 합니다.

"allowSyntheticDefaultImports": true

EDIT 17/11/2016

또한 다음을 rollup-config.js 파일에 추가해야 했습니다.

plugins: [
  nodeResolve({jsnext: true, module: true}),
  commonjs({
    include: [
        'node_modules/rxjs/**',
        'node_modules/moment/**'
      ]
    }
  }),
  uglify()
]

당면한 문제에 대한 좋은 해결책을 찾았습니다.

Npm - 기본 내보내기를 제공하는 추가 패키지 moment-es6을 설치합니다.그런 다음 'moment' 대신 'moment-es6'에서 가져오기:

import moment from 'moment-es6';

• systemjs와 함께 사용하려면 systemjs.config.js 맵 섹션에 다음을 추가합니다.
  'moment-es6': 'npm:moment-es6/index.js'

• 더하다'node_modules/moment-es6/**'에게include의 롤업 구성 commonjs 섹션(rollup-config-commonjs)

이것은 제가 타자 스크립트(2.1.6)와 롤업(0.41.4)으로 작업 순간을 만들기 위해 한 일입니다.

1. 모멘트를 가져오려면 표준 방식을 유지합니다.

   import * as moment from 'moment';

import moment from 'moment';기본 내보내기가 없는 패키지의 표준이 아닙니다. 런타임에 오류가 발생합니다.moment_1.default is not a function

2. 타자기에서 모멘트를 임의의 모멘트로 주조하여 사용하고 다음을 호출합니다.default함수:

   var momentFunc = (moment as any).default ? (moment as any).default : moment;
   var newFormat = momentFunc(value).format( format );
   

moment(value).format(format)롤업 트리 쉐이킹 시 오류가 발생합니다.Cannot call a namespace ('moment')

우리는 롤업을 사용하여 npm repo로 게시할 수 있는 모듈을 생성하는 ng-packagr에도 유사한 문제가 있었습니다.우리 프로젝트는 @angular-cli(웹팩 사용)를 사용하여 구축되었습니다.

Asteriks 방법을 사용하여 가져온 종속성은 두 가지입니다.

 import * as dataUrl from 'dataurl';

정상적으로 작동하며 다음과 같이 사용됩니다.

 dataUrl.parse(url)

내보낸 개체를 함수로 사용해야 하므로 다른 가져오기에서 다음 오류가 발생했습니다(이름 공간을 호출할 수 없음).

 import * as svgPanZoom from 'svg-pan-zoom';
 svgPanZoom(element); <== error: Cannot call a namespace

내보낸 이니셜라이저 함수를 다른 상수에 할당하고 코드에서 이를 사용하여 이 문제를 해결할 수 있습니다.

 import * as svgPanZoomImport from 'svg-pan-zoom';
 const svgPanZoom = svgPanZoomImport;

 svgPanZoom(element);

또한 위에서 설명한 대로 tsconfig.json 구성을 변경했습니다.

버전: ng-packagr: 1.4.1 롤업: 0.50.0 유형 스크립트: 2.3.5 @angular/cli: 1.4.8 웹 팩: 3.7.1

도움이 되길 바랍니다.

롭

저는 위에서 설명한 것과 같은 문제를 겪고 있었습니다.

import * as moment from 'moment';시스템 js를 통해 개발 및 로드할 때 작동하지만 롤업 중에는 작동하지 않습니다.

import moment from 'moment';롤업 빌드에서 작업했지만 개발 중에는 작업하지 않았습니다.

빌드 유형에 따라 코드를 변경해야 하는 것을 피하기 위해 글로벌로 모멘트를 추가하고 모멘트를 가져오는 대신 필요한 곳마다 가져오는 도우미 기능을 만들었습니다.

즉, 두 유형의 시나리오 모두에서 동일한 코드가 작동합니다.특별히 예쁘지는 않지만, 더 좋은 방법이 있다면 알려주세요!

에 추가된 도우미 기능이 . 도자기능니다입우미에 된 도우미 기능입니다momentLoader.ts

import { default as mom } from 'moment';
export default function moment(args?: any): mom.Moment {
    let m = window["moment"];
    if (!m) { 
        console.error("moment does not exist globally.");
        return undefined;
    }
    return m(args);
}

다른 클래스에서 모멘트를 사용하려면 함수를 가져와서 모멘트를 직접 가져온 것처럼 호출합니다.

import moment from '../../momentLoader';

let d = moment().utc("1995-12-25");

let m = moment("1995-12-25");

systemjs가 글로벌로 로드되도록 하기 위해 다음 단계를 수행했습니다.http://momentjs.com/docs/ #/use-it/system-js/

제 경우 systemjs에 대한 moment config는 다음과 같습니다.

let meta = {
    'lib:moment/moment.js': { format: 'global' }
};

System.config({
    paths: paths,
    map: map,
    packages: packages,
    meta: meta
});

System.import('lib:moment/moment.js');

롤업 빌드의 경우 유감스럽게도 롤업 빌드 파일에 포함되지 않기 때문에 스크립트 태그를 통해 페이지 어딘가에 moment.js가 추가되었는지 확인해야 합니다.

이 실타래를 보면,import moment from 'moment';작동해야 합니다.

버전 2.13.0 이후,

import * as moment from 'moment';

위의 모든 해결책을 시도해 보았지만, 하나도 효과가 없었습니다.효과가 있었던 것은

import moment from 'moment-with-locales-es6';

Prod 빌드를 위해 Gulp 및 Rollup(0.58.0)을 사용하는 내 Angular 5(5.2.9) 프로젝트(Ng2에서 업그레이드)에서 모멘트 Js(2.24) 사용과 동일한 문제가 있었습니다.

처럼 앞서언급남자처럼들한에▁as럼처▁mentioned남들.import * as moment from 'moment';개발 전용 작업(시스템을 통해)JS) 패키지 목록에서 참조 모멘트 Js 포함:

{
  name: 'moment',
  path: 'node_modules/moment/min/moment.min.js'
}

다른 경우는 롤업 사용(운영 빌드) - momentJs의 코드가 ES6 모듈(moment/src 단위)이지만 다른 방식(일반 내보내기)으로 내보냅니다.그렇기 때문에import moment from 'moment';업과함작니다롤합동과 됩니다.

include: [
  'node_modules/rxjs/**',
]

및 ES6 모듈 가져오기.

예, ES6 래퍼를 사용하려면 다음과 같이 하십시오.moment-es6간단한 해결책입니다.하지만 그것은 항상 순간을 요구합니다.동시에 이 문제에 대한 간단한 해결책이 하나 더 있습니다. 즉, Import 행을 Dev에서 Prod로 바꿉니다.예를 들어, Gulp은 다음을 사용할 수 있습니다.gulp-replace어떤 단계에서:

return gulp.src([
     ...
    ])
    .pipe(replace('import * as moment from \'moment\';', 'import moment from \'moment\';'))
     ...;

언급URL : https://stackoverflow.com/questions/39519823/using-rollup-for-angular-2s-aot-compiler-and-importing-moment-js