奇怪的呼吁在angular2应用程序https://unpkg.com

时间：2017-05-16 02:19:32

标签： angular typescript

我的angular2应用程序有以下结构：

root
|____src
|_____|____index.html
|_____|____main.ts
|_____|____package.json
|_____|____style.css
|_____|____systemjs-config.js
|_____|____systemjs-angular-loader.js
|_____|____tsconfig.json
|_____|____app
|_____|_____|____components
|_____|_____|______|_________... // bunch of components
|_____|_____|______|_________app.component.css
|_____|_____|______|_________app.component.ts
|_____|_____|______|_________app.component.html   
|_____|_____|____directives/
|_____|_____|____modules/
|_____|_____|____services/
|_____|_____|____shared/
|_____|_____|_____|_____models/
|_____|_____|_____|_____index.ts

现在出于某种原因，每当我运行应用程序并尝试从shared文件夹导入某些内容时，它都会忽略该目录，而是搜索要在https://unpkg.com/@angular/shared/bundles/shared.umd.js中导入的文件。这当然无法加载404错误，但我甚至不知道为什么它首先在那里看，因为我不知道这样的文件存在于何处或者为什么需要它。

我该怎么做才能解决这个问题？我已经挣扎了几个小时。

systemjs-config.js 

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        typescriptOptions: {
            // Copy of compiler options in standard tsconfig.json
            "target": "es5",
            "module": "commonjs",
            "moduleResolution": "node",
            "sourceMap": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "lib": ["es2015", "dom"],
            "noImplicitAny": true,
            "suppressImplicitAnyIndexErrors": true
        },
        meta: {
            'typescript': {
                "exports": "ts"
            }
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': './app',
            'shared': './app/shared',

            // angular bundles
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/shared/bundles/shared.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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
            '@angular/forms': 'npm:@angular/subscription-form/bundles/subscription-form.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs@5.0.1',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
            'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
            'angular2-uuid': 'npm:angular2-uuid',

            // my stuff

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'js',
                meta: {
                    './*.js': {
                        loader: 'systemjs-angular-loader.js'
                    }
                }
            },
            shared: {
                defaultExtension: 'js',
                main: 'index.js'
            },

            rxjs: {
                defaultExtension: 'js'
            }
        }
    });

})(this);

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

从shared文件夹导入内容的示例：

// app/services/tweets.service.ts
import {Tweet, UserVoteType} from '../shared/models';

如果有帮助，这里是主要的组件代码：

import {Component, ElementRef, ViewChild} from '@angular/core';
import {TweetService} from '../../services/tweets.service';
import {Tweet, IVoteCount, UserVoteType, ILikeable} from '../../shared/models';

@Component({
    selector: 'app-main',
    templateUrl: './component.html',
    styleUrls: ['./component.css'],
    providers: [TweetService]
})
export class MainComponent {
    private isActive = true;
    private title = 'Angular App';
    private tweets: Tweet[];

    @ViewChild('someText') private inputElement: ElementRef;

    VoteType = UserVoteType;

    private post: ILikeable = {
        isLiked: false,
    };

    private likeable: IVoteCount = {
        numLikes: 122,
        userVote: UserVoteType.Neutral
    };

    private iVotes: IVoteCount = {
        numLikes: 10,
        userVote: UserVoteType.Negative
    };

    constructor(private tweetService: TweetService) {
        this.tweets = tweetService.getTweets();
    }

    private onClick(event: MouseEvent) {
        event.stopPropagation();
        console.log(`Clicked! ${event.target}`, event.clientX);
    }

    private onDivClick(): void {
        console.log('Handled by Div');
    }

    private onText(): void {
        this.title = this.inputElement.nativeElement.value;
    }

    private clearText(): void {
        this.title = '';
    }

    private onSimpleLikeButtonPressed(liked: Boolean): void {
        this.likeable.userVote = liked.valueOf() ? UserVoteType.Positive : UserVoteType.Neutral;
        this.likeable.numLikes += liked.valueOf() ? 1 : -1;
    }

    private onVoteChanged(voteEvent: Number): void {
        let prevVote = this.iVotes.userVote;
        if (voteEvent === UserVoteType.Neutral) {
            this.iVotes.numLikes -= prevVote;
        } else {
            this.iVotes.numLikes += voteEvent.valueOf();
        }
        this.iVotes.userVote = voteEvent.valueOf();

        console.log(JSON.stringify(this.iVotes));
    }
}

大约有10个组件，所以我认为发布所有10个组件对任何人都没有好处。

1 个答案:

答案 0 :(得分：0)

好的问题解决了。当我使用我的IDE进行大规模重命名时，看起来我搞砸了。

固定systemjs-config.js如下：

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        typescriptOptions: {
            // Copy of compiler options in standard tsconfig.json
            "target": "es5",
            "module": "commonjs",
            "moduleResolution": "node",
            "sourceMap": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "lib": ["es2015", "dom"],
            "noImplicitAny": true,
            "suppressImplicitAnyIndexErrors": true
        },
        meta: {
            'typescript': {
                "exports": "ts"
            }
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': 'app',
            'models': 'app/shared/models',

            // angular bundles
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs@5.0.1',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
            'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
            'angular2-uuid': 'npm:angular2-uuid',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'js',
                meta: {
                    './*.js': {
                        loader: 'systemjs-angular-loader.js'
                    }
                }
            },

            models: {
                main: 'index.js',
                defaultExtension: 'js'
            },

            rxjs: {
                defaultExtension: 'js'
            }
        }
    });

})(this);

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

注意@angular/common和@angular/forms

相关问题
最新问题