嗨，我很欣赏这些是一种痛苦。
将 Angular 更新到版本 6 并将 rxjs 更新到版本 6 后，我们收到很多浏览器错误，系统无法实例化许多包。
我们使用 node_modules 和 systemjs.config.server.js 的组合，而不是试图开始争论一个是否比另一个更好，如果有任何改进，请告诉我。
包.json
{
"version": "1.0.0",
"name": "infrastructure-annual-reporting",
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.0.1",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"angular-date-value-accessor": "^0.0.2",
"bootstrap": "^3.3.7",
"core-js": "^2.5.6",
"hammerjs": "^2.0.8",
"ng2-bs3-modal": "^0.13.0",
"ngx-accordion": "^0.0.17",
"nodemailer": "^4.6.4",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"rxjs-tslint": "^0.1.3",
"socks": "^2.2.0",
"systemjs": "^0.21.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/hammerjs": "^2.0.35",
"@types/jasmine": "^2.8.7",
"@types/node": "^10.0.6",
"codelyzer": "^4.3.0",
"jasmine": "^3.1.0",
"karma": "^2.0.2",
"lite-server": "^2.3.0",
"lodash": "^4.17.10",
"protractor": "^5.3.1",
"ts-node": "^6.0.3",
"tslint": "^5.10.0",
"typescript": "^2.8.3"
},
"keywords": [],
"license": "MIT",
"peerDependencies": {
"@angular/core": ">=2.0.0",
"@angular/common": ">=2.0.0",
"@angular/compiler": ">=2.0.0",
"@angular/platform-browser": ">=2.0.0",
"@angular/platform-browser-dynamic": ">=2.0.0",
"@angular/cdk": "6.0.1"
},
"repository": {},
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
}
}
systemjs.config.server.js
(function (global) {
// map tells the System loader where to look for things
var paths = {
'npm:': "https://unpkg.com/"
};
var map = {
'app': "app", // 'dist',
'@angular': "node_modules/@angular",
'angular2-in-memory-web-api': "node_modules/angular2-in-memory-web-api",
'rxjs': "npm:rxjs",
'@angular/platform-browser/animations': "npm:@angular/platform-browser/bundles/platform-browser-animations.umd.min.js",
"ngx-accordion": "npm:ngx-accordion@0.0.17/index.js",
'@angular/common/http': "npm:@angular/common/bundles/common-http.umd.js",
'@angular/animations/browser': "npm:@angular/animations@5.2.10/bundles/animations-browser.umd.js",
'ng2-bs3-modal': "npm:ng2-bs3-modal/bundles/ng2-bs3-modal.umd.js",
'hammerjs':"npm:hammerjs/hammer.js",
// CDK individual packages
'@angular/cdk/bidi': "npm:@angular/cdk/bundles/cdk-bidi.umd.js",
'@angular/cdk/platform': "npm:@angular/cdk/bundles/cdk-platform.umd.js",
'@angular/cdk/keycodes': "npm:@angular/cdk/bundles/cdk-keycodes.umd.js",
'@angular/cdk/collections': "npm:@angular/cdk/bundles/cdk-collections.umd.js",
'@angular/cdk/portal': "npm:@angular/cdk/bundles/cdk-portal.umd.js",
'@angular/cdk/coercion': "npm:@angular/cdk/bundles/cdk-coercion.umd.js",
'@angular/cdk/overlay': "npm:@angular/cdk/bundles/cdk-overlay.umd.js",
'@angular/cdk/accordion': "npm:@angular/cdk/bundles/cdk-accordion.umd.js",
'@angular/cdk/observers': "npm:@angular/cdk/bundles/cdk-observers.umd.js",
'@angular/cdk/layout': "npm:@angular/cdk/bundles/cdk-layout.umd.js",
'@angular/cdk/scrolling': "npm:@angular/cdk/bundles/cdk-scrolling.umd.js",
'@angular/cdk/table': "npm:@angular/cdk/bundles/cdk-table.umd.js",
'@angular/cdk/stepper': "npm:@angular/cdk/bundles/cdk-stepper.umd.js",
'@angular/cdk/a11y': "npm:@angular/cdk/bundles/cdk-a11y.umd.js",
'@angular/cdk/tree' : "node_modules/@angular/cdk@6.0.1/tree",
'tslib': "npm:tslib/tslib.js",
'rxjs/operators' : "npm:rxjs/operators/"
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: "main.js", defaultExtension: "js" },
'rxjs': { defaultExtension: "js" },
'rxjs-compact': { defaultExtension: "js" },
'angular2-in-memory-web-api': { main: "index.js", defaultExtension: "js" }
};
var ngPackageNames = [
"animations",
"common",
"compiler",
"core",
"forms",
"http",
"material",
"platform-browser",
"platform-browser-dynamic",
"router"
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages["@angular/" + pkgName] = { main: "index.js", defaultExtension: "js" };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages["@angular/" + pkgName] = { main: "bundles/" + pkgName + ".umd.js", defaultExtension: "js" };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
paths: paths,
map: map,
packages: packages
};
System.config(config);
})(this);
我们在浏览器中看到的错误是
