Angular ERROR NullInjectorError: R3InjectorError(AppModule)的错误分析

一些特色：

可以记住上次打开书签的状态：

自定义书签的图标：

外观如下：

需要注入加了@Inject(‘apiUrl’)这个注解的myname参数：

遇到如下错误：

依赖注入的入口函数：

/**
 * @fileoverview added by tsickle
 * Generated from: packages/core/src/render3/instructions/di.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @template T
 * @param {?} token
 * @param {?=} flags
 * @return {?}
 */
function ɵɵdirectiveInject(token, flags = InjectFlags.Default) {
    /** @type {?} */
    const lView = getLView();
    // Fall back to inject() if view hasn't been created. This situation can happen in tests
    // if inject utilities are used before bootstrapping.
    if (lView == null)
        return ɵɵinject(token, flags);
    /** @type {?} */
    const tNode = getPreviousOrParentTNode();
    return getOrCreateInjectable((/** @type {?} */ (tNode)), lView, resolveForwardRef(token), flags);
}

这个token是自动传入的：

从injector的records map里查看，apiUrl对应的value为null：

最终报错：

core.js:6242 ERROR NullInjectorError: R3InjectorError(AppModule)[apiUrl -> apiUrl -> apiUrl]: NullInjectorError: No provider for apiUrl! at NullInjector.get (http://localhost:4200/vendor.js:62758:27) at R3Injector.get (http://localhost:4200/vendor.js:76765:33) at R3Injector.get (http://localhost:4200/vendor.js:76765:33) at R3Injector.get (http://localhost:4200/vendor.js:76765:33) at NgModuleRef$1.get (http://localhost:4200/vendor.js:94067:33) at Object.get (http://localhost:4200/vendor.js:91801:35) at getOrCreateInjectable (http://localhost:4200/vendor.js:66560:39) at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:80581:12) at NodeInjectorFactory.SearchInputComponent_Factory [as factory] (http://localhost:4200/main.js:1432:174) at getNodeInjectable (http://localhost:4200/vendor.js:66705:44)