Question

项目在使用CDN引用但不使用脚本引用时运行。我已经检查过，Gulp正在将正确的文件复制到wwwroot文件夹中。

systemjs.config.js

这有效：

(function (global) {

var ngVer = '@2.0.0-rc.4';
var routerVer = '@3.0.0-beta.1';
var formsVer = '@0.2.0';

var map = {
    'app': 'app',
    '@angular': 'https://npmcdn.com/@angular',
    '@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
    '@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js'
};

var packages = {
    'app': { main: 'main.ts', defaultExtension: 'ts' },
    'rxjs': { defaultExtension: 'js' }
};

var ngPackageNames = [
  'common',
  'compiler',
  'core',
  'http',
  'platform-browser',
  'platform-browser-dynamic',
  'upgrade'
];

ngPackageNames.forEach(function (pkgName) {
    map['@angular/' + pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
});

ngPackageNames.forEach(function (pkgName) {

    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' };

var config = {
    transpiler: 'ts',
    typescriptOptions: {
        tsconfig: true
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    map: map,
    packages: packages
};

System.config(config);

})(this);

此代码段不起作用：

var map = {
    'app': 'app',
    '@angular': 'https://npmcdn.com/@angular',
    '@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
    '@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
    'rxjs': 'node_modules/rxjs',
    'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js'
};

我已将Gulp文件配置为复制依赖项：

gulpfile.js

var gulp = require('gulp');
gulp.task('copy', function () {
gulp.src('./node_modules/core-js/**/*.js')
    .pipe(gulp.dest('./wwwroot/node_modules/core-js'));
gulp.src('./node_modules/@angular/**/*.js')
    .pipe(gulp.dest('./wwwroot/node_modules/@angular'));
gulp.src('./node_modules/zone.js/**/*.js')
    .pipe(gulp.dest('./wwwroot/node_modules/zone.js'));
gulp.src('./node_modules/systemjs/**/*.js')
    .pipe(gulp.dest('./wwwroot/node_modules/systemjs'));
gulp.src('./node_modules/reflect-metadata/**/*.js')
    .pipe(gulp.dest('./wwwroot/node_modules/reflect-metadata'));
gulp.src('./node_modules/rxjs/**/*.js')
    .pipe(gulp.dest('./wwwroot/node_modules/rxjs'));
gulp.src('./typings/**/*.*')
    .pipe(gulp.dest('./wwwroot/typings'));
});
gulp.task('default', ['copy']);

Answer 1

错误似乎是：

'app': { main: 'main.ts', defaultExtension: 'ts' },

应该是：

'app': { main: 'main.js', defaultExtension: 'js' },

这有效：

(function (global) {

var map = {
    'app': 'app',
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs'
};

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
};

var ngPackageNames = [
  'common',
  'compiler',
  'core',
  'forms',
  'http',
  'platform-browser',
  'platform-browser-dynamic',
  'router',
  'router-deprecated',
  'upgrade'
];

function packIndex(pkgName) {
    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}

function packUmd(pkgName) {
    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}

var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

ngPackageNames.forEach(setPackageConfig);

var config = {
    map: map,
    packages: packages
};

System.config(config);

})(this);

使用ASP.NET Core在systemjs.config.js中使用Angular 2 RC 4 rxjs。使用CDN时出现错误

1 个答案: