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

我试图去我的angular2 Web应用程序，但我得到每个页面上的这个错误：

我没有改变应用程序的任何东西，它在我的团队的人的电脑上工作。

当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节点脚本/ install.js

从https://github.com/sass/node-sass/releases/download/v4.5下载二进制文件
.3 / win32-x64-48_binding.node下载完整的二进制文件保存到C：\ node_modules \ node-sass \ vendor \ win32-x64-48 \ bindi ng.nodecaching二进制文件到C：\ Users \ toto \ AppData \漫游\ NPM-caching\节点萨斯\ 4.5.3 \ WIN3
2- x64-48_binding.node

tslerp@1.0.5 postinstall C：… \ node_modules \ tslerptypes安装

typesWARN enoentpath“C：… \ node_modules \ tslerp \ typings.json”缺失

` – （没有依赖关系）

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

在C：\ Users \ aviale \ Documents \ dev \ workspace \ PlaceDesFamilles \ PlaceDe中find二进制文件
sFamilles \ PlaceDesFamillesFront \ node_modules \ node-sass \ vendor \ win32-x64-48 \ bindi ng.nodetesting二进制Binary是否正常

ng2-google-recaptcha@1.1.0 postinstall C：… \ node_modules \ ng2-google -recaptcha typings install

typesWARN enoentpath“C：… \ node_modules \ ng2-google-recaptcha \ typings.json”缺失

` – （没有依赖关系）

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 | | –support-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度/平台浏览器@ 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.3.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.2.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 | | | + – accepting@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 | | | + – crossspawn-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可选依赖：fsevents@^1.0.0（node_modules \ ch
okidar \ node_modules \ fsevents）：npm WARN NOTSUP SKIPPING可选依赖：不支持的平台fsevents @
1.1.2：wanted {“os”：“darwin”，“arch”：“any”}（当前：{“os”：“win32”，“arch”：“x64”}
）npm WARN @ angular / forms @ 4.2.2需要@ angular / platform-b​​rowser @ 4.2.2的同伴
但没有安装。 npm WARN @ angular / core @ 4.2.2需要zone.js@^0.8.4的同行，但没有一个是inst
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> 

编辑：在我的类'utilisateur'，我定义了一个默认值的angular色，所以它不应该是未定义的：

 @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

正如你的错误指出的， utilisateur.role并没有在你执行*ngIf的时候被定义，因此*ngIf utilisateur.role.lowerCase()会抛出一个错误。 你可以做这样的解决方法：

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

这将首先检查utilisateur.role ，如果它是undefined ，它将被评估为false。