Eclipse构建Angular应用重复报错：无法安装angular2-datetimepicker

问题描述 #

编译Angular应用时出现报错，更换Node版本后错误代码变化，当前npm无法找到angular2-datetimepicker模块路径，报错代码为ENOENT(-4058)。以下是Maven构建日志及pom.xml配置：

Maven构建日志 #

[INFO] Scanning for projects...
    [INFO] 
    [INFO] --------------------< com.tristatehc:tristatehcApp >--------------------
    [INFO] Building tristatehcApp 0.0.1-SNAPSHOT
    [INFO] --------------------------------[ war ]---------------------------------
    [INFO] 
    [INFO] --- frontend-maven-plugin:1.0:install-node-and-npm (install node and npm) @ tristatehcApp ---
    [INFO] Node v12.22.7 is already installed.
    [INFO] NPM 3.10.8 is already installed.
    [INFO] 
    [INFO] --- frontend-maven-plugin:1.0:npm (npm install) @ tristatehcApp ---
    [INFO] Running 'npm install angular2-datetimepicker' in C:\Users\tristate1005\git\tush2\tristatehcApp012019\src\main\webapp\tristatehc-app
    [ERROR] npm ERR! addLocal Could not install C:\Users\tristate1005\git\tush2\tristatehcApp012019\src\main\webapp\tristatehc-app\node_modules\angular2-datetimepicker
    [ERROR] npm ERR! Windows_NT 10.0.22000
    [ERROR] npm ERR! argv "C:\\Users\\tristate1005\\git\\tush2\\tristatehcApp012019\\node_installation\\node\\node.exe" "C:\\Users\\tristate1005\\git\\tush2\\tristatehcApp012019\\node_installation\\node\\node_modules\\npm\\bin\\npm-cli.js" "install" "angular2-datetimepicker"
    [ERROR] npm ERR! node v12.22.7
    [ERROR] npm ERR! npm  v3.10.8
    [ERROR] npm ERR! path C:\Users\tristate1005\git\tush2\tristatehcApp012019\src\main\webapp\tristatehc-app\node_modules\angular2-datetimepicker
    [ERROR] npm ERR! code ENOENT
    [ERROR] npm ERR! errno -4058
    [ERROR] npm ERR! syscall open
    [ERROR] 
    [ERROR] npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\tristate1005\git\tush2\tristatehcApp012019\src\main\webapp\tristatehc-app\node_modules\angular2-datetimepicker'
    [ERROR] npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\tristate1005\git\tush2\tristatehcApp012019\src\main\webapp\tristatehc-app\node_modules\angular2-datetimepicker'
    [ERROR] npm ERR! enoent This is most likely not a problem with npm itself
    [ERROR] npm ERR! enoent and is related to npm not being able to find a file.
    [ERROR] npm ERR! enoent 
    [ERROR] 
    [ERROR] npm ERR! Please include the following file with any support request:
    [ERROR] npm ERR!     C:\Users\tristate1005\git\tush2\tristatehcApp012019\src\main\webapp\tristatehc-app\npm-debug.log
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD FAILURE
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time: 14.479 s
    [INFO] Finished at: 2022-09-11T11:00:21-04:00
    [INFO] ------------------------------------------------------------------------
    [ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.0:npm (npm install) on project : Failed to run task: 'npm install angular2-datetimepicker' failed. (error code -4058) -> [Help 1]enter code here
    [ERROR] 
    [ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
    [ERROR] Re-run Maven using the -X switch to enable full debug logging.
    [ERROR] 
    [ERROR] For more information about the errors and possible solutions, please read the following articles:
    [ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

pom.xml配置 #

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.tristatehc</groupId>
    <artifactId>tristatehcApp</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>tristatehcApp</name>
    <description>Trisatehc Web application</description>


    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.4.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>



    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <angular.project.location>${basedir}/src/main/webapp/tristatehc-app</angular.project.location>
        <angular.project.nodeinstallation>node_installation</angular.project.nodeinstallation>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.0</version>
                <configuration>
                    <workingDirectory>${angular.project.location}</workingDirectory>
                    <installDirectory>${angular.project.nodeinstallation}</installDirectory>
                </configuration>
                <executions>
        
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
        <!-- <nodeVersion>v10.0.0</nodeVersion> -->                     
                            <nodeVersion>v12.22.7</nodeVersion>
            <!--                    <npmVersion>3.10.8</npmVersion>
             -->                    <npmVersion>3.10.8</npmVersion>
                        </configuration>
                    </execution>
        <!--    -->
                    <!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install angular2-datetimepicker</arguments>
                        </configuration>
                    </execution>
                    
                    <!-- It will execute command "npm build" inside "/e2e-angular2" directory 
                        to clean and create "/dist" directory -->
                    <execution> 
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                    
                </executions>
            </plugin>


            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>

        <resources>
            <resource>
                <directory>src/main/resources</directory>
            </resource>
            <resource>
                <directory>target/tristatehc-app</directory>
                <targetPath>static</targetPath>
            </resource>
        </resources>
    </build>


</project>

解决方案 #

1. 修正npm安装命令逻辑 #

当前pom.xml直接执行npm install angular2-datetimepicker时，npm会优先尝试本地路径查找模块而非远程仓库，导致报错。调整构建步骤：

• 先执行基础npm install安装package.json中所有依赖
• 再单独安装目标模块（并写入package.json）

修改pom.xml对应execution块：

<execution>
    <id>npm install</id>
    <goals>
        <goal>npm</goal>
    </goals>
    <configuration>
        <arguments>install</arguments>
    </configuration>
</execution>
<execution>
    <id>install datetimepicker</id>
    <goals>
        <goal>npm</goal>
    </goals>
    <configuration>
        <arguments>install angular2-datetimepicker --save</arguments>
    </configuration>
</execution>

2. 清理本地缓存与残留文件 #

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json或npm-shrinkwrap.json文件
• 执行命令清理npm缓存：npm cache clean --force

3. 检查模块兼容性 #

angular2-datetimepicker是适配Angular 2的老模块，与当前Node v12.22.7可能存在兼容性问题：

• 确认项目Angular版本是否与该模块匹配
• 若版本不兼容，替换为适配当前Angular版本的日期选择器（如官方的@angular/material/datepicker）

4. 升级frontend-maven-plugin版本 #

当前使用的1.0版本较老，可能存在与新版Node/npm的兼容问题，建议升级到最新稳定版（如1.14.0）：

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.14.0</version>
    <!-- 其余配置保持不变 -->
</plugin>

内容的提问来源于stack exchange，提问作者Ryan