Webpack hangs when ClairtyModule imported on project created with angular-cli

[RainTomassi]

Select one ... (check one with "x")

[x] bug - More of a question/request for guidance
[ ] feature request
[ ] enhancement

Expected behavior

angular-cli app, added Clarity, Webpack should complete and bundle should be valid(?)
Time: 1734ms
chunk {0} main.bundle.js, main.bundle.map (main) 4.64 kB {3} [initial]
chunk {1} styles.bundle.js, styles.bundle.map (styles) 730 kB {4} [initial]
chunk {2} scripts.bundle.js, scripts.bundle.map (scripts) 55.8 kB {4} [initial]
chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.22 MB [initial]
chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]
webpack: bundle is now VALID.

Actual behavior

I'm new to web development so apologies in advance as I don't fully understand all the technologies at play here (e.g. webpack). After following the instructions for adding Clarity to an app created with angular-cli, webpack seems to hang when building modules.
21% building modules 96/96 modules 0 active
When actually trying to connect to the new site when webpack is in this state, I receive this on the console:
webpack: wait until bundle finished: /

If I do not include ClarityModule, webpack completes and I get the nice little 'app works!' message generated by the angular-cli project:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ClarityModule } from 'clarity-angular';
import { AppComponent } from './app.component';
...
imports: [
BrowserModule,
FormsModule,
HttpModule,
],

But with ClarityModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ClarityModule } from 'clarity-angular';
import { AppComponent } from './app.component';
...
imports: [
BrowserModule,
ClarityModule,
FormsModule,
HttpModule,
],
Webpack hangs.

This is on a brand new project created with the angular-cli (e.g. ng new myproject).

Reproduction of behavior

Create new project with angular-cli
ng new myproj
Follow instructions for adding clarity, add css and js to the angular-cli.json file under styles and scripts sections.
npm start to confirm that you receive the "app works!" message from your browser
Import module in app.modules.ts
npm start seems to hang at webpack preparation.

Environment details

$ ng --version
angular-cli: 1.0.0-beta.22-1
node: 6.2.1
os: linux x64

14 "dependencies": {
15 "@angular/common": "2.2.3",
16 "@angular/compiler": "2.2.3",
17 "@angular/core": "2.2.3",
18 "@angular/forms": "2.2.3",
19 "@angular/http": "2.2.3",
20 "@angular/platform-browser": "2.2.3",
21 "@angular/platform-browser-dynamic": "2.2.3",
22 "@angular/router": "3.2.3",
23 "@webcomponents/custom-elements": "^1.0.0-alpha.3",
24 "clarity-angular": "^0.7.3",
25 "clarity-icons": "^0.7.3",
26 "clarity-ui": "^0.7.3",
27 "core-js": "^2.4.1",
28 "mutationobserver-shim": "^0.3.2",
29 "rxjs": "5.0.0-beta.12",
30 "sass-loader": "^4.0.2",
31 "ts-helpers": "^1.1.1",
32 "zone.js": "^0.6.23"

• Angular version: 2.0.X

• Clarity version:

• OS and version:
  Ubuntu 16.04

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  N/A

[Shijir]

@RainTomassi people are experiencing the same error with the latest angular-cli 3426 too. We are currently investigating the possible solutions for this issue and get back to you soon.

[RainTomassi]

Thank you for the update. Appreciate the quick response and apologies, I didn't see the other ticket :-)

[dragosrusu]

I can confirm the following: if you remove the clarity dependency as a module and do "ng serve" and then update that file by adding that dependency and let webpack do the build job, it works!

So it must be something that the beginning that makes the compiler not finding ClarityModule. Maybe some include PATH's?

[youdz]

angular-cli@1.0.0-beta.22 is still experimental and forces AOT compilation. See angular/angular-cli#3354 and angular/angular-cli#3368 on the angular-cli project.

It's a pretty heated topic right now, but all we can do on our side is become AOT-compliant as soon as possible. So I'm closing this as a duplicate of #62.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.