Question

我试图继续使用我的angular 2 webapp但我在每个页面上都出现此错误：

我还没有改变应用程序中的任何内容，它适用于我团队成员的计算机。

npm install时是否由这些警告引起？

npm WARN弃用angular2-google-maps@0.17.0：请使用新的   包名称   @ agm / core - 详细信息：htt：// ... npm WARN更喜欢全局   node-gyp@3.6.2应与-g
一起安装

node-sass@4.5.3安装C：... \ node_modules \ node-sass     node scripts / install.js


从中下载二进制文件   https://github.com/sass/node-sass/releases/download/v4.5
  .3 / win32-x64-48_binding.node下载完整二进制保存到   C：\ node_modules \节点萨斯\供应商\ Win32的x64-48 \宾迪   ng.node缓存二进制文件   C：\ Users \用户托托\应用程序数据\漫游\ NPM-缓存\节点萨斯\ 4.5.3 \ WIN3
  2- x64-48_binding.node


tslerp@1.0.5 postinstall C：... \ node_modules \ tslerp     打字安装


typings WARN enoent Path   ＆＃34; C：... \ node_modules \ tslerp \ typings.json＆＃34;缺少

` - （无依赖关系）


node-sass@4.5.3 postinstall C：\ Users \ aviale \ Documents \ dev \ workspace \ PlaceDesFa
    MILLES \ PlaceDesFamilles \ PlaceDesFamillesFront \ node_modules \节点SASS     node scripts / build.js


Binary发现于   C：\ Users \用户aviale \文件\ dev的\工作空间\ PlaceDesFamilles \ PlaceDe
  sFamilles \ PlaceDesFamillesFront \ node_modules \节点萨斯\厂商\ Win32的x64-48 \宾迪   ng.node测试二进制二进制文件很好


ng2-google-recaptcha@1.1.0 postinstall C：... \ node_modules \ ng2-google     -recaptcha     打字安装


typings WARN enoent Path   ＆＃34; C：... \ node_modules \ NG2-谷歌-验证码\ typings.json＆＃34;缺少

` - （无依赖关系）

place-des-familles-front@0.0.0   C：...   + - @ angular / cli @ 1.0.0-beta.31 | + - @ ngtools / json-schema @ 1.0.3 | + - @ ngtools / webpack @ 1.2.9 | | + - enhanced-resolve@3.1.0 | | + -   loader-utils@0.2.17 | | | + - big.js@3.1.3 | | | + - emojis-list@2.1.0   | | | -- json5@0.5.1 | | - magic-string@0.19.1 | | -- vlq@0.2.2 | +-- async@2.4.1 | +-- autoprefixer@6.7.7 | | +-- browserslist@1.7.7 | | | - electron-to-chromium@1.3.14 | | + - caniuse-db@1.0.30000686   | | + - normalize-range@0.1.2 | | + - num2fraction@1.2.2 | | + -   postcss@5.2.17 | | | + - js-base64@2.1.9 | | | -- supports-color@3.2.3 | | - postcss-value-parser@3.3.0 | + -   chalk@1.1.3 | | + - ansi-styles@2.2.1 | | + -   escape-string-regexp@1.0.5 | | + - has-ansi@2.0.0 | | | -- ansi-regex@2.1.1 | | +-- strip-ansi@3.0.1 | | - supports-color@2.0.0   | + - common-tags@1.4.0 | | -- babel-runtime@6.23.0 | | -   regenerator-runtime@0.10.5 | + - css-loader@0.26.4 | | + -   loader-utils@1.1.0 | | + - lodash.camelcase@4.3.0 | | + -   object-assign@4.1.1 | | + - postcss-modules-extract-imports@1.1.0 | |   | -- postcss@6.0.2 | | | - supports-color@3.2.3 | | + -   postcss-modules-local-by-default@1.2.0 | | | -- postcss@6.0.2 | | | - supports-color@3.2.3 | | + - postcss-modules-scope@1.1.0 | | | -- postcss@6.0.2 | | | - supports-color@3.2.3 | | + -   postcss-modules-values@1.3.0 | | | + - icss-replace-symbols@1.1.0 | |   | -- postcss@6.0.2 | | | - supports-color@3.2.3 | | -- source-list-map@0.1.8 | +-- cssnano@3.10.0 | | +-- decamelize@1.2.0 | | +-- defined@1.0.0 | | +-- has@1.0.1 | | | - function-bind@1.1.0 |   | + - postcss-calc@5.3.1 | | | + - postcss-message-helpers@2.0.0 | | |   -- reduce-css-calc@1.3.0 | | | +-- balanced-match@0.4.2 | | | +-- math-expression-evaluator@1.2.17 | | | -   reduce-function-call@1.0.2 | | | -- balanced-match@0.4.2 | | +-- postcss-colormin@2.2.2 | | | - colormin@1.1.2 | | | + -   color@0.11.4 | | | | + - color-convert@1.9.0 | | | | | -- color-name@1.1.2 | | | | - color-string@0.3.0 | | | -- css-color-names@0.0.4 | | +-- postcss-convert-values@2.6.1 | | +-- postcss-discard-comments@2.0.4 | | +-- postcss-discard-duplicates@2.1.0 | | +-- postcss-discard-empty@2.1.0 | | +-- postcss-discard-overridden@0.1.1 | | +-- postcss-discard-unused@2.2.3 | | | - uniqs@2.0.0 | | + -   postcss-filter-plugins@2.0.2 | | | -- uniqid@4.1.1 | | | -   macaddress@0.2.8 | | + - postcss-merge-idents@2.1.7 | | + -   postcss-merge-longhand@2.0.2 | | + - postcss-merge-rules@2.1.2 | | |   + - caniuse-api@1.6.1 | | | | + - lodash.memoize@4.1.2 | | | | -- lodash.uniq@4.5.0 | | | +-- postcss-selector-parser@2.2.3 | | | | +-- flatten@1.0.2 | | | | +-- indexes-of@1.0.1 | | | | - uniq@1.0.1 | |   | -- vendors@1.0.1 | | +-- postcss-minify-font-values@1.0.5 | | +-- postcss-minify-gradients@1.0.5 | | +-- postcss-minify-params@1.2.2 | | | - alphanum-sort@1.0.2 | | + - postcss-minify-selectors@2.1.1 | |   + - postcss-normalize-charset@1.1.1 | | + - postcss-normalize-url@3.0.8 | | | + - is-absolute-url@2.1.0 | | | -- normalize-url@1.9.1 | | | +-- prepend-http@1.0.4 | | | -   query-string@4.3.4 | | | -- strict-uri-encode@1.1.0 | | +-- postcss-ordered-values@2.2.3 | | +-- postcss-reduce-idents@2.4.0 | | +-- postcss-reduce-initial@1.0.1 | | +-- postcss-reduce-transforms@1.0.4 | | +-- postcss-svgo@2.1.6 | | | +-- is-svg@2.1.0 | | | | - html-comment-regex@1.1.1 | | | -- svgo@0.7.2 | | | +-- coa@1.0.3 | | | | - q@1.5.0 | | | + - csso@2.3.2 | |   | | -- clap@1.2.0 | | | - whet.extend@0.9.9 | | + -   postcss-unique-selectors@2.0.2 | | -- postcss-zindex@2.2.0 | +-- debug@2.6.8 | | - ms@2.0.0 | + - denodeify@1.2.1 | + - diff@3.2.0 |   + - ember-cli-normalize-entity-name@1.0.0 | + - ember-cli-string-utils@1.1.0 | + - extract-text-webpack-plugin@2.1.2 |   | + - loader-utils@1.1.0 | | + - schema-utils@0.3.0 | | | -- ajv@5.1.5 | | - webpack-sources@1.0.1 | | -- source-list-map@2.0.0 | +-- file-loader@0.10.1 | | -   loader-utils@1.1.0 | + - findup@0.1.5 | | + - colors@0.6.2 | | -- commander@2.1.0 | +-- fs-extra@2.1.2 | | - jsonfile@2.4.0 | + -   get-caller-file@1.0.2 | + - glob@7.1.2 | | + - fs.realpath@1.0.0 | |   + - inflight@1.0.6 | | | -- wrappy@1.0.2 | | +-- inherits@2.0.3 | | +-- once@1.4.0 | | - path-is-absolute@1.0.1 | + - html-webpack-plugin@2.28.0 | | + - html-minifier@3.5.2 | | | + -   camel-case@3.0.0 | | | | + - no-case@2.3.1 | | | | | -- lower-case@1.1.4 | | | | - upper-case@1.1.3 | | | + -   clean-css@4.1.4 | | | + - commander@2.9.0 | | | | -- graceful-readlink@1.0.1 | | | +-- he@1.1.1 | | | +-- ncname@1.0.0 | | | | - xml-char-classes@1.0.0 | | | + - param-case@2.1.1 | | | + -   relateurl@0.2.7 | | | -- uglify-js@3.0.16 | | | - commander@2.9.0   | | + - pretty-error@2.1.0 | | | + - renderkid@2.0.1 | | | | + -   css-select@1.2.0 | | | | | + - boolbase@1.0.0 | | | | | + -   css-what@2.1.0 | | | | | + - domutils@1.5.1 | | | | | | -- dom-serializer@0.1.0 | | | | | | +-- domelementtype@1.1.3 | | | | | | - entities@1.1.1 | | | | | -- nth-check@1.0.1 | | | | +-- dom-converter@0.1.4 | | | | | - utila@0.3.3 | | | | + -   htmlparser2@3.3.0 | | | | | + - domelementtype@1.3.0 | | | | | + -   domhandler@2.1.0 | | | | | + - domutils@1.1.6 | | | | | -- readable-stream@1.0.34 | | | | | +-- isarray@0.0.1 | | | | | -   string_decoder@0.10.31 | | | | -- utila@0.3.3 | | | - utila@0.4.0 |   | -- toposort@1.0.3 | +-- inflection@1.12.0 | +-- inquirer@3.1.0 | | +-- ansi-escapes@2.0.0 | | +-- cli-cursor@2.1.0 | | | - 恢复 -   ...   UNMET PEER DEPENDENCY @ angular / platform-browser @ 4.2.2 | + -   @ types / fullcalendar @ 2.7.43 | -- UNMET PEER DEPENDENCY zone.js@^0.8.4 +-- codelyzer@2.0.1 | +-- app-root-path@2.0.1 | +-- css-selector-tokenizer@0.7.0 | | +-- cssesc@0.1.0 | | +-- fastparse@1.1.1 | | - regexpu-core@1.0.0 | | + - regenerate@1.3.2   | | + - regjsgen@0.2.0 | | -- regjsparser@0.1.5 | | -   jsesc@0.5.0 | + - cssauron@1.4.0 | + - semver-dsl@1.0.1 | | -- semver@5.3.0 | +-- source-map@0.5.6 | - sprintf-js@1.0.3   + - core-js@2.4.1   + - fullcalendar@3.4.0   + - jasmine-core@2.5.2   + - jasmine-spec-reporter@2.5.0 | -- colors@1.1.2 +-- jquery@3.2.1 +-- karma@1.2.0 | +-- bluebird@3.5.0 | +-- body-parser@1.17.2 | | +-- bytes@2.4.0 | | +-- content-type@1.0.2 | | +-- debug@2.6.7 | | +-- depd@1.1.0 | | +-- http-errors@1.6.1 | | +-- iconv-lite@0.4.15 | | +-- on-finished@2.3.0 | | | - ee-first@1.1.1 | | + - qs@6.4.0 | | + -   raw-body@2.2.0 | | | + - bytes@2.4.0 | | | + - iconv-lite@0.4.15 | | |   -- unpipe@1.0.0 | | - type-is@1.6.15 | | -- media-typer@0.3.0 | +-- chokidar@1.7.0 | | +-- anymatch@1.3.0 | | +-- async-each@1.0.1 | | +-- glob-parent@2.0.0 | | +-- is-binary-path@1.0.1 | | | - binary-extensions@1.8.0 | | + - is-glob@2.0.1 | | | -- is-extglob@1.0.0 | | - readdirp@2.1.0 | | -- set-immediate-shim@1.0.1 | +-- combine-lists@1.0.1 | +-- connect@3.6.2 | | +-- debug@2.6.7 | | +-- finalhandler@1.0.3 | | | - debug@2.6.7 |   | + - parseurl@1.3.1 | | -- utils-merge@1.0.0 | +-- di@0.0.1 | +-- dom-serialize@2.2.1 | | +-- custom-event@1.0.1 | | +-- ent@2.2.0 | | +-- extend@3.0.1 | | - void-elements@2.0.1 | + - expand-braces@0.1.2 | | + - array-slice@0.2.3 | | + - array-unique@0.2.1 | | -- braces@0.1.5 | | - expand-range@0.1.1 | | + - is-number@0.1.1   | | -- repeat-string@0.2.2 | +-- graceful-fs@4.1.11 | +-- http-proxy@1.16.2 | | +-- eventemitter3@1.2.0 | | -   requires-port@1.0.0 | + - lodash@3.10.1 | + - log4js@0.6.38 | | + -   readable-stream@1.0.34 | | | + - core-util-is@1.0.2 | | | + -   isarray@0.0.1 | | | -- string_decoder@0.10.31 | | - semver@4.3.6 |   + - mime@1.3.6 | + - optimist@0.6.1 | | + - minimist@0.0.10 | | -- wordwrap@0.0.3 | +-- qjobs@1.1.5 | +-- socket.io@1.4.7 | | +-- debug@2.2.0 | | | - ms@0.7.1 | | + - engine.io@1.6.10 | | | + -   accep@1.1.4 | | | | + - mime-types@2.0.14 | | | | | -- mime-db@1.12.0 | | | | - negotiator@0.4.9 | | | + - base64id@0.1.0 |   | | + - debug@2.2.0 | | | | -- ms@0.7.1 | | | +-- engine.io-parser@1.2.4 | | | | +-- after@0.8.1 | | | | +-- arraybuffer.slice@0.0.6 | | | | +-- base64-arraybuffer@0.1.2 | | | | +-- blob@0.0.4 | | | | +-- has-binary@0.1.6 | | | | | - isarray@0.0.1 | | | | -- utf8@2.1.0 | | | - ws@1.0.1 | | | + -   options@0.0.6 | | | -- ultron@1.0.2 | | +-- has-binary@0.1.7 | | | - isarray@0.0.1 | | + - socket.io-adapter@0.4.0 | | | + -   debug@2.2.0 | | | | -- ms@0.7.1 | | | - socket.io-parser@2.2.2 | |   | + - debug@0.7.4 | | | + - isarray@0.0.1 | | | -- json3@3.2.6 | | +-- socket.io-client@1.4.6 | | | +-- backo2@1.0.2 | | | +-- component-bind@1.0.0 | | | +-- component-emitter@1.2.0 | | | +-- debug@2.2.0 | | | | - ms@0.7.1 | | | + - engine.io-client@1.6.9 | |   | | + - component-inherit@0.0.3 | | | | + - debug@2.2.0 | | | | | -- ms@0.7.1 | | | | +-- has-cors@1.1.0 | | | | +-- parsejson@0.0.1 | | | | +-- parseqs@0.0.2 | | | | +-- xmlhttprequest-ssl@1.5.1 | | | | -   yeast@0.1.2 | | | + - indexof@0.0.1 | | | + - object-component@0.0.3 |   | | + - parseuri@0.0.4 | | | | -- better-assert@1.0.2 | | | | -   callsite@1.0.0 | | | -- to-array@0.1.4 | | - socket.io-parser@2.2.6   | | + - benchmark@ 1.0.0 | | + - component-emitter@1.1.2 | | + -   debug@2.2.0 | | | -- ms@0.7.1 | | - isarray@0.0.1 | + -   tmp@0.0.28 | -- useragent@2.1.13 | +-- lru-cache@2.2.4 | -   tmp@0.0.31   webdriver@2.53.42 | + - blocking-proxy@0.0.5 | + -   jasmine@2.6.0 | | + - exit@0.1.2 | | -- jasmine-core@2.6.3 | +-- jasminewd2@2.1.0 | +-- q@1.4.1 | +-- saucelabs@1.3.0 | | -   https-proxy-agent@1.0.0 | | -- agent-base@2.1.1 | +-- selenium-webdriver@3.0.1 | | - tmp@0.0.30 | + -   source-map-support@0.4.15 | + - webdriver-js-extender@1.0.0 | | -- selenium-webdriver@2.53.3 | | +-- adm-zip@0.4.4 | | +-- tmp@0.0.24 | | - xml2js@0.4.4 | | -- sax@0.6.1 | -   webdriver-manager@12.0.6 | + - adm-zip@0.4.7 | + - del@2.2.2 | |   + - globby@5.0.0 | | | -- array-union@1.0.2 | | +-- is-path-cwd@1.0.0 | | +-- is-path-in-cwd@1.0.0 | | | -   is-path-inside@1.0.0 | | | -- path-is-inside@1.0.2 | | -   pify@2.3.0 | + - ini@1.3.4 | + - semver@5.3.0 | -- xml2js@0.4.17 | +-- sax@1.2.2 | - xmlbuilder@4.2.1   + - rxjs@5.4.1 | -- symbol-observable@1.0.4 +-- ts-helpers@1.1.2 +-- ts-node@1.2.1 | +-- arrify@1.0.1 | +-- diff@2.2.3 | +-- make-error@1.3.0 | +-- mkdirp@0.5.1 | | - minimist@0.0.8 | + -   pinkie@2.0.4 | + - tsconfig@5.0.3 | | + - any-promise@1.3.0 | | + -   parse-json@2.2.0 | | | -- error-ex@1.3.1 | | | -   is-arrayish@0.2.1 | | + - strip-bom@2.0.0 | | | -- is-utf8@0.2.1 | | - strip-json-comments@2.0.1 | -- xtend@4.0.1 +-- tslint@4.5.1 | +-- babel-code-frame@6.22.0 | | +-- esutils@2.0.2 | | - js-tokens@3.0.1 | + - findup-sync@0.3.0 | | -- glob@5.0.15 | +-- tsutils@1.9.1 | - update-notifier@2.2.0 | + - boxen@1.1.0 | | + - ansi-align@2.0.0 | | + - camelcase@4.1.0 | | + -   cli-boxes@1.0.0 | | + - string-width@2.0.0 | | | -- is-fullwidth-code-point@2.0.0 | | +-- term-size@0.1.1 | | | -   execa@0.4.0 | | | + - cross-spawn-async@2.2.5 | | | + -   is-stream@1.1.0 | | | + - npm-run-path@1.0.0 | | | + -   path-key@1.0.0 | | | -- strip-eof@1.0.0 | | -   widest-line@1.0.0 | + - configstore@3.1.0 | | + - dot-prop@4.1.1 |   | | -- is-obj@1.0.1 | | +-- make-dir@1.0.0 | | +-- unique-string@1.0.0 | | | - crypto-random-string@1.0.0 | | -- write-file-atomic@2.1.0 | | +-- imurmurhash@0.1.4 | | -   slide@1.1.6 | + - import-lazy@2.1.0 | + - is-npm@1.0.0 | + -   latest-version@3.1.0 | | -- package-json@4.0.1 | | +-- got@6.7.1 | | | +-- create-error-class@3.0.2 | | | | -   capture-stack-trace@1.0.0 | | | + - duplexer3@0.1.4 | | | + -   get-stream@3.0.0 | | | + - is-redirect@1.0.0 | | | + -   is-retry-allowed@1.1.0 | | | + - lowercase-keys@1.0.0 | | |   + - timed-out@4.0.1 | | | + - unzip-response@2.0.1 | | | -- url-parse-lax@1.0.0 | | +-- registry-auth-token@3.3.1 | | +-- registry-url@3.1.0 | | - semver@5.3.0 | + - semver-diff@2.1.0   | | -- semver@5.0.3 | - xdg-basedir@3.0.0   + - typescript@2.0.10   + - typings@2.1.0 | + - archy@1.0.0 | + - cli-truncate@0.2.1 | | + - slice-ansi@0.0.4 | | ` - string-width@1.0.2 | | + -

exit-hook@1.1.1 | | -- onetime@1.1.0 | +-- promise-finally@3.0.0 | +-- typings-core@2.3.3 | | +-- array-uniq@1.0.3 | | +-- detect-indent@5.0.0 | | +-- invariant@2.2.2 | | | -   loose-envify@1.3.1 | | + - is-absolute@0.2.6 | | | + -   is-relative@0.2.1 | | | | -- is-unc-path@0.1.2 | | | | -   unc-path-regex@0.1.2 | | | -- is-windows@0.2.0 | | +-- jspm-config@0.3.4 | | +-- lockfile@1.0.3 | | +-- make-error-cause@1.2.2 | | +-- object.pick@1.2.0 | | | -   isobject@2.1.0 | | + - popsicle@9.1.0 | | | + - concat-stream@1.6.0 |   | | | -- typedarray@0.0.6 | | | - form-data@2.2.0 | | + -   popsicle-proxy-agent@3.0.0 | | | -- http-proxy-agent@1.0.0 | | +-- popsicle-retry@3.2.1 | | +-- popsicle-rewrite@1.0.0 | | +-- popsicle-status@2.0.1 | | +-- rc@1.2.1 | | | - deep-extend@0.4.2 | |   + - sort-keys@1.1.2 | | | -- is-plain-obj@1.1.0 | | +-- string-template@1.0.0 | | +-- strip-bom@3.0.0 | | +-- thenify@3.3.0 | | +-- throat@3.2.0 | | +-- touch@1.0.0 | | | - nopt@1.0.10 | | -- zip-object@0.1.0 | +-- update-notifier@1.0.3 | | +-- boxen@0.6.0 | | | +-- ansi-align@1.1.0 | | | +-- camelcase@2.1.1 | | | +-- filled-array@1.1.0 | | | - repeating@2.0.1 | | | -- is-finite@1.0.2 | | +-- configstore@2.1.0 | | | +-- dot-prop@3.0.0 | | | - write-file-atomic@1.3.4 | | + - latest-version@2.0.0 | | | -- package-json@2.4.0 | | | +-- got@5.7.1 | | | | +-- duplexer2@0.1.4 | | | | +-- node-status-codes@1.0.0 | | | | +-- read-all-stream@3.1.0 | | | | +-- timed-out@3.1.3 | | | | -   unzip-response@1.0.2 | | | -- semver@5.3.0 | | +-- lazy-req@1.1.0 | | - xdg-basedir@2.0.0 | -- wordwrap@1.0.0 - zone.js@0.7.8

npm WARN可选SKIPPING OPTIONAL DEPENDENCY：fsevents@^1.0.0   （node_modules \ CH
  okidar \ node_modules \ fsevents）：npm WARN notsup SKIPPING OPTIONAL   依赖性：不支持的fsevents平台@
  1.1.2：想要{＆＃34; os＆＃34;：＆＃34; darwin＆＃34;，＆＃34; arch＆＃34;：＆＃34; any＆＃34;}（当前：{＆＃34; OS＆＃34;：＆＃34;的win32＆＃34;＆＃34;拱＆＃34;：＆＃34; 64＆＃34;}
  ）npm WARN @ angular / forms @ 4.2.2需要一个对等体   @角/平台的浏览器@ 4.2.2
  但没有安装。 npm WARN @ angular / core @ 4.2.2需要一个对等体   of zone.js@^0.8.4但没有一个是实例   alled。

这是我的app.component.ts：

import { Component, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router';
import { Modal, Overlay } from 'angular2-modal';
import { Utilisateur } from './shared/utilisateur';
import { PanierService } from './panier.service';
import { ParentService } from './parent.service';
import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng';
import { PanierNumber } from './shared/panier';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PanierNumber]

})
export class AppComponent {
  userRole: string;
  displayLogin: boolean = false;
  displayRegister: boolean = false;
  open: any = -1;
  year: number;
  nrPanier: number;

  constructor( private utilisateur: Utilisateur, private router: Router, private modal: Modal, overlay: Overlay, viewContainer: ViewContainerRef,
               private confirmationService: ConfirmationService, private panierService: PanierService, private parentService: ParentService, private panierNumber: PanierNumber) {
                this.nrPanier = 0;
                this.year = new Date().getFullYear();
                overlay.defaultViewContainer = viewContainer;
                this.utilisateur.mySubject.subscribe(
                    value => {
                        this.userRole = value;
                        this.displayLogin = false;
                    }
                  );
                  if(localStorage.getItem("currentUserPDF")){
                    this.utilisateur.role = JSON.parse(localStorage.getItem("currentUserPDF")).role;
                    if(JSON.parse(localStorage.getItem("currentUserPDF")).role == "PARENT"){
                      this.parentService.getParent(JSON.parse(localStorage.getItem("currentUserPDF")).id).subscribe(r => {
                          r.enfants.forEach(e => {
                              this.panierService.getPanier(JSON.parse(localStorage.getItem("currentUserPDF")).id, e.id).subscribe(r => {
                                  r.forEach(h => {
                                      this.nrPanier++;
                                  });
                                  this.panierNumber.setNumber(this.nrPanier);
                              });
                          });

                      });

                      this.panierNumber.numberPanier$.subscribe(nr => {
                        this.nrPanier = nr;
                      });
                    }
                  }

  }
  checkToken() {
      if(localStorage.getItem("accessToken")) {
        return true;
      }
      return false;
  }
  confirmLogout() {
      this.confirmationService.confirm({
          message: 'Êtes-vous sûr de vouloir vous déconnecter ?',
          header: "Déconnexion",
          accept: () => {
             localStorage.removeItem('currentUserPDF');
             localStorage.removeItem("accessToken");
             this.router.navigate(['']);
            }
      });
  }
  openLoginModal() {
        this.displayLogin = true;
  }
  openRegisterModal() {
        this.displayRegister = true;
  }
  toggle() {
    this.open = this.open*-1;
  }
  isOpen() {
    if(this.open>0) {
      return true;
    } else {
        return false;
    }
  }
  goToPanier(){
    this.router.navigate(['/panier']);
  }
}

这是我的package.json：

{
  "name": "place-des-familles-front",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@types/fullcalendar": "^2.7.42",
    "@types/jquery": "^2.0.44",
    "angular2-google-maps": "^0.17.0",
    "angular2-modal": "^2.0.3",
    "ap-angular2-fullcalendar": "^1.2.8",
    "core-js": "^2.4.1",
    "fullcalendar": "^3.4.0",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "ng2-google-recaptcha": "1.1.0",
    "primeng": "^2.0.6",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "typings": "2.1.0",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.43",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "^1.0.2",
    "protractor": "~5.1.0",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.0"
  }
}

这是我的app.component.html：

<nav>
    <a routerLink=''><img src="./assets/img/logo.png" height="66"></a>
    <button class="collapse" type="button" pButton (click)="toggle()" icon="fa-bars"></button>
    <div class="nav1">
        <div *ngIf="!checkToken()">
            <div class="navbar-div" ><a class="navbar-a" routerLink='./rechercher_creche'> recherche </a></div>
            <div class="navbar-div" ><a class="navbar-a" routerLink='./register'> inscription </a></div>
            <div class="navbar-div"><a class="navbar-a" (click)="openLoginModal()"> connexion </a></div>
        </div>
        <div *ngIf="checkToken()">
            <div class="navbar-div" *ngIf="checkToken() && utilisateur.role.toLowerCase()=='parent'" (click)="goToPanier()" style="cursor: pointer;">
                <img src="./assets/img/panier.jpg" style="width: 20px; float: right"/>
                <span style="float: right; color: #428bca;">{{nrPanier}}</span>
            </div>
            <div class="navbar-div" ><a class="navbar-a" (click)="confirmLogout()"> déconnexion </a></div>
            <div class="navbar-div" *ngIf="utilisateur.role.toLowerCase()=='parent'"><a class="navbar-a" routerLink='compte_famille'> mon compte </a></div>
            <div class="navbar-div" *ngIf="utilisateur.role.toLowerCase()!='parent'"><a class="navbar-a" routerLink='etablissement'> professionnels </a></div>
        </div>

    </div>
    <div class="nav2" [ngClass]="{'in': isOpen()}">
        <div *ngIf="!checkToken()">
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" (click)="openLoginModal()"> connexion </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='./register'> inscription </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='./rechercher_creche'> recherche </a></div>
        </div>
        <div *ngIf="checkToken()"> 
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='compte_famille'> mon compte </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" (click)="confirmLogout()"> déconnexion </a></div>
            <div class="navbar-div" *ngIf="checkToken() && utilisateur.role.toLowerCase()=='parent'" (click)="goToPanier()" style="cursor: pointer;">
                <img src="./assets/img/panier.jpg" style="width: 20px; float: right"/>
                <span style="float: right; color: #428bca;">{{nrPanier}}</span>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <router-outlet></router-outlet>
</div>


<p-dialog header="Connexion" [(visible)]="displayLogin" [dismissableMask]="true" modal="modal" responsive="true" styleClass="crecheTab">
    <login></login>
</p-dialog>

<p-confirmDialog icon="fa fa-question-circle" #cd responsive="true">
    <p-footer>
        <button type="button" pButton icon="fa-close"label="Non" (click)="cd.reject()" style="background-color:#3887C9;font-family: raleway;"></button>
        <button type="button" pButton icon="fa-check" label="Oui" (click)="cd.accept()" style="background-color:#3887C9;font-family: raleway;"></button>
    </p-footer>
</p-confirmDialog>

<footer>
    <div class="foot1 ui-g">
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST PRATIQUE </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink=''> Foire aux questions </a></li>
                        <li> <a class='footer-a' routerLink=''> Professionnels petite enfance </a></li>
                        <li> <a class='footer-a' routerLink=''> Application mobile </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST NOUS ! </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink='./qui_sommes_nous'> Qui nous sommes ? </a></li>
                        <li> <a class='footer-a' routerLink=''> Nos partenaires </a></li>
                        <li> <a class='footer-a' routerLink=''> Nous recrutons </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST LÉGAL </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink='./cgu'> Conditions générales d'utilisation </a></li>
                        <li> <a class='footer-a' routerLink='./mentions_legales'> Notice légale </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
    </div>

    <div class="foot2">
        Place des Familles - {{year}} <i class="fa fa-registered" aria-hidden="true"></i>
    </div>
</footer>

编辑：在我的班级＆＃39; utilisateur＆＃39;中，我为角色定义了一个默认值，因此它不应该是未定义的：

@Injectable()
export class Utilisateur {
    public id: number;
    public prenom: string;
    public nom: string;
    public login: string;
    public role: string = 'guest';
    public codePostal: string;
    public ville: string;
    public accessToken: string;
    public civilite: string;
    public mySubject: BehaviorSubject<string> = new BehaviorSubject<string>(this.role);
    public changeRole(): void {
        this.mySubject.next(this.role);
    }
}

向我询问更多信息。

Answer 1

As your error indicates, utilisateur.role is not defined by the time you execute your *ngIf hence utilisateur.role.lowerCase() is throwing an error. You can do a workaround like this:

*ngIf="utilisateur.role && utilisateur.role.toLowerCase()=='parent'">

this will first check for utilisateur.role and if it is undefined, it will be evaluated to false.

Angular2错误self.parentView.context ..未定义

1 个答案: