Provides ng goal for angular-cli

[softdays]

It would be awesome to get support for angular-cli

[eirslett]

You can do it if you define npm scripts, and use the npm mojo ;-)

[softdays]

Yes exactly the same job you performed with gulp

[francisoud]

@eirslett Can you provide an example on the wiki page: https://github.com/eirslett/frontend-maven-plugin/wiki
I didn't knew it was possible until I decided to create an issue to add this feature and found this one ;)
It would be easier to find ;)

[francisoud]

For the record, here's what has to be done:

pom.xml

    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <executions>
...
                    <execution>
                        <id>npm run-script prod</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run-script prod</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
...

package.json

{
  "name": "myapp"
,...
  "scripts": {
...    "e2e": "protractor",
      "prod": "ng build -prod"
  },

[legolas]

Thanks this helped me!

[vorgg]

The POM excerpt provided by francisoud seems to work great if you already have Angular-CLI installed on the machine you are running the build on; however, if you don't have Angular-CLI installed and can't install it on the build machine due to say company policies is there a way to install Angular-CLI similarly to how you can use the plugin to temporarily install Node/NPM, Bower, Grunt?

I attempted it by using the following excerpt from my POM that uses the frontend plugin. I tried it with and without both the --no-optional and -g flags, but found that the inclusion of both those flags was what yielded more success although doing a global install seems odd to me for these purposes.

I'm not trying to install Angular-CLI on my build box for any other reason than to build my Angular 2 project and store it in a WAR. When I run the build on my development box where Angular-CLI is installed, I get a success and a resulting WAR that is deployable. I'm trying to reach the same state on our build system (TeamCity).

Anyway, the error I'm encountering is that with this POM, I seem to get Angular-CLI installed, but when it tries to call Angular-CLI with the ng command defined in the package.json to do the actual build, the ng command cannot be found, so I assume it's not in the path or something like that or maybe Angular-CLI doesn't actually get installed.

Please see the build log excerpt below showing a suspected problem with node-sass errors and later not being able to find the ng command. Again this POM works as desired on my development box where I have Angular-CLI installed, but I cannot do a normal install of Angular-CLI on our enterprise build servers, so I'm trying to do the temporary install option with the plugin like it can do with bower and grunt.

If I don't have Angular-CLI successfully installed on the machine I'm building on, the script ng command that francisoud suggests fails. Is there a different goal definition or method for installing Angular-CLI so I can use the script ng command that francisoud suggests?

Thanks!

POM Excerpt ...

<build>
    <plugins>
...    
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>${frontend.maven.plugin}</version>
        <configuration>
          <nodeVersion>${node.version}</nodeVersion>
          <npmVersion>${npm.version}</npmVersion>
        </configuration>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
          </execution>
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install --production</arguments>
            </configuration>
          </execution>
          <execution>
            <id>angular-cli install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install --no-optional -g angular-cli</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm run-script prod</id>
            <phase>prepare-package</phase>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run-script prod</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.4</version>
        <configuration>
          <warSourceDirectory>dist</warSourceDirectory>
          <failOnMissingWebXml>false</failOnMissingWebXml>
        </configuration>
      </plugin>
    </plugins>
  </build>

Package.json Excerpt ...

    "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor",
    "prod": "ng build --prod --base-href /startoverui/ "

Build Log Excerpt ...

[16:32:29][c.t.c.x.so:startoverui] [INFO] Running 'npm install --no-optional -g angular-cli --color=false' in /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui
[16:32:51][c.t.c.x.so:startoverui] [ERROR] npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[16:32:56][c.t.c.x.so:startoverui] [ERROR] npm WARN deprecated lodash-node@2.4.1: This package is discontinued. Use lodash@^4.0.0.
[16:33:09][c.t.c.x.so:startoverui] [ERROR] npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[16:33:09][c.t.c.x.so:startoverui] [ERROR] npm WARN deprecated tough-cookie@2.2.2: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
[16:34:09][c.t.c.x.so:startoverui] [INFO] /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/bin/ng -> /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/lib/node_modules/angular-cli/bin/ng
[16:34:10][c.t.c.x.so:startoverui] [INFO] 
[16:34:10][c.t.c.x.so:startoverui] [INFO] > execSync@1.0.2 install /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/lib/node_modules/angular-cli/node_modules/execSync
[16:34:10][c.t.c.x.so:startoverui] [INFO] > node install.js
[16:34:10][c.t.c.x.so:startoverui] [INFO] 
[16:34:11][c.t.c.x.so:startoverui] [INFO] [execsync v1.0.2] Attempting to compile native extensions.
[16:34:11][c.t.c.x.so:startoverui] [INFO] [execSync v1.0.2]
[16:34:11][c.t.c.x.so:startoverui] [INFO]     Native code compile failed!!
[16:34:12][c.t.c.x.so:startoverui] [INFO] 
[16:34:12][c.t.c.x.so:startoverui] [INFO] > node-sass@3.12.2 install /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/lib/node_modules/angular-cli/node_modules/node-sass
[16:34:12][c.t.c.x.so:startoverui] [INFO] > node scripts/install.js
[16:34:12][c.t.c.x.so:startoverui] [INFO] 
[16:34:12][c.t.c.x.so:startoverui] [ERROR] info node-sass install Cached binary found at /opt/teamcity-agent/.npm/node-sass/3.12.2/linux-x64-46_binding.node
[16:34:14][c.t.c.x.so:startoverui] [INFO] 
[16:34:14][c.t.c.x.so:startoverui] [INFO] > node-sass@3.12.2 postinstall /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/lib/node_modules/angular-cli/node_modules/node-sass
[16:34:14][c.t.c.x.so:startoverui] [INFO] > node scripts/build.js
[16:34:14][c.t.c.x.so:startoverui] [INFO] 
[16:34:14][c.t.c.x.so:startoverui] [ERROR] info node-sass build Binary found at /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/lib/node_modules/angular-cli/node_modules/node-sass/vendor/linux-x64-46/binding.node
[16:34:14][c.t.c.x.so:startoverui] [ERROR] info node-sass build Testing binary
[16:34:14][c.t.c.x.so:startoverui] [ERROR] info node-sass build Binary is fine
[16:34:17][c.t.c.x.so:startoverui] [INFO] /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/lib
[16:34:17][c.t.c.x.so:startoverui] [INFO] └─┬ angular-cli@1.0.0-beta.19-3 
[16:34:17][c.t.c.x.so:startoverui] [INFO]   ├─┬ @angular-cli/ast-tools@1.0.7 
[16:34:17][c.t.c.x.so:startoverui] [INFO]   │ └── rxjs@5.0.0-beta.11 
[16:34:17][c.t.c.x.so:startoverui] [INFO]   ├── @angular-cli/base-href-webpack@1.0.6 
[16:34:17][c.t.c.x.so:startoverui] [INFO]   ├── @angular/common@2.1.2 
[16:34:17][c.t.c.x.so:startoverui] [INFO]   ├── @angular/compiler@2.1.2 

etc. ...

[16:34:17][c.t.c.x.so:startoverui] [INFO] Running 'npm run-script prod --color=false' in /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui
[16:34:17][c.t.c.x.so:startoverui] [INFO] 
[16:34:17][c.t.c.x.so:startoverui] [INFO] > startoverui@0.0.1 prod /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui
[16:34:17][c.t.c.x.so:startoverui] [INFO] > ng build --prod --base-href /startoverui/ 
[16:34:17][c.t.c.x.so:startoverui] [INFO] 
[16:34:17][c.t.c.x.so:startoverui] [ERROR] sh: ng: command not found
[16:34:17][c.t.c.x.so:startoverui] [ERROR] 
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! Linux 2.6.32-431.el6.x86_64
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! argv "/opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/node/node" "/opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/node/node_modules/npm/bin/npm-cli.js" "run-script" "prod" "--color=false"
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! node v4.5.0
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! npm  v3.10.6
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! file sh
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! code ELIFECYCLE
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! errno ENOENT
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! syscall spawn
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! startoverui@0.0.1 prod: `ng build --prod --base-href /startoverui/ `
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! spawn ENOENT
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! 
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! Failed at the startoverui@0.0.1 prod script 'ng build --prod --base-href /startoverui/ '.
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! Make sure you have the latest version of node.js and npm installed.
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! If you do, this is most likely a problem with the startoverui package,
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! not with npm itself.
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! Tell the author that this fails on your system:
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR!     ng build --prod --base-href /startoverui/ 
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! You can get information on how to open an issue for this project with:
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR!     npm bugs startoverui
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! Or if that isn't available, you can get their info via:
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR!     npm owner ls startoverui
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! There is likely additional logging output above.
[16:34:17][c.t.c.x.so:startoverui] [ERROR] 
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR! Please include the following file with any support request:
[16:34:17][c.t.c.x.so:startoverui] [ERROR] npm ERR!     /opt/teamcity-agent/work/ef08c3902e9a13fc/startoverui/npm-debug.log
[16:34:17][c.t.c.x.so:startoverui] Failed to execute goal com.github.eirslett:frontend-maven-plugin:0.0.26:npm (npm run-script prod) on project startoverui: Failed to run task

[eirslett]

In package.json, instead of

    "scripts": {
    "start": "ng serve",

try

    "scripts": {
    "start": "./node_modules/.bin/ng serve",

or

    "scripts": {
    "start": "node node_modules/ng/bin/ng.js serve",

or some variation of that!

[vorgg]

Thanks @eirslett! I had previously tried more explicit path definitions, but I hadn't been able to get it to work and your post convinced me to try it again and a bit differently. Also I didn't know you could call Angular-CLI (ng) via a Node call. That knowledge proved helpful as well.

I ultimately ended up with a script line in package.json of ...

"prod": "./node/node ./bin/ng build --prod --base-href /startoverui/"

... and that gets the job done. Thanks again!

[eirslett]

I suggest you only use

"prod": "node ./bin/ng build --prod --base-href /startoverui/"

instead of

"prod": "./node/node ./bin/ng build --prod --base-href /startoverui/"

On a Windows machine, the binary is actually ./node/node.exe. But this plugin should handle PATH correctly, so that "node" will be the local node.js binary.

[fiLLLip]

I have set up the following:

                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <configuration>
                    <workingDirectory>${frontend.path}</workingDirectory>
                    <installDirectory>${node.path}</installDirectory>
                    <nodeVersion>${node.version}</nodeVersion>
                    <npmVersion>${npm.version}</npmVersion>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install --production</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>angular-cli install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install --no-optional -g angular-cli</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run-script mavenbuild</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run-script mavenbuild</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>javascript tests</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>test</phase>
                        <configuration>
                            <arguments>run-script maventest</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

and in package.json

  "scripts": {
    "mavenbuild": "node ./node/node_modules/angular-cli/bin/ng build --prod --base-href /dev/",
    "maventest": "node ./node/node_modules/angular-cli/bin/ng test"
  },

This seems to work just fine, but my problem is that it is extremely slow (Windows 7). It takes ~9 minutes to build. Is this because I install angular-cli every time? I do not delete anything between builds.

I use mvn install -DskipTests=true -T8 to start the build.

[eirslett]

My guess is that it's angular that is slow.

[legolas]

@fiLLLip I have a similar configuration:

<executions>
    <execution>
        <id>install node and npm</id>
        <goals>
            <goal>install-node-and-npm</goal>
        </goals>
        <phase>initialize</phase>
    </execution>
    <execution>
        <id>npm update</id>
        <phase>initialize</phase>
        <goals>
            <goal>npm</goal>
        </goals>
        <configuration>
            <arguments>update</arguments>
        </configuration>
    </execution>
    <execution>
        <id>npm build for production</id>
        <phase>compile</phase>
        <goals>
            <goal>npm</goal>
        </goals>
        <configuration>
            <arguments>run-script prod</arguments>
        </configuration>
    </execution>
</executions>

The first build takes quite some time, but after that it finishes preetty fast until I cleans the npm directory.
To me it seems the npm update step is slow in downloading/installing all the npm modules.

[digows]

take a look at this:
https://github.com/eitsopensource/ngboot

It's working well.

[lberteau]

@digows the link is dead.