通过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只是为了学习目的,但我原以为是在提倡”好好测试一下!”这样的思想,没想到会以这种方式遇到问题,真是出乎意料。