Question

我正在关注此（https://www.thepolyglotdeveloper.com/2016/01/include-external-javascript-libraries-in-an-angular-2-typescript-project/）以导入外部库。但是我无法以同样的方式模仿它。我收到了以下错误，

获取http://127.0.0.1:8080/src/rxjs/Subject 404（未找到）。

在src文件夹中，我有两个文件夹，app和js以及两个文件index.html和tsconfig.json。

App.ts

declare var jsSHA: any;

@Component({
    selector: "my-app",
    templateUrl: "app/app.html",
    directives: []
})

class App {

    shaObj: any;
    hash: String;

    constructor() {
        this.shaObj = new jsSHA("SHA-512", "TEXT");
        this.shaObj.update("This is a test");
        this.hash = this.shaObj.getHash("HEX");
    }

}

bootstrap(App, []);

app.html

<h1>SHA-512 Hash</h1>

<p>String: This is a test</p>
<p>HEX: {{hash}}</p>

的index.html

<html>
    <head>
        <title>Angular 2 QuickStart</title>
        <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="../node_modules/systemjs/dist/system.src.js"></script>
        <script src="../node_modules/rxjs/bundles/Rx.js"></script>
        <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="js/sha.js"></script>
        <script>
            System.config({
                packages: {'app': {defaultExtension: 'js'}}
            });
            System.import('app/app');
        </script>
    </head>
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

system.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'underscore': 'node_modules/underscore/underscore.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './app.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

如果有人对这个问题有任何疑问，请给我建议。

Answer 1

如果您的sha.js是您自己编写的模块，则应添加sha.d.ts文件，以便在您的应用中导入它： guide fo this

如果是外部库，请将其安装为常规npm包：

npm install —save sha

如何在angular2中导入外部库？

1 个答案: