2017-04-22 62 views
2

我已经在我的项目Angular2项目中应用IziToast代码:遇到错误时遇到静态解析符号值。参考到本地(非出口)符号

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

export let TOASTR_TOKEN = new OpaqueToken('iziToast') 

iziToast.service.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 
} 

我的模块是这样的: shared.module.ts

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它给我这个错误

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 

当我改变了一些代码,并重新编译和错误消失。它只在开始时给。

感谢

编辑

我的角度CLI版本是:

$ 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$ 

控制台日志屏幕截图:

Screen shot

它在冷杉给出错误吨时间,但是当我改变代码并重新编译,则错误消失

EDIT2

角cli.json:

{ 
    "$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 
    } 
    } 
} 

的style.css:

@import '../node_modules/izitoast/dist/css/iziToast.css'; 
+0

'声明让iziToast:IziToast'这是什么? – yurzui

+0

这是一个全球性的对象 –

+0

它的声明 – yurzui

回答

0

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

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

无法使用导出以及 –

+0

您是否可以捕获您的控制台选项卡? –

+0

什么是shared.module.ts –

0

IziToast已经可以为角2作为ng2-izitoast。请使用:https://github.com/plauzul/ng2-izitoast

+0

他们已经创建了我不想要的组件。除了它唯一的返回信息。这对我无用 –

+0

请用您的信息更新您的问题。另外,请参阅我对这个问题的其他评论。 –

+0

你想让我添加什么样的信息? –

相关问题