从systemjs.config加载节点模块

时间:2017-05-20 10:12:10

标签: angular systemjs

我正在开发一个带有打字稿的AngularJS2应用程序。我的一个文件使用nodejs模块。现在我已经使用npm安装了@ types / node,但是,运行应用程序会出错:

  

获取http://localhost:4400/util 404(未找到)

这里的问题是,由于我的一个文件导入了util nodejs模块,因此systemjs不知道找到所需模块的确切位置,因此它可以得到遵守。如何解决此问题以便将其解析为/node_modules/@types/node/index.d.ts或类似的内容?

systemjs.config.ts:

declare var SystemJS: SystemJSLoader.System;

const ngBundles: {[name: string]: string} = [
    'animations',
    'animations/browser',
    'core',
    'common',
    'platform-browser',
    'compiler',
    'platform-browser/animations',
    'platform-browser-dynamic',
    'router',
    'http',
    'router/upgrade',
    'forms',
    'upgrade',
    'upgrade/static',
    'angular-in-memory-web-api'
].reduce((objMap, bundle) => {
    let name = '@angular/' + bundle;
    objMap[name] = `npm:${name}/bundles/${bundle.replace(/\//g, '-')}.umd.js`;
    return objMap;
}, Object.create(null));


const mappings: {[name: string]: string} = [
    'rxjs',
    'typescript',
    'angular2-uuid'
].reduce((objMap, bundle) => {
    objMap[bundle] = `npm:${bundle}`;
    return objMap;
}, Object.create(null));

SystemJS.config({
    // defaultJSExtensions: true,

    bundles: {
        // 'npm:@types/node': ['util']
    },

    typescriptOptions: {
        tsconfig: 'true'
    },

    meta: {
        'util': {
            format: 'esm',
            deps: [
                'npm:@types/node'
            ]
        }
    },

    packageConfigPaths: [
        'npm:@angular/*/package.json',
        'npm:@types/*/package.json',
        'npm:*/package.json'
    ],

    paths: {
        // paths serve as alias
        'npm:': 'node_modules/',
        'app/*': '/app/*'
    },

    transpiler: 'typescript',

    map: Object.assign({
        'models': 'app/shared/models',
        'subscription/': 'app/modules/subscription/',
        'ts': 'npm:plugin-typescript/lib/plugin.js',

        '@angular/*' : 'npm:@angular/*',
        '@types/*': 'npm:@types/*'
    }, ngBundles, mappings),

    packages: {
        app: {
            defaultExtension: 'js',
            main: 'main',
            format: 'cjs',
            meta: {
                './*.js': {
                    loader: 'systemjs-angular-loader.js'
                }
            },
            map: {

            }
        },

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

        typescript: {
            main: 'lib/typescript.js',
            meta: {
                'lib/typescript.js': {
                    'exports': 'ts'
                }
            }
        },

        // rxjs: {
        //     main: 'Rx.js',
        //     defaultExtension: 'js'
        // }
    }
});

的package.json

{
  "name": "angular-io-example",
  "version": "1.0.0",
  "private": true,
  "description": "Example project forked from angular/quickstart",
  "scripts": {
    "test:once": "karma start karma.conf.js --single-run",
    "serve": "lite-server -c=bs-config.json",
    "test": "concurrently \"grunt build:watch\" \"karma start karma.conf.js\"",
    "build:upgrade": "tsc",
    "serve:upgrade": "http-server",
    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
    "serve:aot": "lite-server -c bs-config.aot.json",
    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
    "copy-dist-files": "node ./copy-dist-files.js",
    "i18n": "ng-xi18n"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "~4.0.0",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/compiler-cli": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/platform-server": "~4.0.0",
    "@angular/router": "~4.0.0",
    "@angular/tsc-wrapped": "~4.0.0",
    "@angular/upgrade": "~4.0.0",
    "angular-in-memory-web-api": "~0.3.1",
    "angular2-uuid": "^1.1.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "^5.4.0",
    "systemjs": "~0.20.12",
    "zone.js": "^0.8.11"
  },
  "devDependencies": {
    "@types/angular": "^1.5.16",
    "@types/angular-animate": "^1.5.5",
    "@types/angular-cookies": "^1.4.2",
    "@types/angular-mocks": "^1.5.5",
    "@types/angular-resource": "^1.5.6",
    "@types/angular-route": "^1.3.2",
    "@types/angular-sanitize": "^1.3.3",
    "@types/del": "^2.2.32",
    "@types/gulp": "^4.0.3",
    "@types/gulp-sourcemaps": "0.0.30",
    "@types/gulp-tslint": "^3.6.31",
    "@types/gulp-typescript": "^2.13.0",
    "@types/gulp-util": "^3.0.31",
    "@types/jasmine": "2.5.36",
    "@types/node": "^7.0.21",
    "@types/run-sequence": "0.0.29",
    "@types/systemjs": "^0.20.2",
    "@types/zone.js": "^0.5.12",
    "angular2-uuid": "^1.1.1",
    "babel-cli": "^6.16.0",
    "babel-preset-angular2": "^0.0.2",
    "babel-preset-es2015": "^6.16.0",
    "canonical-path": "0.0.2",
    "concurrently": "^3.0.0",
    "cpx": "^1.5.0",
    "electron": "~1.6.8",
    "gulp": "^3.9.1",
    "gulp-print": "^2.0.1",
    "gulp-tslint": "^8.0.0",
    "http-server": "^0.9.0",
    "jasmine": "~2.4.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.2",
    "phantomjs-prebuilt": "^2.1.7",
    "plugin-typescript": "^7.0.6",
    "protractor": "~4.0.14",
    "rollup": "^0.41.6",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "run-sequence": "^1.2.2",
    "source-map-explorer": "^1.3.2",
    "tslint": "^5.2.0",
    "typescript": "^2.3.2"
  },
  "repository": {}
}

0 个答案:

没有答案