Wie externe Javascript-Funktion, die in separaten Datei unter Asset-Ordner in Angular-Komponente ist aufgerufen?

Question

//Way 1 - Not working 
import { LoadCarouselAndPopup } from '../../../assets/js/main.js'; 
LoadCarouselAndPopup(); 

//Way 2 - Not working 
declare var System: any; 
System.import('../../../assets/js/main.js') 
    .then(xJS => { 
     xJS.LoadCarouselAndPopup(); 
    }); 

}

Ich habe über zwei Wege versucht.

In erster Linie kann ich den Code nicht kompilieren, weil es Fehler wie "Fehler TS5055: Kann Datei 'main.js' schreiben, weil es Eingabedatei überschreiben würde". In diesem Fall habe ich auch "allowJs: true" hinzugefügt.

In Weg 2, bekam ich Fehler wie „Eigenschaft nicht lesen kann‚nennen‘undefinierten“ ..

Hilf mir, dieses Problem zu lösen. Danke im Voraus.

Answer 1

Soweit ich sehe, verwenden Sie angular cli. Sie haben Ihr Skript in die cliconfig geladen. Hier ist das Wiki, wie Sie erreichen können: https://github.com/angular/angular-cli/wiki/stories-global-scripts

Answer 2

Wie ich Ihre Ordnerstruktur in Bildern gesehen habe, glaube ich, dass Sie Angle-CLI für diese verwenden, so dass Sie Ihre externen Skripts einschließen können, indem Sie den Pfad dieser Skripts in .angular-cli.json Datei in Skripten Array

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "dummy-project" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css" 
     ], 
     "scripts": ['assets/filename.js], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "src/tsconfig.spec.json", 
     "exclude": "**/node_modules/**" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json", 
     "exclude": "**/node_modules/**" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "component": {} 
    } 
}