각진 2 - 타사 립 추가

programing

각진 2 - 타사 립 추가

closeapi 2023. 6. 10. 09:06

각진 2 - 타사 립 추가

나는 각진 2 cli를 사용하려고 합니다.
프로젝트에 momentjs를 사용하고 싶기 때문에 다음과 같이 작업했습니다.
각 CLI를 사용하여 프로젝트를 만들었습니다.
경영하다npm install --save moment
src 폴더에서 실행typings init+typings install --save moment.
시스템 모듈에 모멘트 추가:

System.config({
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    moment: {
      map: 'node_modules/moment/moment.js',
      type: 'cjs',
      defaultExtension: 'js'
    }
  }
});

추가된import * as moment from 'moment';내가 원하는 구성요소로.
입니다.ng serve그리고 얻는 것:

[디핑TS 컴파일러]:유형 스크립트에서 찾은 오류: app/angular-day-picker.ts(2, 25): 모듈 'moment'를 찾을 수 없습니다.오류: [Diffing]TS 컴파일러]:유형 스크립트에서 찾은 오류: app/angular-day-picker.ts(2, 25): 모듈 'moment'를 찾을 수 없습니다.디핑에서디핑에서 TS Compiler.doFullBuild(/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/brocoli/brocoli-typescript.js:202:29)TS Compiler.rebuild(/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/brocoli/brocoli-typescript.js:101:18)의 DiffingPluginWrapper.rebuild(/사용자/vioffe/personal/angular/angular-day-picker/brocoli-day-picker/노드)에서).rebrocoli/modulejs:87:45), /Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/brocoli/lib/api_compat.js:42:21 at lib$rsvp$rsvp$internal$$$$$$tryCatch(/angular/anguffe/angular-day-day-day-modules/modulesjs:1036:16) lib$rsvp$$internal$$incallback(/Users/viffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/node_modules/angular-cli/node_modules/rsvp/rs/gular-day-day-day-picker/modules/modules/modules/modules/modules/moduljs:lib$rsvp$asap$$flush(/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)에서 doNTCallback0(노드.j:430:9)에서._tickCallback (node.js:359:13)

다음은 내 tsconfig.json 파일입니다.

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "",
    "module": "system",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "rootDir": ".",
    "sourceMap": true,
    "sourceRoot": "/",
    "target": "es5"
  },
  "files": [
    "typings/main.d.ts"
  ],
  "exclude": [
    "typings/browser.d.ts",
    "typings/browser"
  ]
}

제가 무엇을 잘못했나요?문서에서 제3자 립을 추가하기 위한 가이드를 찾을 수 없습니다.

타사 라이브러리를 포함할 때는 두 부분이 있습니다...실행할 자바스크립트 코드와 IDE에 모든 것을 제공하는 정의 파일은 강력한 형식의 good입니다.

앱이 작동하려면 첫 번째 앱이 있어야 합니다.에 가장함포타라를것입다는니하리러사를 입니다.<script src="thirdLib.js">Angular 2 앱을 호스팅하는 html 페이지의 태그입니다.그것은 당신에게 정의를 제공하지 않을 것이고, 그래서 당신은 IDE good를 가지지 않을 것이지만, 앱은 작동할 것입니다.(IDE가 변수 'thirdLib'에 대해 모른다고 불평하는 것을 막으려면,declare var thirdLib:any파일에 저장합니다.그것은 유형이기 때문입니다.any대한 코드 을 제공하지 오류도 IDE 는 3rdLib 대 드 성 IDE 류 오 IDE 않 습 니 시 지 IDE 키 다 생 발 도 만 않 지 하 지 한 )

실행 코드와 정의를 얻으려면 Lib가 Typescript에 작성된 경우 코드에서 ts 파일에 참조를 추가할 수 있습니다.import {thirdLib} from 'thirdLibfolder/thirdLib' 코드와 typescript 있습니다.lib 파일은실행유정스모의가다집두니를의트립크형와드코▁the▁and다▁by가lib▁lib▁both니▁defin집.

어떤 이 그것을 세 Lib.했다면 lib가Typescript와 함께 d할 수 ./// <reference path="thirdLibfolder/thirdLib.d.ts" /> filets 파일에 .그리고 위에서 언급한 스크립트 참조와 함께 실제 실행 자바스크립트를 포함합니다.

이러한 파일의 위치와 참조에 확장자를 포함할지 여부는 프로젝트 설정과 사용 중인 번들러 및 빌드 도구에 따라 다릅니다.은 「」를 검색합니다.node_modules에서 import {...그리고 다음과 같은 언급을 받아들일 것입니다..ts를 를 던질 입니다..ts연장의

예..먼저 npm부터 ChartJS를 설치해야 합니다.

npm install chart.js --save

이제 ChartJS를 설치했으므로 새 JavaScript 파일이 번들로 제공될 수 있도록 angular-cli-build.js 파일의 CLI에 알려주어야 합니다.

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'chart.js/Chart.min.js',
    ]
  });
};


const map: any = {
  'chartjs': 'vendor/chart.js/'
};


const packages: any = {
  chartjs: { defaultExtension: 'js', main: 'Chart.min.js' }
};

타사 libvia 명령에 대한 지원은 여전히 지원되지 않습니다.

현재 다음을 수행합니다.

npm 설치 순간
copy moment.js를 node_moment/sys에서 src/sys/js/sys.js로 복사
인덱스에 자산/js/js.js를 포함합니다.
필요한 .ts 파일에 입력 및 lib 가져오기를 설치합니다.
서브를 실행하고 모멘트를 사용하는 것을 즐깁니다 :)

이 Wiki 페이지는 다음과 같은 더 자세한 설명을 제공합니다.

https://github.com/angular/angular-cli/wiki/3rd-party-libs

여전히 Angular-cli는 타사 라이브러리 통합에 약간의 문제가 있습니다.그들이 그것을 제대로 고칠 때까지, 저는 당신에게 해킹을 해줄 수 있습니다.코드에 lodash_를 사용하고 싶다고 가정해 보겠습니다.그래서 제 작업 코드 시나리오를 알려드리겠습니다.

Lodash 설치 방법:

npm install lodash --save
typings install lodash --ambient --save

그 전에 타이핑을 전체적으로 설치해야 합니다.

npm install typings -g

그런 다음 angular-cli-build.json에서 다음과 같이 유지합니다.

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'lodash/**/*.js'
    ]
  });
};

system-config.ts:

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: 'cjs'
   }
 };

src/index.dll에 다음 행을 추가합니다(이상한 수정).

<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>

이제 lodash를 사용할 구성 요소에 다음과 같이 기록합니다.

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

그것은 나에게 효과가 있었습니다 :).저는 angular2 프로젝트에서 angular-cli를 통해 방대한 타사 라이브러리를 사용했습니다.

편집

타사 라이브러리에 대한 npm이 제공되지 않는 경우. 만들기assets의 폴의더 에 있는 src폴더를 누릅니다.그런 다음 별도의 폴더를 추가할 수 있습니다.js,css그리고.images를 js 내배치다 안에 .js폴더를 누릅니다.그런 다음 index.html의 js 파일을 다음과 같이 참조해야 합니다.

<script src="assets/js/your_js.js"></script>

이제를 할 때 당이, 할신때.ng serve또는ng build으로 자동로업트다니합데이로 업데이트됩니다.assets/js.

포함할 라이브러리가 유형에 없는 경우 두 가지 방법으로 Angular 2 응용 프로그램에 포함할 수 있습니다.

npm 사용: a단계. 패키지 관리자를 사용하여 라이브러리 설치

step b. systemjs.config.js 파일의 맵 개체에 라이브러리의 경로를 추가합니다.

예:

'jquery' : 'npm:jquery/dist/jquery.js', 'd3' : 'npm:d3/build/d3.js'

c단계. app.vmdk.ts로 가져오기 예제:

'jquery' 가져오기, 'd3' 가져오기;

단계 d. 그것을 선언합니다.

예: declar var $: any;

vard3 선언: any;

간단히 index.dll의 스크립트 태그에 포함하고 선언할 수 있습니다.

정답은 다음 링크에서 확인할 수 있습니다. https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

저는 현재 moment.js를 사용하고 있지 않습니다.그래서 확실하지는 않지만, 제가 보기에 당신은 moment.js를 타자기 모듈로 사용하려고 하는 것 같고, 아마도 그것은 타자기 모듈이 아닐 것입니다.다른 접근법을 제안합니다.moment.js를 가져올 모듈로 사용하지 않고 대신 d.ts 파일을 사용합니다.이를 위해 tsd: cmd 열기:

npm 설치 tsd -g
tsd의 글로벌 설치
cd [당신의 프로젝트 dir]
프로젝트 루트 변경
tsd in.
무엇보다도, 설치된 d.ts 파일을 추적하기 위해 tsd.json 파일을 만듭니다.
tsd 설치 모멘트 - 저장

그 후에 나는 after: moment 뒤에 typescript에서 코드 완성을 받았습니다.

더 이상 테스트하지 않았습니다...

저는 지금 TypeScript 정의 관리자로 tds 대신 타이핑을 사용하고 있습니다.Tds는 이제 더 이상 사용되지 않습니다.

다음과 같이 moment.d.ts를 설치할 수 있습니다. install moment --ambient --save를 입력합니다.

systemjs로 타사 라이브러리를 추가하는 방법은 https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries, 에서 확인하십시오.

언급URL : https://stackoverflow.com/questions/35796961/angular-2-adding-3rd-party-libs

'programing' 카테고리의 다른 글

판다에서 dtype('O')은 무엇입니까? (0)	2023.06.10
CSV 파일 데이터를 Postgre로 가져오는 방법SQL 테이블 (0)	2023.06.10
여러 개의 제출 버튼 장고 양식을 작성하려면 어떻게 해야 합니까? (0)	2023.06.10
우선 순위에 따라 status_id인 각 직원에 대해 단일 행 선택 (0)	2023.06.10
VBA를 사용하여 Excel 셀에 공식 작성 (0)	2023.06.10

현재글각진 2 - 타사 립 추가

각종 프로그래밍 정보를 다루는 블로그입니다.

C, jQuery, Excel, sql-server, spring-boot, PYTHON, PowerShell, json, ajax, angularJS, asp.net, MariaDB, wordpress, Android, mysql, mongodb, ReactJS, SWIFT, Oracle, Git,

Today :
Yesterday :

closeapi

각진 2 - 타사 립 추가

각진 2 - 타사 립 추가

편집

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

각진 2 - 타사 립 추가

각진 2 - 타사 립 추가

편집

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바