Components: Alpha 9 AoT compiler error

[spock123]

Hey guys,

• I updated to the new Alpha 9, upgraded to the single Material Module.
  So far, things work great in development.

BUT: running the AoT compiler results in errors: (compiler-cli 0.6.2):

Error: parameters received {"filePath":"/Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/material/core/a11y/live-announcer.d.ts","name":"MdLiveAnnouncer"} which is not a StaticSymbol
    at StaticReflector.parameters (/Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler-cli/src/static_reflector.js:92:19)
    at CompileMetadataResolver.getDependenciesMetadata (/Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler/bundles/compiler.umd.js:14336:81)
    at CompileMetadataResolver.getTypeMetadata (/Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler/bundles/compiler.umd.js:14301:28)
    at /Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler/bundles/compiler.umd.js:14448:43
    at Array.forEach (native)
    at CompileMetadataResolver.getProvidersMetadata (/Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler/bundles/compiler.umd.js:14428:21)
    at /Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler/bundles/compiler.umd.js:14435:43
    at Array.forEach (native)
    at CompileMetadataResolver.getProvidersMetadata (/Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler/bundles/compiler.umd.js:14428:21)
    at /Users/lrj/projects/angular2-webpack2-typescript2/node_modules/@angular/compiler/bundles/compiler.umd.js:14120:73
Compilation failed

Anyone stumbled across this?

[mmrath]

Same error for me. It would be nice to have AOT compile validation as a part of build if it not already there.

[spock123]

@mmrath same thoughts here, I just wasn't sure I did something wrong 😎

Thanks for confirming u have the same issue

[jelbourn]

I can reproduce this and am trying to figure out what's wrong. AFAICT, MdLiveAnnouncer isn't doing anything weird, so it's not clear where the problem lives.

[mmrath]

@jelbourn Before Alpha 9 was published, I was using Alpha 9 experimental. I had similar AOT issue with DialogContainer. I am not sure, but it could be related to Dialog.

[qdouble]

@jelbourn is the fixed commit going to be pushed to npm soon?

[mmrath]

@jelbourn I have used alpha 9 experimental which has the fix #1355 , but now now I have the following error. But I am not 100% sure if this is just for me or an issue.

Module not found: Error: Can't resolve '../../node_modules/@angular/material/dialog/dialog-container.ngfactory' 

Module not found: Error: Can't resolve '../../node_modules/@angular/material/snack-bar/snack-bar-container.ngfactory'

[mathebox]

@mmrath I get the same error using alpha.9-1.

[jelbourn]

Yeah, that's why I haven't published the commit to @latest yet; at this point it seems like it may be bug in NgModule itself. Still investigating.

[jelbourn]

Just published alpha.9-3, which should resolve this.

[szechyjs]

I just tried alpha.9-3 and got the following error from ng build -aot

10% building modules 3/6 modules 3 active ...ode_modules/style-loader/addStyles.js/Users/jared/code/foo/node_modules/@angular/material/icon/icon.css:83
.map*/
^
SyntaxError: Unexpected token .
    at WebpackResourceLoader._evaluate (/Users/jared/code/foo/node_modules/@ngtools/webpack/src/resource_loader.js:75:24)
    at /Users/jared/code/foo/node_modules/@ngtools/webpack/src/resource_loader.js:95:52

[szechyjs]

UPDATE: It looks like the file is different every time.

10% building modules 3/6 modules 3 active ...ode_modules/style-loader/addStyles.js/Users/jared/code/foo/node_modules/@angular/material/list/list.css:214
.map*/
^
SyntaxError: Unexpected token .
    at WebpackResourceLoader._evaluate (/Users/jared/code/foo/node_modules/@ngtools/webpack/src/resource_loader.js:75:24)
    at /Users/jared/code/foo/node_modules/@ngtools/webpack/src/resource_loader.js:95:52

I've found that by removing the /*# sourceMappingURL=<component_name>.css.map */ line from the end of every css file it resolves this error.

Unfortunately I then get this error.

ng build --aot
7128ms building modules
45ms sealing
5ms optimizing
0ms basic module optimization
98ms module optimization
1ms advanced module optimization
28ms basic chunk optimization
0ms chunk optimization
11ms advanced chunk optimization
1ms module and chunk tree optimization
107ms module reviving
9ms module order optimization
4ms module id optimization
6ms chunk reviving
0ms chunk order optimization
19ms chunk id optimization
63ms hashing
1ms module assets processing
129ms chunk assets processing
3ms additional chunk assets processing
0ms recording
0ms additional asset processing
1375ms chunk asset optimization
132ms asset optimization
 95% emittingError: ENAMETOOLONG: name too long, open '/Users/jared/code/foo/dist/md-list, md-nav-list {
  padding-top: 8px;
  display: block; }
  md-list [md-subheader], md-nav-list [md-subheader] {
    display: block;
    box-sizing: border-box;
    height: 48px;
    padding: 16px;
    margin: 0;
    font-size: 14px;
    font-weight: 500; }
    md-list [md-subheader]:first-child, md-nav-list [md-subheader]:first-child {
      margin-top: -8px; }
  md-list md-list-item .md-list-item, md-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
    font-size: 16px;
    height: 48px;
    padding: 0 16px; }
  md-list md-list-item.md-list-avatar .md-list-item, md-list a[md-list-item].md-list-avatar .md-list-item, md-nav-list md-list-item.md-list-avatar .md-list-item, md-nav-list a[md-list-item].md-list-avatar .md-list-item {
    height: 56px; }
  md-list md-list-item.md-2-line .md-list-item, md-list a[md-list-item].md-2-line .md-list-item, md-nav-list md-list-item.md-2-line .md-list-item, md-nav-list a[md-list-item].md-2-line .md-list-item {
    height: 72px; }
  md-list md-list-item.md-3-line .md-list-item, md-list a[md-list-item].md-3-line .md-list-item, md-nav-list md-list-item.md-3-line .md-list-item, md-nav-list a[md-list-item].md-3-line .md-list-item {
    height: 88px; }
  md-list md-list-item .md-list-text, md-list a[md-list-item] .md-list-text, md-nav-list md-list-item .md-list-text, md-nav-list a[md-list-item] .md-list-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 16px; }
    md-list md-list-item .md-list-text > *, md-list a[md-list-item] .md-list-text > *, md-nav-list md-list-item .md-list-text > *, md-nav-list a[md-list-item] .md-list-text > * {
      margin: 0;
      padding: 0;
      font-weight: normal;
      font-size: inherit; }
    md-list md-list-item .md-list-text:empty, md-list a[md-list-item] .md-list-text:empty, md-nav-list md-list-item .md-list-text:empty, md-nav-list a[md-list-item] .md-list-text:empty {
      display: none; }
    md-list md-list-item .md-list-text:first-child, md-list a[md-list-item] .md-list-text:first-child, md-nav-list md-list-item .md-list-text:first-child, md-nav-list a[md-list-item] .md-list-text:first-child {
      padding: 0; }
  md-list md-list-item [md-list-avatar], md-list a[md-list-item] [md-list-avatar], md-nav-list md-list-item [md-list-avatar], md-nav-list a[md-list-item] [md-list-avatar] {
    width: 40px;
    height: 40px;
    border-radius: 50%; }
  md-list md-list-item [md-list-icon], md-list a[md-list-item] [md-list-icon], md-nav-list md-list-item [md-list-icon], md-nav-list a[md-list-item] [md-list-icon] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 4px; }
  md-list md-list-item [md-line], md-list a[md-list-item] [md-line], md-nav-list md-list-item [md-line], md-nav-list a[md-list-item] [md-line] {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box; }
    md-list md-list-item [md-line]:nth-child(n+2), md-list a[md-list-item] [md-line]:nth-child(n+2), md-nav-list md-list-item [md-line]:nth-child(n+2), md-nav-list a[md-list-item] [md-line]:nth-child(n+2) {
      font-size: 14px; }

md-list[dense], md-nav-list[dense] {
  padding-top: 4px;
  display: block; }
  md-list[dense] [md-subheader], md-nav-list[dense] [md-subheader] {
    display: block;
    box-sizing: border-box;
    height: 40px;
    padding: 16px;
    margin: 0;
    font-size: 13px;
    font-weight: 500; }
    md-list[dense] [md-subheader]:first-child, md-nav-list[dense] [md-subheader]:first-child {
      margin-top: -4px; }
  md-list[dense] md-list-item .md-list-item, md-list[dense] a[md-list-item] .md-list-item, md-nav-list[dense] md-list-item .md-list-item, md-nav-list[dense] a[md-list-item] .md-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    box-sizing: border-box;
    font-size: 13px;
    height: 40px;
    padding: 0 16px; }
  md-list[dense] md-list-item.md-list-avatar .md-list-item, md-list[dense] a[md-list-item].md-list-avatar .md-list-item, md-nav-list[dense] md-list-item.md-list-avatar .md-list-item, md-nav-list[dense] a[md-list-item].md-list-avatar .md-list-item {
    height: 48px; }
  md-list[dense] md-list-item.md-2-line .md-list-item, md-list[dense] a[md-list-item].md-2-line .md-list-item, md-nav-list[dense] md-list-item.md-2-line .md-list-item, md-nav-list[dense] a[md-list-item].md-2-line .md-list-item {
    height: 60px; }
  md-list[dense] md-list-item.md-3-line .md-list-item, md-list[dense] a[md-list-item].md-3-line .md-list-item, md-nav-list[dense] md-list-item.md-3-line .md-list-item, md-nav-list[dense] a[md-list-item].md-3-line .md-list-item {
    height: 76px; }
  md-list[dense] md-list-item .md-list-text, md-list[dense] a[md-list-item] .md-list-text, md-nav-list[dense] md-list-item .md-list-text, md-nav-list[dense] a[md-list-item] .md-list-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 16px; }
    md-list[dense] md-list-item .md-list-text > *, md-list[dense] a[md-list-item] .md-list-text > *, md-nav-list[dense] md-list-item .md-list-text > *, md-nav-list[dense] a[md-list-item] .md-list-text > * {
      margin: 0;
      padding: 0;
      font-weight: normal;
      font-size: inherit; }
    md-list[dense] md-list-item .md-list-text:empty, md-list[dense] a[md-list-item] .md-list-text:empty, md-nav-list[dense] md-list-item .md-list-text:empty, md-nav-list[dense] a[md-list-item] .md-list-text:empty {
      display: none; }
    md-list[dense] md-list-item .md-list-text:first-child, md-list[dense] a[md-list-item] .md-list-text:first-child, md-nav-list[dense] md-list-item .md-list-text:first-child, md-nav-list[dense] a[md-list-item] .md-list-text:first-child {
      padding: 0; }
  md-list[dense] md-list-item [md-list-avatar], md-list[dense] a[md-list-item] [md-list-avatar], md-nav-list[dense] md-list-item [md-list-avatar], md-nav-list[dense] a[md-list-item] [md-list-avatar] {
    width: 40px;
    height: 40px;
    border-radius: 50%; }
  md-list[dense] md-list-item [md-list-icon], md-list[dense] a[md-list-item] [md-list-icon], md-nav-list[dense] md-list-item [md-list-icon], md-nav-list[dense] a[md-list-item] [md-list-icon] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 4px; }
  md-list[dense] md-list-item [md-line], md-list[dense] a[md-list-item] [md-line], md-nav-list[dense] md-list-item [md-line], md-nav-list[dense] a[md-list-item] [md-line] {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box; }
    md-list[dense] md-list-item [md-line]:nth-child(n+2), md-list[dense] a[md-list-item] [md-line]:nth-child(n+2), md-nav-list[dense] md-list-item [md-line]:nth-child(n+2), md-nav-list[dense] a[md-list-item] [md-line]:nth-child(n+2) {
      font-size: 13px; }

md-divider {
  display: block;
  border-top: 1px solid;
  margin: 0; }

md-nav-list a {
  text-decoration: none;
  color: inherit; }

md-nav-list .md-list-item {
  cursor: pointer; }
  md-nav-list .md-list-item:hover, md-nav-list .md-list-item.md-list-item-focus {
    outline: none; }

.map'
    at Error (native)

/Users/jared/code/foo/node_modules/webpack/lib/Compiler.js:203
                        if(err) return callback(err);
                     ^
TypeError: Cannot read property 'hash' of undefined
    at /Users/jared/code/foo/node_modules/angular-cli/tasks/build-webpack.js:38:26
    at Compiler.<anonymous> (/Users/jared/code/foo/node_modules/webpack/lib/Compiler.js:203:22)
    at Compiler.<anonymous> (/Users/jared/code/foo/node_modules/webpack/lib/Compiler.js:302:19)
    at /Users/jared/code/foo/node_modules/webpack/node_modules/async/lib/async.js:52:16
    at done (/Users/jared/code/foo/node_modules/webpack/node_modules/async/lib/async.js:241:17)
    at /Users/jared/code/foo/node_modules/webpack/node_modules/async/lib/async.js:44:16
    at fs.js:1305:7
    at FSReqWrap.oncomplete (fs.js:123:15)

The output formatting from angular-cli makes things difficult to debug. But this looks like another .map problem, I'm just not sure from where.

/cc @hansl

[spock123]

Thank you so much for a great work fixing this.
I know it hasn't been easy with the conference going on, travelling etc...

My application compiles fine with 9-3 (Angular 2.0.1, Angular-cli 0.6.3)

Great work! Much appreciated

[slmyers]

I'm unable to compile aswell. Appears to be a similar issue to @szechyjs.

slmyers@slmyers-Inspiron-5559:~/Projects/screenerClient$ ng build --aot
 10% building modules 3/6 modules 3 active ...ode_modules/style-loader/addStyles.js/home/slmyers/Projects/screenerClient/node_modules/@angular/material/list/list.css:214
.map*/
^
SyntaxError: Unexpected token .
    at WebpackResourceLoader._evaluate (/home/slmyers/Projects/screenerClient/node_modules/@ngtools/webpack/src/resource_loader.js:75:24)
    at /home/slmyers/Projects/screenerClient/node_modules/@ngtools/webpack/src/resource_loader.js:95:52

using these angular modules

"@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/material": "2.0.0-alpha.9-3",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.1",

And this ng cli version

slmyers@slmyers-Inspiron-5559:~/Projects/screenerClient$ ng -v
angular-cli: 1.0.0-beta.16
node: 6.7.0
os: linux x64

[Raincal]

@jelbourn This error reappears in 2.0.0-alpha.9-experimental-5

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}