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$
控制檯日誌屏幕截圖：
它在冷杉給出錯誤噸時間，但是當我改變代碼並重新編譯，則錯誤消失
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';
'聲明讓iziToast：IziToast'這是什麼？ – yurzui
這是一個全球性的對象 –
它的聲明 – yurzui