javascript - Problem med att lägga till tredjeparts (extern) js-bibliotek i angular5

Jag arbetar med att lägga till jsplumb community js-biblioteksversionen med Angular 5-applikationen (Angular CLI: 1.6.1).

Med den första versionen utan någon konfiguration i tsconfig.json får jag följande fel.

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öljande fel

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.

Enligt tsconfig FAQ

Varför får jag felet TS5055: Kan inte skriva filen 'xxx.js' eftersom det skulle skriva över ingångsfilen.

med en outDir ("outDir": "./dist/out-tsc") bör detta problem vara löst. Detta är redan inställt i min tsconfig.

Om vi lägger till noEmit till true bygger det helt enkelt applikationen, utan att inkludera någon js, vi får en tom vit skärm.

Låt mig veta om någon har försökt inkludera extern JS med nya Angular CLI och stött på samma typ av fel och vad lösningen är för det samma.

Utan några ytterligare alternativ tillagda i tsconfig.json, om jag försöker ändra någon ts-fil kommer applikationen att kompileras med framgång och jag kan arbeta. Men detta hjälper inte när jag kör ng build, för att skapa en distribuerbar binär fil.

Uppdateringslösning: tills felet i CLI är åtgärdat. För utveckling (ng serve) ta bort allowJs från tsconfig.json, när du får ett fel vid tillägg av allowJs, modifiera helt enkelt en ts-fil för att kompilera om applikationen, denna gång kommer den att kompilera med framgång. För produktion eller distribution lägg tillbaka allowJs i tsconfig.json, kör applikationen med ng build --prod --watch=auto du bör se felet om att åsidosätta JS-filen i node_module, modifiera enkelt en ts-fil så ska den bygga om eftersom --watch=auto är med i kommandot men denna gång med framgång.

Svar #1

Om du försöker importera ett bibliotek till Angular 2+, bör du göra det inne i angular-cli.json.

Där har du en scripts-nyckel där du bör konfigurera de önskade importerna. De är generellt som:

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

Du kan även importera biblioteket (ej rekommenderat) inuti din huvud index.html, med <script src="/sökväg_relativ_till_rot/file.js">

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

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

Angular Cli Webpack, hur man lägger till eller bundlar externa js-filer?

Svar #2

har du försökt uppgradera det till Angular 6? kanske har de fixat detta i den nya versionen.

ng update @angular/cli

Relaterade artiklar