HTML Plugin-seed 0.95: Problems compiling (webpack: Failed to compile)

[wodge]

(continued from Re: HTML plugin-seed 0.9.5 is available, upgraded to Angular 4, CLI 1.0 and Clarity 0.9.0)

Hi, I'm trying to build this environment using my Mac development environment.

I've followed the instructions to install, and have used all defaults to create the "myplugin" plugin.

The json server starts correctly, as expected:

MacBook-Pro-10:myplugin-ui wodge$ json-server --watch db.json --static ./src/webapp

  \{^_^}/ hi!

  Loading db.json

  Done

  Resources

  http://localhost:3000/echos

  http://localhost:3000/hosts

  Home

  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database

  Watching...

However, when I attempt to compile I get:

MacBook-Pro-10:myplugin-ui wodge$ npm start

> myplugin@0.9.2 start /Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui

> ng serve  --port 4201 --proxy-config proxy.conf.json

** NG Live Development Server is running on http://localhost:4201 **

Hash: 1f53bfd0301c4e004f76                                                               

Time: 17774ms

chunk    {0} main.bundle.js, main.bundle.js.map (main) 156 kB {3} [initial] [rendered]

chunk    {1} scripts.bundle.js, scripts.bundle.js.map (scripts) 576 kB {4} [initial] [rendered]

chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 396 kB {4} [initial] [rendered]

chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.02 MB [initial] [rendered]

chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in /Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (40,52): '=' expected.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (42,62): '=' expected.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (40,38): A parameter initializer is only allowed in a function or constructor implementation.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (40,46): Cannot find name 'keyof'.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (42,46): A parameter initializer is only allowed in a function or constructor implementation.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (42,56): Cannot find name 'keyof'.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (58,42): Cannot find name 'Partial'.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (99,22): Cannot find name 'Partial'.

/Users/wodge/runecast/WebClientPlugin/WebClientPlugin-Resources/plugin-seed-0.9.5/tools/myplugin-ui/node_modules/@types/jasmine/index.d.ts (99,35): Cannot find name 'Partial'.

webpack: Failed to compile.

Could you please advise how to resolve this issue?

N.B. I have also built the environment using a Windows OS, and have the same issue.

I've enclosed the "npm list" output with this post.

Many thanks

[laurentsd]

Thanks for sending your npm info.

I see older versions like that could be explaining your problem:

@angular/common@2.4.10

├── @angular/compiler@2.4.10

├─┬ @angular/compiler-cli@2.4.10

You didn't start with plugin-seed 0.9.5 from scratch but tried to upgrade an older version of plugin-seed?

If you upgrade yourself it is very important to follow all the instructions in the change log, and to match all the npm versions from package.json available in version 0.9.5.  Upgrading to Angular 4 and Angular CLI 1.0 requires several steps.

Otherwise I recommend to start a new project with plugin-seed 0.9.5 and move your components code there.

Hopefully this is the last time with such a tricky upgrade because Angular and CLI went GA and future changes should be smoother.

[wodge]

Hi laurentsd,

Many thanks for getting back to me. I haven't tried to perform an upgrade, as haven't used the plugin-seed before.

I have tried to follow the instructions in the PDF (HTML Client Plugin Seed v 0.9.2), and have installed the following as pre-reqs:

• Node.js version 6.9

Installed 6.9.0 explicitly, from:

(Mac) https://nodejs.org/dist/v6.9.0/node-v6.9.0.pkg

(Win) https://nodejs.org/dist/v6.9.0/node-v6.9.0-x64.msi

• Angular-CLI

npm install -g @angular/cli

• Json-server

npm install -g json-server

- I did this for both the Mac environment, and Windows environment - with the same result. It is probable I haven't understood the installation sequence properly

Would you be able to advise the steps I need to take to create the environment from scratch for a new project please, if it is different to those given above?

We're really wanting to work on the plug-in as soon as possible, and this tool looks fantastic for us. We're really keen to get working on it

Thank you

[laurentsd]

Starting from scratch with version 0.9.5 means running the script tools/generate-plugin  to create a new plugin project and starting from there.

This way npm packages will be configured correctly and you add new code, or copy/paste the code you had started to write before.

[wodge]

Hi Laurentsd,

I've tried doing this (starting from scratch again by:

1. removing the myplugin-ui / -server directories.
2. uninstalling json-server, removing the myplugin-ui / -server directories
3. uninstalling node.js / rpm
4. Running the "generate-plugin" script
5. npm install (ran successfully)
6. from command prompt: json-server --watch db.json --static ./src/webapp (ran successfully)
7. From command prompt: npm start

This then fails as reported in my previous post (for both Mac and Windows environments).

I've included the rpm list trace as a file.

If you could advise what I could do next to diagnose / resolve, that would be very much appreciated.

Thank you.

[laurentsd · Accepted solution]

Your list still contains Angular npm versions 2.4.10 instead of 4.0.x.   It looks like you are still using plugin-seed 0.9.2 instead of 0.9.5!

The top of package.json should have:  "version": "0.9.5"

[wodge]

Resolved:

Good spot! I was using the tools from 0.9.2 instead of 0.9.5. Have now downloaded 0.9.5.1, and tested. All is working correctly and as expected.

Many thanks for resolving this - much appreciated.