ERROR in Error遇到静态解析符号值。引用本地（非导出）符号

时间：2017-04-22 10:24:37

标签： angular angular-cli

我在项目Angular2项目中应用了IziToast，代码是：

SELECT COUNT(a.tappe_id) - COUNT(b.tappe_id)
FROM tappesesjon a, tappesesjon b
WHERE  YEAR(a.tappedato) = YEAR(CURDATE())
    AND a.tappedato = DATE_ADD(b.tappedato, INTERVAL 1 YEAR)
GROUP BY MONTH(a.tappedato);

iziToast.service.ts 

import { OpaqueToken } from '@angular/core';

export let TOASTR_TOKEN = new OpaqueToken('iziToast')

我的模块看起来像： shared.module.ts 

export interface IziToast {
    success( message : messageJSON) : void ;
    info(message : messageJSON) : void ;
    warning(message : messageJSON) : void ;
    error(message : messageJSON) : void;
}
export interface messageJSON {
    title : string,
    message : string,
    position : string,
    color ?: string,
    layout ?: number
}

我已经在我的构造函数中导入了：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { TranslateModule } from 'ng2-translate/ng2-translate';
import { ToasterModule } from 'angular2-toaster/angular2-toaster';

import { AccordionModule } from 'ng2-bootstrap/accordion';
import { AlertModule } from 'ng2-bootstrap/alert';
import { ButtonsModule } from 'ng2-bootstrap/buttons';
import { CarouselModule } from 'ng2-bootstrap/carousel';
import { CollapseModule } from 'ng2-bootstrap/collapse';
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { ModalModule } from 'ng2-bootstrap/modal';
import { PaginationModule } from 'ng2-bootstrap/pagination';
import { ProgressbarModule } from 'ng2-bootstrap/progressbar';
import { RatingModule } from 'ng2-bootstrap/rating';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { TimepickerModule } from 'ng2-bootstrap/timepicker';
import { TooltipModule } from 'ng2-bootstrap/tooltip';
import { TypeaheadModule } from 'ng2-bootstrap/typeahead';
/*
    The presence of moment.js in DatepickerModule breaks lazyload. See:
        https://github.com/angular/angular-cli/issues/2496
        https://github.com/valor-software/ng2-bootstrap/issues/1187
*/
// import { DatepickerModule } from 'ng2-bootstrap/datepicker';

import { FlotDirective } from './directives/flot/flot.directive';
import { SparklineDirective } from './directives/sparkline/sparkline.directive';
import { EasypiechartDirective } from './directives/easypiechart/easypiechart.directive';
import { ColorsService } from './colors/colors.service';
import { CheckallDirective } from './directives/checkall/checkall.directive';
import { VectormapDirective } from './directives/vectormap/vectormap.directive';
import { NowDirective } from './directives/now/now.directive';
import { ScrollableDirective } from './directives/scrollable/scrollable.directive';
import { JqcloudDirective } from './directives/jqcloud/jqcloud.directive';
import { IziToast } from "./izitoastr.service";
import { TOASTR_TOKEN } from "./toastr-token.service";
import {ToastrMessageService} from "./toastr-message.service";

declare let iziToast: IziToast

// https://angular.io/styleguide#!#04-10
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        TranslateModule,
        AccordionModule.forRoot(),
        AlertModule.forRoot(),
        ButtonsModule.forRoot(),
        CarouselModule.forRoot(),
        CollapseModule.forRoot(),
        //.forRoot() DatepickerModule,
        DropdownModule.forRoot(),
        ModalModule.forRoot(),
        PaginationModule.forRoot(),
        ProgressbarModule.forRoot(),
        RatingModule.forRoot(),
        TabsModule.forRoot(),
        TimepickerModule.forRoot(),
        TooltipModule.forRoot(),
        TypeaheadModule.forRoot(),
        ToasterModule
    ],
    providers: [
        ColorsService,
        { provide : TOASTR_TOKEN, useValue : iziToast },
        ToastrMessageService
    ],
    declarations: [
        FlotDirective,
        SparklineDirective,
        EasypiechartDirective,
        CheckallDirective,
        VectormapDirective,
        NowDirective,
        ScrollableDirective,
        JqcloudDirective
    ],
    exports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        TranslateModule,
        RouterModule,
        AccordionModule,
        AlertModule,
        ButtonsModule,
        CarouselModule,
        CollapseModule,
        // DatepickerModule,
        DropdownModule,
        ModalModule,
        PaginationModule,
        ProgressbarModule,
        RatingModule,
        TabsModule,
        TimepickerModule,
        TooltipModule,
        TypeaheadModule,
        ToasterModule,
        FlotDirective,
        SparklineDirective,
        EasypiechartDirective,
        CheckallDirective,
        VectormapDirective,
        NowDirective,
        ScrollableDirective,
        JqcloudDirective
    ]
})

// https://github.com/ocombe/ng2-translate/issues/209
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule
        };
    }
}

在我开始运行@Inject(TOASTR_TOKEN) private toast : IziToast, 时，它会给我这个错误

ng serve

当我更改某些代码时，它会重新编译并且错误消失。它只在开始时给出。

由于

修改

我的角度cli版本是：

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'iziToast'. Consider exporting the symbol (position 42:5 in the original .ts file), resolving symbol SharedModule in /Users/Razmjo/workstation/nodejs/jobsaf/admin-panel/src/app/shared/shared.module.ts

控制台日志屏幕截图：

Screen shot

它第一次出错，但是当我更改代码并重新编译时，错误就消失了

EDIT2

角cli.json：

$ ng --version

Your global Angular CLI version (1.0.0) is greater than your local
version (1.0.0-rc.1). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0-rc.1
node: 7.4.0
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.10
NETLINKS-Nimat:admin-panel Razmjo$

style.css：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "admin-panel"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "app/core/preloader/preloader.scss",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "app/core/preloader/preloader.ts",
        "../node_modules/flot/jquery.flot.js",
        "../node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
        "../node_modules/flot/jquery.flot.resize.js",
        "../node_modules/flot/jquery.flot.pie.js",
        "../node_modules/flot/jquery.flot.time.js",
        "../node_modules/flot/jquery.flot.categories.js",
        "../node_modules/jquery.flot.spline/jquery.flot.spline.js",
        "../node_modules/jquery-sparkline/jquery.sparkline.js",
        "../node_modules/easy-pie-chart/dist/easypiechart.js",
        "../node_modules/chart.js/dist/Chart.bundle.js",
        "../node_modules/jqcloud2/dist/jqcloud.js",
        "../node_modules/bootstrap/js/modal.js",
        "../node_modules/bootstrap/js/dropdown.js",
        "../node_modules/bootstrap/js/tooltip.js",
        "../node_modules/summernote/dist/summernote.js",
        "../node_modules/moment/min/moment-with-locales.min.js",
        "../node_modules/fullcalendar/dist/fullcalendar.js",
        "../node_modules/moment/moment.js",
        "./modernizr.js",
        "../node_modules/ika.jvectormap/jquery-jvectormap-1.2.2.min.js",
        "../node_modules/ika.jvectormap/jquery-jvectormap-world-mill-en.js",
        "../node_modules/ika.jvectormap/jquery-jvectormap-us-mill-en.js",
        "../node_modules/jquery-slimscroll/jquery.slimscroll.js",
        "../node_modules/codemirror/lib/codemirror.js",
        "../node_modules/codemirror/mode/javascript/javascript.js",
        "../node_modules/codemirror/mode/xml/xml.js",
        "../node_modules/codemirror/mode/htmlmixed/htmlmixed.js",
        "../node_modules/codemirror/mode/css/css.js",
        "../node_modules/jsonpath-plus/lib/jsonpath.js",
        "assets/lib/primus/primus.js",
        "../node_modules/izitoast/dist/js/iziToast.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

3 个答案:

答案 0 :(得分：0)

问题是，你需要导出这个东西，并初始化它。

export let iziToast: IziToast = {...};

答案 1 :(得分：0)

IziToast已经可用于角度2 fieldSubTpl。请使用：https://github.com/plauzul/ng2-izitoast

答案 2 :(得分：0)

我知道这对党来说有点晚了，但是我今天遇到了这个问题，所以我想为了繁荣起见，在这里发布我的解决方案。

除了使用Angular 7并创建一个库外，我的情况与op非常相似，我的模块代码是：

declare var AzureStorage: IAzureStorage;

export function azureBlobStorageFactory(): IBlobStorage {
  return AzureStorage.Blob;
}

@NgModule({
  imports: [
    CommonModule
  ]
})
export class AzureStorageModule {

  public static forRoot(options?: AzureStorageOptions): ModuleWithProviders {
    return {
      ngModule: AzureStorageModule,
      providers: [
        {
          provide: AzureStorageOptionsToken,
          useValue: {
            ...options
          }
        },
        {
          provide: BLOB_STORAGE_TOKEN,
          useFactory: azureBlobStorageFactory
        }
      ]
    };
  }

}

运行ng build --project=<project_name>时出现相同的构建错误

ERROR in Error encountered resolving symbol values statically. Reference to a local (non-exported) symbol 'AzureStorage'. Consider exporting the symbol

事实证明，要解决构建错误，我要做的就是将声明和工厂函数移到单独的文件中，并将它们相应地导入模块中。所以我修改后的代码看起来像这样：

在types.ts 

declare var AzureStorage: IAzureStorage;

export function azureBlobStorageFactory(): IBlobStorage {
  return AzureStorage.Blob;
}

我的模块现在看起来像

import { azureBlobStorageFactory } from './types';

@NgModule({
  imports: [
    CommonModule
  ]
})
export class AzureStorageModule {

  public static forRoot(options?: AzureStorageOptions): ModuleWithProviders {
    return {
      ngModule: AzureStorageModule,
      providers: [
        {
          provide: AzureStorageOptionsToken,
          useValue: {
            ...options
          }
        },
        {
          provide: BLOB_STORAGE_TOKEN,
          useFactory: azureBlobStorageFactory
        }
      ]
    };
  }

}
相关问题
最新问题