Question

我正在尝试使用我发布的角度模块。导入核心模块时发生错误。下面列出了core.module.ts，rollup config和core module package.json。

    import {
    ModuleWithProviders,
    NgModule,
    Optional,
    SkipSelf
} from '@angular/core';
import { CommonModule } from '@angular/common';
import {
    Http,
    HttpModule,
    RequestOptions
} from '@angular/http';

import { BrandConfig } from './shared/config/brand.config';
import { SSOConfig } from './shared/config/sso.config';
import { ApiRouteConfig } from './shared/config/api-route.config';

import { FlashMessageService } from './shared/flash-messages/services/flash-messages.service';
import { CustomRequestOptions } from './shared/custom-request-options/custom-request-options.service';

import { IUserSessionToken } from './shared/auth/user-session.interface';
import { KeycloakSSOUserService } from './shared/auth/keycloak-sso-user.service';
import { KeycloakService } from './shared/auth/keycloak.service';
import { IAuthToken } from './shared/auth/IAuth.interface';
import { AuthUserGuardService } from './shared/auth/auth-user.guard.service';

import { CurrentSessionUserComponent } from './shared/components/current-session-user/current-session-user';
import { LoginBoxComponent } from './shared/components/login-box/login-box.component';
import { FlashMessagesComponent } from './shared/flash-messages/flash-messages.component';

const COMPONENTS = [
    CurrentSessionUserComponent,
    LoginBoxComponent,
    FlashMessagesComponent
];

@NgModule({
    imports     : [
        CommonModule,
        HttpModule
    ],
    declarations: [
        ...COMPONENTS
    ],
    exports     : [
        CommonModule,
        HttpModule,
        ...COMPONENTS
    ]
})
export class CoreModule {
    static forRoot(brandConfig: BrandConfig,
                   ssoConfig: SSOConfig,
                   apiRouteConfig: ApiRouteConfig): ModuleWithProviders {
        if (!brandConfig) {
            throw new Error('Core module should be configured with BrandConfig.');
        }

        if (!ssoConfig) {
            throw new Error('Core module should be configured with SSOConfig');
        }

        if (!apiRouteConfig) {
            throw new Error('Core module should be configured with API Routes config');
        }

        let providers = [
            {
                provide : BrandConfig,
                useValue: brandConfig
            },
            {
                provide : SSOConfig,
                useValue: ssoConfig
            },
            {
                provide : ApiRouteConfig,
                useValue: apiRouteConfig
            },
            {
                provide : IUserSessionToken,
                useClass: KeycloakSSOUserService,
                deps    : [
                    IAuthToken,
                    BrandConfig,
                    Http
                ]
            },
            {
                provide : RequestOptions,
                useClass: CustomRequestOptions,
                deps    : [BrandConfig]
            },
            {
                provide : IAuthToken,
                useClass: KeycloakService,
                deps    : [SSOConfig]
            },
            {
                provide : AuthUserGuardService,
                useClass: AuthUserGuardService,
                deps    : [IAuthToken, IUserSessionToken]
            },
            FlashMessageService
        ];

        return {
            ngModule: CoreModule,
            providers
        };
    }

    constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
        if (parentModule) {
            throw new Error('CoreModule Storefront is already loaded. Import it in the AppModule only');
        }
    }
}

核心模块package.json（此模块已发布）

{
  <-- name is ommited -->
  "version": "0.1.27",
  "description": "Core Module",
  "main": "bundles/core.umd.js",
  "types": "core.module.d.ts",
  "module": "index.js",
  "es2015": "index.js",
  "typings": "index.d.ts",
  "scripts": {
    "clean": "rm -rf node_modules dist && yarn cache clean && npm cache clean && yarn install",
    "transpile": "ngc",
    "package": "rollup -c rollup.config.js",
    "minify": "uglifyjs dist/bundles/core.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/core.umd.min.js",
    "build": "npm run transpile && npm run package  && npm run minify",
    "deploy": "bump patch && cp package.json ./dist/package.json"
  },
  "author": "Viktor Dzundza <victor.dzundza@heg.com>",
  "license": "ISC",
  "devDependencies": {
    "@angular/common": "2.4.9",
    "@angular/compiler": "2.4.9",
    "@angular/compiler-cli": "2.4.9",
    "@angular/core": "2.4.9",
    "@angular/http": "2.4.9",
    "@angular/platform-browser": "2.4.9",
    "@angular/platform-browser-dynamic": "2.4.9",
    "@angular/router": "3.4.4",
    "keycloak-js": "2.5.1",
    "keycloak-js-adapter": "1.0.6",
    "rimraf": "*",
    "rollup": "^0.41.6",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "rxjs": "5.0.1",
    "typescript": "2.2.1",
    "uglify-js": "2.8.12",
    "zone.js": "0.7.2"
  }

}

汇总配置

import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
    entry: 'dist/index.js',
    dest: 'dist/bundles/core.umd.js',
    sourceMap: false,
    moduleName: 'core',
    format: 'umd',
    exports: 'named',
    onwarn: function (warning) {
        // Skip certain warnings

        // should intercept ... but doesn't in some rollup versions
        if (warning.code === 'THIS_IS_UNDEFINED') {
            return;
        }
        // intercepts in some rollup versions
        if (warning.indexOf && warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) {
            return;
        }

        // console.warn everything else
        console.warn(warning.message);
    },
    plugins: [
        commonjs(),
        nodeResolve({jsnext: true, module: true}),
        uglify()
    ]
}

我尝试使用我的模块的应用程序package.json。

{
  "name": "11",
  "version": "0.0.1",
  "description": "11",
  "scripts": {
    "clean": "npm cache clean && yarn cache clean && rm -rf node_modules && npm install",
    "start": "webpack-dev-server --progress --port 8082 --host 0.0.0.0",
    "pretest": "npm run clean",
    "test": "karma start",
    "test_docker": "karma start --browsers PhantomJS --single-run",
    "prebuild:dev": "npm run clean",
    "build": "webpack --config config/webpack.prod.js",
    "build:dev": "rimraf dist && webpack --progress --profile --bail",
    "prebuild:aot:compile": "npm run clean",
    "build:aot:compile": "node_modules/.bin/ngc -p tsconfig-aot.json",
    "build:aot:rollup": "rollup -c rollup-config.js",
    "prelite:aot": "node copy-dist-files.js",
    "lite:aot": "node_modules/lite-server/bin/lite-server -c aot/bs-config.json",
    "map": "node_modules/.bin/source-map-explorer aot/dist/build.js",
    "api": "npm run api:start:server",
    "api:start:server": "json-server --watch ./api/index.js --port 3004"
  },
  "license": "MIT",
  "dependencies": {
    "@vdzundza/core": "0.1.18",
    "@vdzundza/customer-manager": "0.0.40",
    "@vdzundza/shared": "0.0.26",
    "@vdzundza/modal": "0.0.9",
    "@angular/common": "2.4.4",
    "@angular/compiler": "2.4.4",
    "@angular/compiler-cli": "2.4.4",
    "@angular/core": "2.4.4",
    "@angular/forms": "2.4.4",
    "@angular/http": "2.4.4",
    "@angular/platform-browser": "2.4.4",
    "@angular/platform-browser-dynamic": "2.4.4",
    "@angular/platform-server": "2.4.4",
    "@angular/router": "3.4.4",
    "@types/lodash": "4.14.58",
    "angular2-jwt": "0.1.28",
    "angular2-text-mask": "2.1.0",
    "bootstrap": "3.3.7",
    "bootstrap-sass": "3.3.7",
    "core-js": "2.4.1",
    "dotenv": "4.0.0",
    "jquery": "3.1.1",
    "json-server": "0.9.4",
    "keycloak-js": "2.5.1",
    "keycloak-js-adapter": "1.0.6",
    "lodash": "4.17.4",
    "ng2-bs3-modal": "0.10.4",
    "ng2-dnd": "2.1.1",
    "node-sass": "4.3.0",
    "rxjs": "5.0.3",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@types/core-js": "0.9.39",
    "@types/jasmine": "2.5.46",
    "@types/jquery": "2.0.41",
    "@types/node": "7.0.12",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "3.1.2",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.26.1",
    "dotenv": "4.0.0",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "0.10.1",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.26.0",
    "jasmine-core": "2.5.2",
    "json-server": "0.9.4",
    "karma": "1.4.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-jasmine": "1.1.0",
    "karma-phantomjs-launcher": "1.0.2",
    "karma-sourcemap-loader": "0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "2.0.1",
    "lite-server": "2.2.2",
    "node-sass": "4.3.0",
    "null-loader": "0.1.1",
    "phantomjs-prebuilt": "2.1.14",
    "raw-loader": "0.5.1",
    "rimraf": "2.6.1",
    "rollup": "0.41.4",
    "rollup-plugin-commonjs": "7.0.0",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "1.0.1",
    "sass-loader": "6.0.3",
    "source-map-explorer": "1.3.3",
    "style-loader": "0.16.1",
    "tslint": "4.5.1",
    "tslint-loader": "3.4.3",
    "typescript": "2.2.2",
    "webpack": "2.3.2",
    "webpack-dev-server": "2.4.2",
    "webpack-merge": "4.1.0"
  },
  "peerDependencies": {
    "@angular/compiler": "2.4.4",
    "@angular/core": "2.4.4"
  }
}

这是我在控制台中的堆栈跟踪

"Error: Unexpected value '[object Object]' imported by the module 'AppModule'
at SyntaxError.ZoneAwareError (http://localhost:8082/polyfills.js:5539:33)
at SyntaxError.BaseError [as constructor] (http://localhost:8082/vendor.js:187004:16)
at new SyntaxError (http://localhost:8082/vendor.js:11839:16)
at http://localhost:8082/vendor.js:34741:44
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8082/vendor.js:34726:49)
at JitCompiler._loadModules (http://localhost:8082/vendor.js:128197:64)
at JitCompiler._compileModuleAndComponents (http://localhost:8082/vendor.js:128157:52)
at JitCompiler.compileModuleAsync (http://localhost:8082/vendor.js:128123:21)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:8082/vendor.js:91521:25)
at PlatformRef_.bootstrapModule (http://localhost:8082/vendor.js:91496:21)
at Object.1251 (http://localhost:8082/app.js:16:53)
at __webpack_require__ (http://localhost:8082/styles.js:53:30)
at Object.2782 (http://localhost:8082/app.js:491:18)
at __webpack_require__ (http://localhost:8082/styles.js:53:30)
at webpackJsonpCallback (http://localhost:8082/styles.js:24:23)
at http://localhost:8082/app.js:1:1"

我深入调试并发现JitCompiler无法解析coreModule元数据并返回null，因此我收到错误

当我调试调用堆栈时，我发现没有解析ngModule元数据。

JitCompiler无法正确解析ngModule元数据

0 个答案: