text:
Build failing after updating to the latest version

Please provide us with the following information:

OS?  Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Mac OSX Yosemite

Versions. Please run ng --version. If there's nothing outputted, please
run in a Terminal:
node --version
And paste the result here.

v6.1.0

Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.

I was trying to upgrade the cli because my vendor folders was not being created. Part of a larger issue where I am trying to upgrade to using the new firebase console and the latest version of angularfire2.

The log given by the failure. Normally this include a stack trace and some
more information.

`bay-publishing-magazine-cms@0.0.0 /Users/lorne/projects/bay-publishing-magazine-cms
├── UNMET PEER DEPENDENCY @angular/common@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/compiler@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/core@2.0.0-rc.3
├── @angular/forms@0.1.1
├── @angular/http@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/platform-browser@2.0.0-rc.3
├── UNMET PEER DEPENDENCY @angular/platform-browser-dynamic@2.0.0-rc.3
├── @angular/router@3.0.0-alpha.7
├── codelyzer@0.0.20
├─┬ karma@0.13.22
│ └─┬ chokidar@1.6.0
│   └─┬ fsevents@1.0.12
│     ├── nan@2.3.5
│     └─┬ node-pre-gyp@0.6.25
│       ├─┬ mkdirp@0.5.1
│       │ └── minimist@0.0.8
│       ├─┬ nopt@3.0.6
│       │ └── abbrev@1.0.7
│       ├─┬ npmlog@2.0.3
│       │ ├── ansi@0.3.1
│       │ ├─┬ are-we-there-yet@1.1.2
│       │ │ └── delegates@1.0.0
│       │ └─┬ gauge@1.2.7
│       │   ├── has-unicode@2.0.0
│       │   ├─┬ lodash.pad@4.1.0
│       │   │ ├── lodash.repeat@4.0.0
│       │   │ └── lodash.tostring@4.1.2
│       │   ├── lodash.padend@4.2.0
│       │   └── lodash.padstart@4.2.0
│       ├─┬ rc@1.1.6
│       │ ├── deep-extend@0.4.1
│       │ ├── ini@1.3.4
│       │ ├── minimist@1.2.0
│       │ └── strip-json-comments@1.0.4
│       ├─┬ request@2.69.0
│       │ ├── aws-sign2@0.6.0
│       │ ├─┬ aws4@1.3.2
│       │ │ └─┬ lru-cache@4.0.1
│       │ │   ├── pseudomap@1.0.2
│       │ │   └── yallist@2.0.0
│       │ ├── bl@1.0.3
│       │ ├── caseless@0.11.0
│       │ ├─┬ combined-stream@1.0.5
│       │ │ └── delayed-stream@1.0.0
│       │ ├── extend@3.0.0
│       │ ├── forever-agent@0.6.1
│       │ ├─┬ form-data@1.0.0-rc4
│       │ │ └── async@1.5.2
│       │ ├─┬ har-validator@2.0.6
│       │ │ ├─┬ chalk@1.1.3
│       │ │ │ ├── ansi-styles@2.2.1
│       │ │ │ ├── escape-string-regexp@1.0.5
│       │ │ │ ├─┬ has-ansi@2.0.0
│       │ │ │ │ └── ansi-regex@2.0.0
│       │ │ │ ├── strip-ansi@3.0.1
│       │ │ │ └── supports-color@2.0.0
│       │ │ ├─┬ commander@2.9.0
│       │ │ │ └── graceful-readlink@1.0.1
│       │ │ ├─┬ is-my-json-valid@2.13.1
│       │ │ │ ├── generate-function@2.0.0
│       │ │ │ ├─┬ generate-object-property@1.2.0
│       │ │ │ │ └── is-property@1.0.2
│       │ │ │ ├── jsonpointer@2.0.0
│       │ │ │ └── xtend@4.0.1
│       │ │ └─┬ pinkie-promise@2.0.0
│       │ │   └── pinkie@2.0.4
│       │ ├─┬ hawk@3.1.3
│       │ │ ├── boom@2.10.1
│       │ │ ├── cryptiles@2.0.5
│       │ │ ├── hoek@2.16.3
│       │ │ └── sntp@1.0.9
│       │ ├─┬ http-signature@1.1.1
│       │ │ ├── assert-plus@0.2.0
│       │ │ ├─┬ jsprim@1.2.2
│       │ │ │ ├── extsprintf@1.0.2
│       │ │ │ ├── json-schema@0.2.2
│       │ │ │ └── verror@1.3.6
│       │ │ └─┬ sshpk@1.7.4
│       │ │   ├── asn1@0.2.3
│       │ │   ├─┬ dashdash@1.13.0
│       │ │   │ └── assert-plus@1.0.0
│       │ │   ├── ecc-jsbn@0.1.1
│       │ │   ├── jodid25519@1.0.2
│       │ │   ├── jsbn@0.1.0
│       │ │   └── tweetnacl@0.14.3
│       │ ├── is-typedarray@1.0.0
│       │ ├── isstream@0.1.2
│       │ ├── json-stringify-safe@5.0.1
│       │ ├─┬ mime-types@2.1.10
│       │ │ └── mime-db@1.22.0
│       │ ├── node-uuid@1.4.7
│       │ ├── oauth-sign@0.8.1
│       │ ├── qs@6.0.2
│       │ ├── stringstream@0.0.5
│       │ ├── tough-cookie@2.2.2
│       │ └── tunnel-agent@0.4.2
│       ├─┬ rimraf@2.5.2
│       │ └─┬ glob@7.0.3
│       │   ├─┬ inflight@1.0.4
│       │   │ └── wrappy@1.0.1
│       │   ├── inherits@2.0.1
│       │   ├─┬ minimatch@3.0.0
│       │   │ └─┬ brace-expansion@1.1.3
│       │   │   ├── balanced-match@0.3.0
│       │   │   └── concat-map@0.0.1
│       │   ├─┬ once@1.3.3
│       │   │ └── wrappy@1.0.1
│       │   └── path-is-absolute@1.0.0
│       ├── semver@5.1.0
│       ├─┬ tar@2.2.1
│       │ ├── block-stream@0.0.8
│       │ ├─┬ fstream@1.0.8
│       │ │ └── graceful-fs@4.1.3
│       │ └── inherits@2.0.1
│       └─┬ tar-pack@3.1.3
│         ├─┬ debug@2.2.0
│         │ └── ms@0.7.1
│         ├─┬ fstream-ignore@1.0.3
│         │ └─┬ minimatch@3.0.0
│         │   └─┬ brace-expansion@1.1.3
│         │     ├── balanced-match@0.3.0
│         │     └── concat-map@0.0.1
│         ├─┬ once@1.3.3
│         │ └── wrappy@1.0.1
│         ├─┬ readable-stream@2.0.6
│         │ ├── core-util-is@1.0.2
│         │ ├── isarray@1.0.0
│         │ ├── process-nextick-args@1.0.6
│         │ ├── string_decoder@0.10.31
│         │ └── util-deprecate@1.0.2
│         └── uid-number@0.0.6
├─┬ protractor@3.3.0
│ └─┬ request@2.67.0
│   └─┬ http-signature@1.1.1
│     └─┬ sshpk@1.8.3
│       ├── ecc-jsbn@0.1.1
│       ├── jodid25519@1.0.2
│       ├── jsbn@0.1.0
│       └── tweetnacl@0.13.3
└── tslint@3.11.0
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/core@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/platform-browser@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/common@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/compiler@2.0.0-rc.2 but none was installed.
npm WARN angularfire2@2.0.0-beta.2 requires a peer of @angular/platform-browser-dynamic@2.0.0-rc.2 but none was installed.
bay-publishing-magazine-cms $ sudo ng firebase:deploy
(node:17912) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
The specified command firebase:deploy is invalid. For available options, see ng help.
bay-publishing-magazine-cms $ ng build -prod
(node:17916) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.
The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/advert/advert.component.ts (2, 10): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'OnActivate'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/advert/advert.component.ts (2, 22): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'RouteSegment'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/comment/comment.component.ts (2, 10): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'OnActivate'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/comment/comment.component.ts (2, 22): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'RouteSegment'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/image/image.component.ts (2, 10): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'OnActivate'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/image/image.component.ts (2, 22): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'RouteSegment'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/text/text.component.ts (2, 10): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'OnActivate'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/text/text.component.ts (2, 22): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'RouteSegment'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/video/video.component.ts (2, 10): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'OnActivate'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/articles/video/video.component.ts (2, 22): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'RouteSegment'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/auth/auth.service.ts (3, 29): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'Routes'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/bay-publishing-magazine-cms.component.ts (2, 29): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'Routes'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/users/users-form/edit-user-form.component.ts (2, 37): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'OnActivate'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/users/users-form/edit-user-form.component.ts (2, 49): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'RouteSegment'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/users/users-form/users-form.component.ts (2, 37): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'OnActivate'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/app/users/users-form/users-form.component.ts (2, 49): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'RouteSegment'.
/Users/lorne/projects/bay-publishing-magazine-cms/tmp/broccoli_type_script_compiler-input_base_path-rBHW1qjX.tmp/0/src/main.ts (3, 10): Module '"/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/@angular/router/index"' has no exported mng 'ROUTER_PROVIDERS'.
at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
at BroccoliTypeScriptCompiler.build (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
at /Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
at lib$rsvp$asap$$flush (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
The broccoli plugin was instantiated at:
at BroccoliTypeScriptCompiler.Plugin (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
at BroccoliTypeScriptCompiler (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:27:5)
at Angular2App._getTsTree (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/lib/broccoli/angular2-app.js:321:18)
at Angular2App._buildTree (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/lib/broccoli/angular2-app.js:116:23)
at new Angular2App (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
at module.exports (/Users/lorne/projects/bay-publishing-magazine-cms/angular-cli-build.js:6:10)
at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
at Class.module.exports.Task.extend.init (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
at new Class (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
at Class.module.exports.Task.extend.run (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
at /Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
at lib$rsvp$$internal$$tryCatch (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
at /Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
at lib$rsvp$asap$$flush (/Users/lorne/projects/bay-publishing-magazine-cms/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)`

Mention any other details that might be useful.

I feel out of my depth with when it goes wrong with dependencies and build errors.

try to run " npm run typings install"
from your project directory

I got it working in the end, the upgrade change my package file meaning that it was now using the new router. Also I did npm uninstall angular-cli -g then an npm i -g angular-cli and that seemed to patch a few things up so I am fully upgraded on all fronts. Feeling fresh now.

Hey guys, I'm having the same issue with these settings:
Windows 10
angular-cli: 1.0.0-beta.8
node: 4.4.5
os: win32 x64
C:\projects\ng2MobileTest>ng build

Build failed.

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  C:/projects/ng2MobileTest/tmp/broccoli_type_script_compiler-input_base_path-Y3oPHGr5.tmp/0/src/system-config.ts (33, 3): ',' expected.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\projects\ng2MobileTest\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (C:\projects\ng2MobileTest\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
    at C:\projects\ng2MobileTest\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (C:\projects\ng2MobileTest\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\projects\ng2MobileTest\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\projects\ng2MobileTest\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\projects\ng2MobileTest\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1198:9)
    at nextTickCallbackWith0Args (node.js:420:9)
    at process._tickCallback (node.js:349:13)

@houssemzaier I tried this, I got this and it didn't solve the issue, so am I missing something here??

Thanks!

@alazzawimahmoud it seems you have a missing comma in src/system-config.ts:
C:/projects/ng2MobileTest/tmp/broccoli_type_script_compiler-input_base_path-Y3oPHGr5.tmp/0/src/system-config.ts (33, 3): ',' expected.

@filipesilva Thank your very much, it is working perfectly.

authors: alazzawimahmoud borntodesign filipesilva houssemzaier

repo: angular/angular-cli


text:
Cannot read property 'kind' of undefined during version 9 update

This issue impacts 9.0.0-rc.0 and happened while updating https://github.com/vmware/clarity.
The following migration failed while running, interrupting the update process.
>  Undecorated classes with DI migration.
   As of Angular 9, it is no longer supported to use Angular DI on a class that does not have an Angular decorator.
   Read more about this here: https://v9.angular.io/guide/migration-undecorated-classes

    This migration uses the Angular compiler internally and therefore projects that no longer build successfully after the update cannot run the migration. Please ensure there are no AOT compilation errors and rerun the migration.. The following project failed: src/clr-angular/tsconfig.prod.json

    Error: error TS100: Cannot determine the module for class ButtonViewTestComponent in D:/sandbox/clarity/src/clr-angular/button/button-group/button.spec.ts! Add ButtonViewTestComponent to the NgModule to fix it.
    Cannot determine the module for class TestIndex in D:/sandbox/clarity/src/clr-angular/emphasis/alert/alerts-pager.spec.ts! Add TestIndex to the NgModule to fix it.
    Cannot determine the module for class TestInstance in D:/sandbox/clarity/src/clr-angular/emphasis/alert/alerts-pager.spec.ts! Add TestInstance to the NgModule to fix it.
    Cannot determine the module for class BasicWizardTestComponent in D:/sandbox/clarity/src/clr-angular/wizard/test-components/basic-wizard.mock.ts! Add BasicWizardTestComponent to the NgModule to fix it.
    Cannot determine the module for class HeaderActionsTestComponent in D:/sandbox/clarity/src/clr-angular/wizard/test-components/header-action-wizard.mock.ts! Add HeaderActionsTestComponent to the NgModule to fix it.
    Cannot determine the module for class TemplateApiWizardTestComponent in D:/sandbox/clarity/src/clr-angular/wizard/test-components/api-wizard.mock.ts! Add TemplateApiWizardTestComponent to the NgModule to fix it.
    Cannot determine the module for class DynamicWizardTestComponent in D:/sandbox/clarity/src/clr-angular/wizard/test-components/dynamic-wizard.mock.ts! Add DynamicWizardTestComponent to the NgModule to fix it.
    Cannot determine the module for class UnopenedWizardTestComponent in D:/sandbox/clarity/src/clr-angular/wizard/test-components/unopened-wizard.mock.ts! Add UnopenedWizardTestComponent to the NgModule to fix it.

Cannot read property 'kind' of undefined
git HEAD was at ef1733759ceeff88ceb7ab7ff01f5da604fb79cb before migrations.
×  Migration failed. See above for further details.

The kind of undefined error surfaces due to #16035. All of the migrations make the assumption that the  tsconfig files are valid. This is no longer the case due to the CLI migration failure.
I'll fix this in the framework migrations, as apparently it cannot assume that the tsconfig is always valid.

@devversion also mentioned that this can happen when test files are included, which happens in library project because the tsconfigs used by ng-packagr automatically filter out spec files. Maybe we should update these configs to exclude the test files.

Could this be related https://github.com/angular/angular/issues/33143
(nit: after moving from single-app to monorepo ( multi projects/ in workspace) I don't have this error anymore)

I'm not sure if that is related. This issue seems to be because of #16035 where program.getSourceFile() returns undefined. The other issue you linked to seems to originate from the AngularCompilerProgram. I'd love to investigate this, but I'm not sure how I can reproduce this.

Assigning to Filipe for verification

For reference: The error is no longer thrown as part of the migration and we now gracefully report if the tsconfig of a migration target has failures. I think the CLI migration that generates these invalid tsonfigs has been fixed, so I think that can be closed.

I can confirm Cannot read property 'kind' of undefined is no longer shown on that update.

source: gharchive/issue

authors: devversion elvisbegovic filipesilva vikerman

license: MIT

license_type: permissive

license_source: github-api


text:
angular cli 13 keeps recompiling...

Angular just keeps recompiling in infinite loop running the command:
node --max_old_space_size=16834 ./node_modules/@angular/cli/bin/ng serve --configuration=dev --proxy-config proxy.json

this is proxy.json
{
  "/api": {
    "target": "https://earth.xxxxe.me:8080",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }
}

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@angular/flex-layout            13.0.0-beta.36
@angular/google-maps            9.2.4
@angular/pwa                    13.1.2
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

at first all is well, but after 10 minutes of development, things go nutz,
let me know what other info I can provide, anyone else seeing this?
regards
Sean.

any news on this? anyone else is seeing?

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?
You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.
This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

Closing since no reproduction was provided.
If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem.
You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.
This might be related to your directory structure so its really important to get an accurate repro to diagnose this.


text:
Allow templateUrl and styleUrls to exclude path

As per our discussion with @wardbell @Brocco and @filipesilva , we'd like to make the CLI be comfortable when a module.id exists in the @Component( ... ) decorator such that the url properties can simply be the name of the file. Examples that should work:
// no module.id
@Component(
  templateUrl: './foo.html'
) export class FooComponent { ... }

@Component(
  // module.id and just a file name, defaults to ./
  moduleId: module.id,
  templateUrl: 'foo.html'
) export class FooComponent { ... }

@Component(
  // module.id and uses the existing specified path /.
  moduleId: module.id,
  templateUrl: './foo.html'
) export class FooComponent { ... }

Webpack's loader-utils helper methods urlToRequest and stringifyRequest should probably be used in _replaceResources inside the CLI's loader.
I was looking at putting a PR together awhile ago but haven't had time.

Per conversation with @hansl, we should prepend ./ unless there is a /, regardless of moduleId.

That's essentially what the helper functions do. Plus support the webpack specific tilde which would most likely be expected if the loader is used independently of the CLI.

@clydin coolio, I'll use them then. I wasn't too familiar with those helper so I appreciate the explanation.

@filipesilva , Whether moduleId is present or not, 'foo.html', '/foo.html' & './foo.html' will point to the same file and will be bundled. Am i right?

@CarreraPHP /foo.html and ./foor.html are different. Consider you have src/app/one/two/folders/foo.ts and `src/tsconfig.json'.

/foo.html is src/foo.html
./foo.html is ``src/app/one/two/folders/foo.html`

That is the difference.

@filipesilva , Thanks for the clarification. '/foo.html' is not the way angular style guide suggests and not the way angular-cli generates files so couldn't realise this basic path concepts. However, the confusion came up due to the way static resources like images are referenced relative to the folder that contain the html template file (don't know if this is not the way it is done currently, the angular-cli version i used at that time was beta.17).

@CarreraPHP I actually gave you some bad information there: that example only applies to AoT compilation. JiT does not have access to tsconfig, so / will be the value of the <base> tag href property.
In the CLI we always inline styles and templates so we go by AoT rules.

authors: CarreraPHP clydin filipesilva johnpapa


text:
--stats-json flag doesn't work on Windows

Bug Report or Feature Request (mark with an x)
- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.
Output from: ng --version.
@angular/cli: 1.0.0
node: 6.10.1
os: win32 x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Repro steps.
On Windows:

ng new demo
ng build --prod --stats-json

The log given by the failure.

fs.js:641
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open 'C:\Users\George\Source\Repos\demo\dist\stats.json'
    at Error (native)
    at Object.fs.openSync (fs.js:641:18)
    at Object.fs.writeFileSync (fs.js:1347:33)

Desired functionality.

Stats to work properly on Windows

Hm, I'm on windows and can't repro. Does this always happen for you?

I have the same behaviour if any ts-file (for example) has an syntax error.
fs.js:641
      return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                     ^

    EXEC : error : ENOENT: no such file or directory, open 'D:\Projcts\Test\dist\stats.json'
        at Error (native)
        at Object.fs.openSync (fs.js:641:18)
        at Object.fs.writeFileSync (fs.js:1347:33)
        at callback (D:\Projcts\Test\node_modules\@angular\cli\tasks\build.js:40:24)
        at onCompiled (D:\Projcts\Test\node_modules\webpack\lib\Compiler.js:239:14)
        at D:\Projcts\Test\node_modules\webpack\lib\Compiler.js:494:13
        at next (D:\Projcts\Test\node_modules\tapable\lib\Tapable.js:138:11)
        at Compiler.<anonymous> (D:\Projcts\Test\node_modules\webpack\lib\CachePlugin.js:62:5)
        at Compiler.applyPluginsAsyncSeries (D:\Projcts\Test\node_modules\tapable\lib\Tapable.js:142:13)
        at D:\Projcts\Test\node_modules\webpack\lib\Compiler.js:491:10
        at Compilation.applyPluginsAsyncSeries (D:\Projcts\Test\node_modules\tapable\lib\Tapable.js:131:46)
        at self.applyPluginsAsync.err (D:\Projcts\Test\node_modules\webpack\lib\Compilation.js:645:19)
        at next (D:\Projcts\Test\node_modules\tapable\lib\Tapable.js:138:11)
        at Compilation.compilation.plugin (D:\Projcts\Test\node_modules\webpack\lib\ProgressPlugin.js:121:6)
        at Compilation.applyPluginsAsyncSeries (D:\Projcts\Test\node_modules\tapable\lib\Tapable.js:142:13)
        at self.applyPluginsAsync.err (D:\Projcts\Test\node_modules\webpack\lib\Compilation.js:636:11)

Besides, dist folder does not created.

It works for me on Windows with Node 6.9.4 and npm 3.1.0.10, but the stats file is not generated alongside --watch.
So, the following works:
ng build --stats-json

The following does not:
ng build --watch --stats-json

I'm debating filing another issue, but will refrain until I can try this from Ubuntu at home.

@EugeneAzhogin it's definitely mean to fail somehow when you have TS errors.
@danizen I can confirm that I don't get the stats json on watch mode either, but that's definitely another issue.
I'm closing this one as it seems to be working.

authors: EugeneAzhogin danizen filipesilva georgeedwards


text:
Bundling

Is it planned to bundle /dist ?

Please provide us with the following information:

OS?  Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Versions. Please run ng --version. If there's nothing outputted, please
run in a Terminal:
node --version
And paste the result here.

Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.

The log given by the failure. Normally this include a stack trace and some
more information.

Mention any other details that might be useful.

Thanks! We'll be in touch soon.

Try building with --prod.

@hansl
Sorry for keeping this thread active, just want to make sure the current behaviour is intended,
Running ng build --environment=prod  indeed bundles app on main file, but the whole project (js, css, html) is still being copied to ./dist.
Is there a way to only copy proper (assets e.g) files and inline components templates / styles or we should handle that ourselves for now ?

HTML and CSS are (for now) not bundled. The goal is to use offline compiler to compile the template and styles into code and bundle that as well. So it will happen.
For anything immediate, you should implement that yourself. There are broccoli plugins out there to do that (we use one for Material components).

@hansl
Well ok, seeing that material2 is using gulp plugin gulp-inline-ng2-template to inline resources.
Thanks you for your time 👍

authors: hansl pkamdem zigzag95


text:
Indonesian Translation for Angular CLI

Hi, Can I contribute to translate angular CLI documentation into Indonesian Language?

Why indo programmer don't know english ?

Our documentation website isn't ready yet. When it is you're welcome to contribute.
I'm going to leave this open to come back when we have a proper documentation website.

Heya, a better place to ask is in https://github.com/angular/angular. I will move this issue there.

authors: Patrick-Kan filipesilva hansl iqbalhood


text:
Cli 1.7.2 cannot recognize the interface of an extended class of Node's EventEmitter

Versions
Angular CLI: 1.7.2
Node: 9.4.0
OS: darwin x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

ng new foo
Add these lines to src/app/app.component.ts

import { EventEmitter } from 'events';

class EventEmitterChild extends EventEmitter {}

interface EventEmitterInterface {
  addListener(event: string | symbol, listener: Function): EventEmitterInterface; // copied from the EventEmitter's declaration in @types/node
}

const funcForEventEmitter = (e: EventEmitter) => {};
const funcForEventEmitterInterface = (e: EventEmitterInterface) => {};

const eventEmitter = new EventEmitter();
const child = new EventEmitterChild();

funcForEventEmitter(eventEmitter); // OK
funcForEventEmitterInterface(eventEmitter); // OK

funcForEventEmitter(child); // OK
funcForEventEmitterInterface(child); // NG

ng build

Observed behavior
ERROR in src/app/app.component.ts(28,30): error TS2345: Argument of type 'EventEmitterChild' is not assignable to parameter of type 'EventEmitterInterface'.
  Property 'addListener' is missing in type 'EventEmitterChild'.

Desired behavior

succeeds without any errors
Mention any other details that might be useful (optional)
tsc does not emit an error for the same code.

The CLI has been updated significantly since version 1.7.2.  The current stable version is 8.3.5.  If this problem is still being encountered with the current version, please consider opening a new issue with updated details.

authors: clydin tsugitta


text:
Fix: Change Production Test To Be Dependent on ANGULAR_ENV instead of…

… EMBER_ENV
Fixes #640
Want to help out, picked an easy issue first :)

This is because we're extending ember-cli. So there's no actual issue and if we change it to ANGULAR_ENV we're actually breaking it.

source: gharchive/pull-request

authors: cironunes hannahhoward


text:
fix(@angular/cli): improve rebundling speed

Forcing TypeScript to output commonjs modules instead of es2015 modules drastically improves rebuild speeds, especially for AOT.
This PR forces this option on the following modes:

ng build --watch --target=development
ng serve --target=development
ng test --code-coverage=false

Please note that --target=development and --code-coverage=false are the defaults.
See webpack/webpack#5863 for the webpack issue.

Is this an inherent issue with tsc?  There may be an opportunity to reach out to the TypeScript team to fix this if they are not already working on it.

@zackarychapple it is an issue with webpack, see the linked issue in the PR message for more details.

authors: filipesilva zackarychapple


text:
docs: 添加摇树说明

注意：

新版本的文档位于aio分支下，master分支下是老版本的文档。
原则上不再接受对老版本的PR。

哦，先不用着急关掉，我还得思考一下这个问题。在翻译中添加译注我比较保守，我得看看摇树是否值得在这里用译注解释一下。

哦，先不用着急关掉，我还得思考一下这个问题。在翻译中添加译注我比较保守，我得看看摇树是否值得在这里用译注解释一下。
欢迎各位读者发表下自己的看法。对于摇树这个词，你或你身边的人是否可以顾名思义的理解其内涵。

我个人看来，无法下意识的迅速理解摇树的含义。感觉tree shaker这个词很糟糕。

authors: asnowwolf smallprogram

repo: angular/angular-cn

license: mit

license_source: bigquery


text:
"Referencing the Window in Angular expressions is disallowed" error thrown without any reference to window

I have a form in my application that has been working just fine with AngularJS v1.2.17 for weeks now.  I recently tried to upgrade to v1.2.28, but noticed that this form now throws JavaScript errors even though the code has not changed.
I have a question on StackOverflow regarding this issue
I realized that the error gets thrown in v1.2.19 and above. I have absolutely NO references to the window object in either my template expressions or my controllers. Therefore, I have no idea what caused this issue to bubble up in these newer builds.

Hi. With only the information above, it is not enough to know what is going on. Would it be possible for you to create a plunker that shows this issue?

I have no idea what is actually causing it so I can't specify what code needs to go into a plunker.  Seeing how other people haven't had this problem I am guessing it is an environment problem, but that is just a guess. If I try to use the same form in plunker everything works fine. This is why it is so weird... because Angular is appearing to throw exceptions on lines of code that have nothing to do with the given error.

Hi, is your application available somewhere? Without a minimal way to be able to see the error, there is close to no chances for this to get solved

Unfortunately no, it is part of an unreleased product that I am legal not allowed to share.  I wish there were a way for me to show you the error. The thrown exception makes absolutely no sense with what any of my code is doing and the fact that the error is introduced in 1.2.19+ makes me very curious

Could I send a private message of some sort to you with screen shots/code fragments that may help?

I am sorry, but without a way to reproduce the issue, not having an expression/scope that triggers this nor being able to try this out, then there is nothing else that can be done. I am going to close this issue, but if you find a way to reproduce this with an example that you can out at plunker, feel free to reopen the issue

In my StackOverflow I state exactly what expression the error is supposedly occurring on, however you can see that the expression has nothing to do with Window in any way.  I can't pinpoint what area of the code to look at when the error gives me no indication of what is happening.

@shank8 it is very hard (not to say impossible) to identify / fix the issue you are facing. Try to narrow down the code that is failing and reproduce it in an isolated manner in a jsfiddle, plunker or a similar tool. If you do this I'm sure that you are going to get an answer in no time!

the way angular checks if some object is window is with the check
function isWindow(obj) {
  return obj && obj.document && obj.location && obj.alert && obj.setInterval;
}

the only possibility that I can think of is that some object you are referencing has all these properties

Ok thanks for the info. I will continue to try and reproduce/debug the issue

Ah... I think I found the problem.  After traversing the stack trace I realized that the object that threw the error was my $scope.model object which is what I use in all my controllers as the root property in which all other properties extend from.
I realized that in my controller I typically set up my $scope.model by initializing it to some OOP Class like
function HomeViewModel() {
 this.title = "Hello";
 this.content = "World";
}
...
$scope.model = new HomeViewModel();

This should create a new instance of this HomeViewModel class, however I realized that in this one controller I accidentally had
$scope.model = HomeViewModel();

So I forgot the new operator which caused the this property within my class to reference window.. therefore, my $scope.model was equal to window extended with my actual model.  So the $scope.model then caused the exception to be thrown since it contains the defined properties that @lgalfaso stated above.
So now my question is why was this allowed before? My guess is there was never a restriction on using the window object prior to version 1.2.19? That would make the most sense.
Another question I have is why the error was thrown on this particular expression. There are many expression preceding this one that use $scope.model so I am not sure why it happened to be this one

authors: lgalfaso pkozlowski-opensource shank8


text:
fix(ngModelOptions): allow sharing options between multiple inputs

Closes #10667

landed as 9c9c6b3fe4edfe78ae275c413ee3eefb81f1ebf6

authors: lgalfaso shahata


text:
docs($controller): deprecate the use of $controllerProvider#allowGlobals

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
docs
Does this PR introduce a breaking change?
puts the warning for a future one
Anything else that needs to be done to prepare for removing this in 1.7?

We are going to remove the feature in 1.7?
We should document at which version it will be removed.

I agree. The version when this is removed should go into the deprecated tag. @petebacondarwin can we render this nicely with dgeni?

We should be able to tweak the dgeni templates. I'll take a look tomorrow

@petebacondarwin updated with a specific version

authors: Narretz jbedard petebacondarwin


text:
bug(COMPONENT): How do I get the new position of a map marker in the mapDragend event?

`<map-marker *ngIf = "marker"
#markerElem
[position]="marker.position"
[label]="marker.label"
[title]="marker.title"
[options]="marker.options"
(mapDragend)="mapDragend(markerElem)"

`
mapDragend(marker: MapMarker) {     const position = marker.getPosition();     this.canSave = this.setData(position.lat(), position.lng());   }
Hiere I get the error marker.getPosition is not a function. What  can I do??
Regards Ingo

It's probably because the #markerElem is referring to the marker element node, not the MapMarker instance. You should change the #markerElem to #markerElem="mapMarker".

authors: IngoManthey crisbeto

repo: angular/components


text:
bug(cdk/drag-drop): Missing cdkDrawPreviewContainer directive?

Expected Behavior
What behavior were you expecting to see?
Being able to use cdkDrawPreviewContainer as state by the doc on the repo and the official documentation (which probably just reflects the markdown file): https://material.angular.io/cdk/drag-drop/overview#drag-preview-insertion-point

Actual Behavior
What behavior did you actually see?
This directive doesn't seem to be anywhere? Searching for it on all github only gives back that result where the doc mention it once: https://github.com/search?q=cdkDrawPreviewContainer&type=code
Looking in angular/components repo or even into the node_modules of my project for cdkDrawPreviewContainer doesn't seem to give anything. Was it removed maybe at some point? I'd really need it because I'm trying to reorder lines in a table and the whole layout is broken. I had good hopes with this one directive but unfortunately it doesn't seem to be available anywhere
Environment

Angular: 12.1.0
CDK/Material: 12.1.0
Browser(s): Not relevant
Operating System (e.g. Windows, macOS, Ubuntu): Not relevant

It's an input called cdkDragPreviewContainer on cdkDrag, there's just a typo in the docs. I've submitted a PR to fix it.

Awesome I'll try it out, thanks :pray: !


text:
bug(MatDialog): Closes before canDeactivate of route is checked on navigation

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was
No response
Description
I want to prevent navigation while a dialog is open.
For this I am using a canDeactivate guard on the route which checks if there is an open dialog.
The problem is now that when using the browser back button then the popup is already closed before the canDeactivate guard is even checked. This then results in the behaviour that the popup is closed even when no navigation happens.
I know there is the closeOnNavigation option but I only want to prevent navigation and the dialog from closing in certain cases (e.g. unsaved changes in a popup).
Reproduction
Clone https://github.com/TheSlimvReal/angular-dialog-route-guard.git (does not work in Stackblitz because the back button triggers a page reload there)
Steps to reproduce:

Click First
Click Dialog
Click the back button of browser

The app will route to second even though the canDeactivate guard is checking whether a dialog is open.
This is because the dialog is closed before route guards are checked.
Expected Behavior
The dialog should only close if navigation actually happens.
Actual Behavior
The dialog is always closed.
Environment
Angular CLI: 16.1.0
Node: 16.16.0
Package Manager: npm 8.17.0
OS: darwin x64
Angular: 16.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Is there any news around this ?

I ran into this issue today. I believe it is because OverlayRef in the cdk disposes the overlay on navigation changes using Location.subscribe(). But this emits a location change regardless of whether the navigation was successful.
Maybe we need to create something like RouterOverlayRef that relies on the angular router instead of location?

authors: TheSlimvReal raskyer seyfert


text:
refactor: remove underscores from non-mdc density mixins

For some components that don't have a corresponding implementation
in MDC Web, we added density mixins. We prefixed this with an
underscore to prevent premature use. Now we remove the underscore
as we're starting rollout in Google.

For now I only want to open up the component-specific mixins.


text:
'mat-ink-bar' with mat-stretch-tabs responsive bug on 'mat-sidenav' open

Bug, feature request, or proposal:
Bug: mat-ink-bar element didn't resize correctly when nav-tab is used inside a mat-sidenav.
What is the expected behavior?
mat-ink-bar element should resize on sidenav events even with mat-stretch-tabs attribute
What is the current behavior?
mat-ink-bar element kept is old width/position value on sidenav open/close.

What are the steps to reproduce?
Click on a Tab then toggle sidenav. There should be a visual bug like in screenshots above.
https://stackblitz.com/edit/angular-owgx3w
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular : 6.0.9
@material: 6.3.3
Linux/Windows
Typescript 2.7.2/2.9
Browsers: Chrome/Firefox

I just noticed this myself today. Is it possible there is some kind of css workaround until this bug is fixed?

The only workaround I've thought of so far is firing a window resize event when the sidenav is opened/closed/toggled.
  toggleSideNav() {
    this.mainNav.toggle();
    setTimeout(() => {
      if (typeof(Event) === 'object') {
        // IE
        var resizeEvent = window.document.createEvent('UIEvents');
        resizeEvent.initUIEvent('resize', true, false, window, 0);
        window.dispatchEvent(resizeEvent);
      }
      else {
        // everything else
        window.dispatchEvent(new Event('resize'));
      }
    }, 150);
  }

Although this isn't ideal at all.
The reason the resize event is in a timeout is because the ink bar needs to be updated after the sidenav is finished opening/closing, otherwise the ink bar will still be a few pixels off - but of course the delay looks awkward.
Another problem with this workaround is IE lags really badly when resize events are created programmatically (at least for me), even though it works very smooth in Chrome/FF.
However I noticed that the ink bar always behaves correctly (when the sidenav is opened/closed) if the tab group has the pagination controls enabled.
Is there a way to force the tab group to enable pagination controls even when they're not needed? (as in both pagination arrows would be grayed out)
This would be a decent temporary workaround in my opinion.

duplicate of #6130 I guess

closing as dup

authors: Spanja dannye mmalerba raphael22


text:
Menu Bar (like AngularJS Material)

Please describe the feature you would like to request.
I want a Menu Bar (like AngularJS Material), see: https://material.angularjs.org/latest/demo/menuBar
What is the use-case or motivation for this proposal?
Menu bar are really common in so many desktop application.

This isn't something we plan to do in 2019, but could come at a later date.


text:
Tooltip never disappears after opening

Bug, feature request, or proposal:
Bug with my dependencies may be.. or @angular/animations
What is the expected behavior?
Tooltip should disappear after the hideDelay
What is the current behavior?
Tooltip NOT disappear after the hideDelay
What are the steps to reproduce?
Same of material2 official doc
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Works with this version.
Plunker template: http://plnkr.co/edit/pr4AFA06aURbMxYI77BK?p=preview
Not works with this dependencies :
What is the use-case or motivation for changing an existing behavior?
N/A
Which versions of Angular, Material, OS, browsers are affected?
`
...
"@angular/common": "4.0.0-rc.1",
"@angular/compiler": "4.0.0-rc.1",
"@angular/core": "4.0.0-rc.1",
"@angular/flex-layout": "2.0.0-rc.1",
"@angular/forms": "4.0.0-rc.1",
"@angular/http": "4.0.0-rc.1",
"@angular/material": "2.0.0-beta.2",
...
"@angular/cli": "1.0.0-rc.0",
"@angular/compiler-cli": "4.0.0-rc.1",
"typescript": "2.2.1"
...
`
Is there anything else we should know?
I post my problem here : https://gitter.im/angular/material2.
I imported @angular/animations.
But nothing change.
Is it necessary that I import it in my code or angular does it alone ?
Thanks.

Please make sure that you have included the animation package for angular core. You can find more information about implementing the animation package here https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24

Related: https://github.com/angular/material2/issues/3321

@frankspin89 thanks, that works well! it's not obvious, you also need to add BrowserAnimationsModule too… (see http://stackoverflow.com/questions/42470364/using-angular-material-2-tabs-component-with-angular-4-0-0-rc-1/42471212#42471212).

I can't import BrowserAnimationsModule like import { BrowserAnimationsModule } from '@angular/platform-browser/typings/animations';
Error:
VM686:2 GET http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js 404 (Not Found)
(index):246 (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js
	Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js
	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5555/node_modules/zone.js/dist/zone.js?1488980193959:1190:29) [<root>]
	    at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1488980193959:166:47) [<root> => <root>]
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1488980193959:416:38) [<root>]
	Error loading http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js as "@angular/platform-browser/typings/animations" from http://localhost:5555/app/app.module.js Not expecting this error? Report it at https://github.com/mgechev/angular2-seed/issues

If BrowserAnimationsModule should be used, then it should be available via index.ts / public_api.ts ... right?

I can confirm tooltip gets stuck in IE/Edge and Safari, but works fine in Chrome and Firefox. I believe this is due to web-animations polyfill and I've reported it there. This issue actually crashes my app so I've had to blacklist IE/Edge and Safari from even loading the web-animations polyfill.
Reproduce by hovering in and out of button rapidly.

As also added to https://github.com/web-animations/web-animations-js/issues/115 I think we got the same error:

Another strange fact is that

with Angular v2 and Angular Material v2.0.0-beta.1 we had the same bug including the JavaScript error
currently with Angular v2 and Angular Material v2.0.0-beta.2 the tooltips stuck and don't disappear but the app does not crash
with Angular v4.0.1 and Angular Material v2.0.0-beta.1 the app crashes again so we can't upgrade Angular

@karlhaas: I am using angular 4 and material 2 beta 2 and it's working great (as long as BrowserAnimationsModule is registered)

Without BrowserAnimationsModule animations won't work at all, right?
@victornoel in Safai with web-animations-js?

@karlhaas ha, maybe not in this context, sorry :) I just tried with chromium

I have the same issue when using IE11 or the latest Edge browser. I include web.animation.js to support animations.
When hovering over an element that has a tooltip multiple times in quick succession, the whole app crashes and following error occurs (as already mentioned above):

I just provided a PR to fix this in web-animations-js: https://github.com/web-animations/web-animations-js/pull/118

Seems to be working fine in the latest version.
Be sure to check out the changelog for the latest release in regards to changes w/ animations.

@jelbourn still the same error with material v. 2.0.0-beta.3 in Safari. Fix is available for web-animations-js: https://github.com/web-animations/web-animations-js/pull/118

@jelbourn I can also confirm that the error still happens with the new version in IE11 and Edge. As @karlhaas already mentioned it's a problem with web-animations-js and should get fixed there.

authors: HitomiTenshi christophechevalier code-tree frankspin89 jelbourn karlhaas victornoel


text:
A11y keyboard focus control in the List Component

Bug, feature request, or proposal:
Bug - List component has no content structure markup.
What is the expected behavior?
A screen reader user should be able to distinguish between the List Items.
What is the current behavior?
The demo List Component displays a list of 5 items with each item having multiple lines (image, heading, paragraph). The md-list has no focusable item, and the md-list-item objects have no defined structure; Thus a screen reader user cannot distinguish between item content.
What are the steps to reproduce?
See below.
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U
What is the use-case or motivation for changing an existing behavior?
Create a good keyboard user experience.
Which versions of Angular, Material, OS, browsers are affected?
Using screen reader JAWS17 with browsers Firefox, Internet Explorer 11, and Google Chrome, on Windows10.
Is there anything else we should know?
Screen reader user experience follows:

Press Tab key to the List element in the Tab Panel.
The screen reader skips over the Tab Panel and moves focus to the page footer. A md-list object could use the tabindex=0 to include it in the focus order.

Use the arrow keys to move screen reader focus to the Tab Panel List element.
JAWS says "list of 5 items", and braille display shows "list of 5 items".
As the user presses Down Arrow JAWS speaks the line text and the type of element, but does not indicate which lines belong to which List Item. All list items are merged into a single block of text.

The author must manage focus order for screen readers to understand content context.

3.1 The md-list uses role=list and md-list-item uses role=listitem, but no keyboard controls are provided.
Try including ARIA Supported States and Properties: aria-level, aria-posinset, aria-setsize.
3.2 Another possible solution may be to use the role=group property.
Use a group to form logical collection of items in a widget. when a group is used in the context of list, authors MUST limit its children to listitem elements.
3.3 Another solution may be in using the role=grid and role=gridcell properties.
The grid pattern can be used to group a set of interactive elements, such as links, buttons, or checkboxes. This may be useful for large md-list objects with interactive elements within each md-list-item.
See:
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0
http://w3c.github.io/aria-practices/#grid
Demo Angular Material - Component List
https://material.angular.io/components/component/list

I can also see the item distinction problem with VoiceOver + Chrome. Some things I think may be problematic:

Having content elements such as <h4> and <p> inside of role="listitem", which may only be intended to contain phrasing content.
The icons in the list items should be aria-hidden

I don't believe the list as a whole should have any tab stops in general, as it's not interactive content. Because the spec specifically mentions lists are not interactive, I think we are using role="list" incorrectly in general (especially for nav-list).
We need more research/experimentation into the appropriate way to have this kind of list that contains complicated content within each list item.

It is not clear why this section of page content is enclosed in a List element, other than possibly for visual layout. The WCAG criteria does not define the List element structure, but it is not recommended to enclude Headings and Paragraphs within a List element without proper HTML markup structure. The icons can be ARIA hidden if they offer no additional information that is already provided by text.
The List element may not be interactive, but it must be in the focus order for keyboard users. Whether there are Tab stops within the List element (for each List Item) may depend upon the size of the List, as it would be very time consuming and tedious to have to Down Arrow key through the entire list just to get to the List Item desired. If each List Item contains multiple HTML elements, then keyboard navigation would become a challenge. It is one thing to comply with WCAG criteria, but another to be user friendly. Possibly List Items could be enclosed in  with Headings and Paragraphs. The important thing is to establish a consistent pattern for the Angular brand style. There are many different techniques to implement WCAG success criteria’s.
David
From: Jeremy Elbourn [mailto:notifications@github.com]
Sent: May 18, 2017 09:59 PM
To: angular/material2
Cc: David Best; Author
Subject: Re: [angular/material2] A11y keyboard focus control in the List Component (#3682)
I can also see the item distinction problem with VoiceOver + Chrome. Some things I think may be problematic:

Having content elements such as  and  inside of role="listitem", which may only be intended to contain phrasing content.
The icons in the list items should be aria-hidden

I don't believe the list as a whole should have any tab stops in general, as it's not interactive content. Because the spec specifically mentions lists are not interactive, I think we are using role="list" incorrectly in general (especially for nav-list).
We need more research/experimentation into the appropriate way to have this kind of list that contains complicated content within each list item.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/angular/material2/issues/3682#issuecomment-302588274 , or mute the thread https://github.com/notifications/unsubscribe-auth/AVPBNs56alCkHd1blITzNbm2HWflT_kQks5r7PdbgaJpZM4MiV1l .  https://github.com/notifications/beacon/AVPBNrkd59IgjPl6qWt1EN4eOhDF6RgHks5r7PdbgaJpZM4MiV1l.gif

Believe this is related... MatNavList also has issues with focus.  See https://stackblitz.com/edit/angular-6fsgmx?file=app%2Flist-sections-example.html and tab through the elements.

authors: DaveBest99 jelbourn mckenzielong


text:
Ability to change snackbar location on screen

Bug, feature request, or proposal:
Feature request
What is the expected behavior?
I should be able to specify the location of the snackbar (eg. I want it to show up on the right-top side of the screen instead of bottom).
What is the current behavior?
Snack bar can only be shown at the very bottom of the screen.
What is the use-case or motivation for changing an existing behavior?
Users should not be restricted over where snack bar shows up.

Closing as a duplicate of #3577

authors: josephperrott ukrukarg


text:
event.stopPropogation() is missing in MdMenu ?!

Bug, feature request, or proposal:
I have MdMenu nested in MdListItem, which has also a click listener to open a MdDialog. By click on MdMenu opens the menu as well as the dialog at "same" time
What is the expected behavior?
I expect that by click on MdMenu, it should call event.stopPropogation() like in version 1.
Is there anything else we should know?
I rewrite a little Application, which is in Angular Material 1 written and I had not deal with that problem. App

Closing this issue as it does not follow the issue template. Please file a new issue that follows the template, which gives the team the information needed to investigate.
(missing steps to reproduce)


text:
[Table] Truncate text in header with ellipsis

Bug, feature request, or proposal:
Truncate text in mat-header-cell with elliplis as in style guide: https://material.io/guidelines/components/data-tables.html#data-tables-structure
What is the expected behavior?
Truncate text in mat-header-cell with elliplis
What is the current behavior?
Text not being truncated
What are the steps to reproduce?
Simply use this table
What is the use-case or motivation for changing an existing behavior?
Styleguide
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material: 5.1.0
Typescript: 2.6.2
Angular: 5.2.1
Is there anything else we should know?
No

This is my fix in styles.scss so that the table headers wrap correctly without  truncating the text. It takes care also of the sort icon.
// Fix wrap table headers, when cells also use word-wrap
.mat-header-cell,
.mat-header-cell button {
  display: block;
  overflow: hidden;
}

And this is if you want to truncate text with ellipsis both in the header and the table cells, but this will not work as good on mobile devices as the default word wrapping, as less text can be shown.
  // Truncate text in tables with ellipsis
  .no-wrap {
    .mat-header-cell,
    .mat-header-cell button,
    .mat-cell {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

without the .no-wrap it works great! 😄

When header have a sorting functionality then truncate CSS is not working properly.
Thanks in advance.

authors: Philip-Sultanescu jainankit102 tatsujb uncledent


text:
Look into merging ExpectedConditions and selenium-webdriver's until

At the moment, until seems to explicitly expect a WebElement, so if you do something like:
browser.wait(protractor.until.elementIsDisplayed(element(by.css('foo')));

it will break down because you're passing in an ElementFinder.
You can instead use our expected conditions library, but there's a lot of repeated ugly code there. It's especially bad that we export until on the Protractor namespace even though it doesn't work.

In WebDriver wait,
https://github.com/SeleniumHQ/selenium/blob/master/javascript/node/selenium-webdriver/lib/webdriver.js#L719
the protractor fn returns ElementFinder so the test value instanceof WebElement fails in:
var result = this.flow_.wait(function() {
      if (promise.isGenerator(fn)) {
        return promise.consume(fn, null, [driver]);
      }
      return fn(driver);
    }, opt_timeout, message);

if (condition instanceof WebElementCondition) {
      result = new WebElementPromise(this, result.then(function(value) {
        if (!(value instanceof WebElement)) {
          throw TypeError(
              'WebElementCondition did not resolve to a WebElement: '
                  + Object.prototype.toString.call(value));
        }
        return value;
      }));

IMO this check should not be added in WebDriver.

(assigning to you @juliemr because you probably understand this best)

We should do this but I think it's unnecessary churn for protractor@5 - let's target it for v6.

authors: johnjbarton juliemr sjelin

repo: angular/protractor


text:
chore(config): remove upgrade package mappings

The package is not listed in package.json and https://github.com/angular/angular.io/pull/2803 will contain instructions to add it manually.

I also removed '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', for the same reason

authors: filipesilva wardbell

repo: angular/quickstart


text:
fix breaking changes in API introduces in TS-1.8

added a few upcases that were previously unnecessary because the same result was obtained via subtype reduction

Thanks @vladima! I'll close this PR in favour of the other one that also upgrades to TS 1.8 (beta) and includes some more API fixes/adjustments.

authors: mprobst vladima


text:
sourceMappingURL is invalid and causes console error

The minified file dist/angulartics-mixpanel.min.js ends with a reference to a source map that cannot be found.  This line is shown below:
//# sourceMappingURL=../dist/angulartics-mixpanel.min.js.map
This causes an error when angulartics-mixpanel is included on a page:
Error: Could not find source map for: ~/dist/dist/angulartics-mixpanel.min.js.map
As you can see, the path that is searched for the source map file contains /dist/dist/, but of course the actual distribution does not have a nested /dist directory.

Edit: Closing this issue for now.  After changing some build steps (gulp) I can't replicate this problem anymore and I'm not getting any errors.  I will do some more investigation if I have time later today.

repo: angulartics/angulartics-mixpanel