通过ng add,在执行过程中出现 Cannot read property ‘options’ of undefined 的错误。(附标题:ng new 〜 –minimal 的副作用)

在创建的Angular项目中,通过ng add命令安装了Angular Calendar。

$ ng add angular-calendar
〜 中略
    Added "angular-calendar" into dependencies
    Added "moment" into dependencies
    Installing angular calendar dependencies...
    Add modules imports options...
Cannot read property 'options' of undefined

发生了类似的错误。
虽然文档中写明了通过执行”npm install”和其他一些步骤来安装的方法,但我觉得这样不作为不好,所以进行了一些调查。

让我们看看ng add的处理

因为我不了解其详细机制,但我知道npm包内有与ng add功能相对应的逻辑,所以我查看了node_modules/angular-calendar/schematics/ng-add/index.js文件。

function default_1(options) {
    return schematics_1.chain([
        addPackageJsonDependencies(options),
        installPackageJsonDependencies(),
        addModuleToImports(options),
        addAngularCalendarStyle(options),
    ]);
}

從輸出的日誌中可以看出,addModuleToImports等函式被按順序呼叫在這個陣列中進行註冊。
而且,如果再加入額外的日誌,我們可以試著檢查一下。

function addAngularCalendarStyle(options) {
    return function (host, context) {
// 追加
context.logger.log('info', "start addAngularCalendarStyle");
      var libStylePath = 'node_modules/angular-calendar/css/angular-calendar.css';
      utils_1.addStyle(host, libStylePath, options.projectName);
// 追加
context.logger.log('info', "end addAngularCalendarStyle");
      return host;
    };
}
    start addAngularCalendarStyle
Cannot read property 'options' of undefined

在将Angular Calendar的CSS文件写入angular.json的过程中,似乎发生了错误。

function addStyle(host, stylePath, projectName) {
    var workspace = config_1.getWorkspace(host);
    var appConfig = getAngularAppConfig(workspace, projectName);
    if (appConfig) {
        appConfig.architect.build.options.styles.unshift(stylePath);
        appConfig.architect.test.options.styles.unshift(stylePath);
        writeConfig(host, workspace);
    }

也许是因为appConfig.architect.build或appConfig.architect.test中的一个是未定义的,所以查看angular.json发现确实没有architect > test部分。

造成这种情况的原因是什么?

这个项目是用ng new 〜 –minimal命令创建的。

$ ng new --help
中略
  --minimal 
    When true, creates a project without any testing frameworks. (Use for learning purposes only.)

由于没有测试框架,所以创建项目时没有在angular.json的architect>test中找到,导致失败。

尽管–minimal只是为了学习目的,但我原以为是在提倡”好好测试一下!”这样的思想,没想到会以这种方式遇到问题,真是出乎意料。

广告
将在 10 秒后关闭
bannerAds