javascript - Problem med å legge til tredjeparts (ekstern) js-bibliotek i angular5

Jeg jobber med å legge til jsplumb community js-bibliotekversjon med Angular 5-applikasjonen (Angular CLI: 1.6.1).

Med den første byggingen uten noen konfigurasjon til tsconfig.json får jeg følgende feil.

ERROR in src/app/jsplumb/jsplumb.component.ts(4,25): error TS6143: Module '../../../node_modules/jsplumb/dist/js/jsplumb.js' was resolved to 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js', but '--allowJs' is not set.

Med "allowJs":true i tsconfig.json får du følgende feil

ERROR in error TS5055: Cannot write file 'D:/myproj/angular5/myapp/node_modules/jsplumb/dist/js/jsplumb.js' because it would overwrite input file.
  Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files. Learn more at https://aka.ms/tsconfig.

I henhold til tsconfig FAQ

Hvorfor får jeg feilen TS5055: Kan ikke skrive filen 'xxx.js' fordi det ville overskrive inngangsfilen.

med en outDir ("outDir": "./dist/out-tsc") bør dette problemet løses. Dette er allerede satt i min tsconfig.

Hvis vi legger til noEmit til true, bygger det enkelt og greit applikasjonen, uten å inkludere noen js, får vi en tom hvit skjerm.

Gi meg beskjed hvis noen har prøvd å inkludere ekstern js med ny Angular CLI og møtt samme type feil, og hva løsningen for det samme er.

Uten noen ekstra alternativ lagt til i tsconfig.json, hvis jeg prøver å endre en hvilken som helst ts-fil, vil applikasjonen kompileres med suksess, og jeg kan arbeide. Men dette hjelper ikke når jeg kjører ng build for å lage en distribuérbar binær fil.

Oppdateringsløsning: inntil fiksen i CLI er tilgjengelig. For utvikling (ng serve) fjern allowJs fra tsconfig.json, når du får en feil ved å legge til allowJs, endre ganske enkelt en ts-fil for å kompilere applikasjonen på nytt, denne gangen vil den kompilere med suksess. For produksjon eller distribusjon, legg tilbake allowJs i tsconfig.json og kjør applikasjonen med ng build --prod --watch=auto. Du bør se feilen om å overskrive JS-filen i node_module, endre ganske enkelt en ts-fil, den skal bygge på nytt siden --watch=auto er i kommandoen, men denne gangen med suksess.

Svar #1

Hvis du prøver å importere et bibliotek til Angular 2+, bør du gjøre det inne i angular-cli.json.

Der har du en scripts-nøkkel hvor du bør konfigurere de ønskede importene. De er generelt som:

{
    ...
    "scripts": [
        "../node_modules/MODULE/file.js"
    ],
    ...
}

Du kan også importere biblioteket (ikke anbefalt) inne i din hoved index.html, ved å bruke <script src="/sti_relativ_til_roten/fil.js">

https://github.com/angular/angular-cli/wiki/angular-cli

https://github.com/angular/angular-cli/wiki/stories-global-scripts

Angular Cli Webpack, hvordan legge til eller pakke eksterne js-filer?

Svar #2

Har du prøvd å oppgradere det til Angular 6? Kanskje de har fikset dette i den nye versjonen.

ng update @angular/cli

Relaterte artikler