The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Alain Couniot (8) [Avatar] Offline
#1
Tried first with my most recent installation on Ubuntu (tsc 2.1.1). Got problems with jasmine typings. Googled a bit: found a possible incompatibility between TypeScript 2.1.x and Angular 2 -> downgraded tsc to 2.0.0 : still the problem: whether running "ng build" or "ng serve", build fails.

Message with "ng build":

===== begin output ======
Version: webpack 2.1.0-beta.25
Time: 10312ms
Asset Size Chunks Chunk Names
main.bundle.js 3 MB 0, 2 [emitted] main
styles.bundle.js 162 kB 1, 2 [emitted] styles
inline.js 5.53 kB 2 [emitted] inline
main.map 3.14 MB 0, 2 [emitted] main
styles.map 207 kB 1, 2 [emitted] styles
inline.map 5.59 kB 2 [emitted] inline
index.html 477 bytes [emitted]

ERROR in [default] /media/elrond_2tb/devel/manning-source/angular-in-action/components/node_modules/@types/jasmine/index.d.ts:39:37
A parameter initializer is only allowed in a function or constructor implementation.

ERROR in [default] /media/elrond_2tb/devel/manning-source/angular-in-action/components/node_modules/@types/jasmine/index.d.ts:39:45
Cannot find name 'keyof'.

ERROR in [default] /media/elrond_2tb/devel/manning-source/angular-in-action/components/node_modules/@types/jasmine/index.d.ts:39:51
'=' expected.

ERROR in [default] /media/elrond_2tb/devel/manning-source/angular-in-action/components/src/app/navbar/navbar.component.ts:7:2
An object literal cannot have multiple properties with the same name in strict mode.

ERROR in [default] /media/elrond_2tb/devel/manning-source/angular-in-action/components/src/app/navbar/navbar.component.ts:7:2
Duplicate identifier 'styles'.
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.81 kB 0
webpack: Failed to compile.

===== end output ======

System configuration:
tsc --version : Version 2.0.0

npm version:
{ components: '0.0.0',
npm: '3.10.10',
ares: '1.10.1-DEV',
http_parser: '2.7.0',
icu: '57.1',
modules: '48',
node: '6.9.4',
openssl: '1.0.2j',
uv: '1.9.1',
v8: '5.1.281.89',
zlib: '1.2.8' }

ng-cli version:
angular-cli: 1.0.0-beta.19-3
node: 6.9.4
os: linux x64


source files (incl. package.json) : unchanged from github

Any idea how to fix the problem? Thx in advance.

Alain Couniot (8) [Avatar] Offline
#2
Further investigation: problem comes most likely from environment (TypeScript + Angular) as it can be reproduced with a pristine ng-cli project:
* ng init
* ng serve
-> bingo: exactly the same behavior smilie

Currently stuck then ...
Alain Couniot (8) [Avatar] Offline
#3
Further information (making progress)
Pristine project (as generated by ng) works fine if @typings/jasmine is nailed to 2.5.40 (with jasmine-core unchanged at 2.4.1)

Unfortunately, same approach does not totally succeed with "components": only 1 error message left

1697ms chunk asset optimization
94% asset optimizationError in bail mode: [default] /media/elrond_2tb/devel/manning-source/angular-in-action/components/src/app/navbar/navbar.component.ts:7:2
An object literal cannot have multiple properties with the same name in strict mode.

Strange because the line seems to be OK at first sight:
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css'],
styles: [`.btn { background-color: #999999; }`], // <-- line 7
encapsulation: ViewEncapsulation.Emulated
})

Any idea, someone?
Alain Couniot (8) [Avatar] Offline
#4
Well, commenting out the allegedly offending line eliminates the error and "ng serve" starts and seems to run without any output but app does not work on the browser side. Launching the developer console shows the following stack trace:

Uncaught TypeError: ctorParameters.map is not a function
at ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:39822:45)
at Reflector.parameters (http://localhost:4200/main.bundle.js:39956:44)
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:4200/main.bundle.js:21529:54)
at CompileMetadataResolver.getTypeMetadata (http://localhost:4200/main.bundle.js:21494:26)
at http://localhost:4200/main.bundle.js:21637:41
at Array.forEach (native)
at CompileMetadataResolver.getProvidersMetadata (http://localhost:4200/main.bundle.js:21617:19)
at http://localhost:4200/main.bundle.js:21315:71
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/main.bundle.js:21306:44)
ReflectionCapabilities.parameters @ reflection_capabilities.js:58
Reflector.parameters @ reflector.js:27
CompileMetadataResolver.getDependenciesMetadata @ metadata_resolver.js:435
CompileMetadataResolver.getTypeMetadata @ metadata_resolver.js:400
(anonymous) @ metadata_resolver.js:543
CompileMetadataResolver.getProvidersMetadata @ metadata_resolver.js:523
(anonymous) @ metadata_resolver.js:221
CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:212
(anonymous) @ metadata_resolver.js:225
CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:212
RuntimeCompiler._compileComponents @ runtime_compiler.js:133
RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:71
RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:62
PlatformRef_._bootstrapModuleWithZone @ application_ref.js:302
PlatformRef_.bootstrapModule @ application_ref.js:284
(anonymous) @ main.ts:12
__webpack_require__ @ bootstrap ddeabcf…:52
(anonymous) @ zone.js:1426
__webpack_require__ @ bootstrap ddeabcf…:52
webpackJsonpCallback @ bootstrap ddeabcf…:23
(anonymous) @ main.bundle.js:1

Sigh!
Alain Couniot (8) [Avatar] Offline
#5
Well, by following the chapter's instructions, starting from scratch, everything goes smoothly so far (up to just before styling), so the only takeaway to keep is that errors may be experienced when checking out the sources from GitHub to date of March 05 but the text in the book is OK (fine!)
Alain Couniot (8) [Avatar] Offline
#6
Actually, the problem persists but the previous success reports shows that it's not the book's source code that is faulty.

After this success, I decided to "bare clone" the version that worked, to put it in a remote git on my NAS and then to redo a checkout (git clone), followed by a "npm install" and then "ng serve" and -- too bad! -- the same stack trace as before ("Uncaught TypeError: ctorParameters.map is not a function
at ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:39670:45)..." reappared.

Running "ng serve" from the working version (that I kept "just in case") still works. I will now compare the content of the two filesystem subtrees but it shows how brittle the Angular ecosystem remains ... smiliesmilie

Any idea, anybody?
jeremy.wilken (208) [Avatar] Offline
#7
Ok, quite the saga! The CLI has been a moving target and unfortunately some of the chapters are a few releases behind which can complicate matters. The versions of dependencies tends to work on release, but sometimes new deps releases are showing to cause issues. I should ensure that at least the chapter examples have versions locked down.

Delete your node modules, and then edit the package.json file so all version dependencies just have the version number (remove the ~ and ^ characters). Then do `npm install` again and it should only download the specific versions. That will help but some sub-dependencies still get updated and throw the error about the `styles` property. Something changed so that you cannot have both a stylesUrl and styles array on the component metadata, so I'll have to fix that in the next release.
Alain Couniot (8) [Avatar] Offline
#8
Hi Jeremy,

Thanks for the suggestion smilie. Sure! Now, I still hesitate between this course of action (that should indeed succeed) or applying the brand new guidelines for the migration to the latest RC version of angular-cli. I think I will first try the latter (and let you know the outcome) and if it doesn't succeed to take the former as fallback.

Anyway, the constantly evolving landscape of Angular-CLI is a real PITA smilie
jeremy.wilken (208) [Avatar] Offline
#9
If you want to take the plunge to refactor to the latest CLI, feel free! I've done it on several projects successfully, but on one I kept hitting roadblocks and had to redo it a few times to isolate the issue (deep dependency issue when I had a shrinkwrap file).

Alternatively, you can generate a new project, and copy the actual files to the new project over. There is an issue that came up more recently that you cannot have a styles and styleUrls property on a component.
Alain Couniot (8) [Avatar] Offline
#10
Tried your recommended path first. By suppressing the "styles:" entry in navbar.component.ts and moving to Angular 2.2.3 (based on info from https://github.com/valor-software/ng2-dragula/issues/496, for example - just a Google result), "components" works like a charm. I haven't tried to fix the stylesUrl/styles conflict by possibly moving the style specification to the CSS (I just commented out the "style:" line); so maybe the violet "Reload" button has not the right color.

The rest seems to be OK.

In attachment, the updated package.json.

Kind regards,
Alain
477578 (8) [Avatar] Offline
#11
Unused components/pipes/directives in my workspace are detected by the compiler, which throws the error Cannot determine the module for class (...) for each file. It stops compilation, and does not seem be configurable. This is a problem, since I need to have those files in my workspace, but do not need them in the resultant app (partner implementations requiring different combos of shared components). This is especially frustrating with regards to compiling in a webpack loader, which should be able to provide a list of files which are included, regardless of workspace.
GCLUB ??????
goldenslot