Невозможно выполнить привязку к 'dividerColor', поскольку это не известное свойство 'mat-form-field'
Я создал приложение Angular и успешно его скомпилировал:
10% building 3/3 modules 0 activei 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
i 「wds」: webpack output is served from /
i 「wds」: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 163 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 399 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 186 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.95 MB [initial] [rendered]
Date: 2019-11-15T07:04:24.466Z - Hash: 14ff089b7b0356766301 - Time: 16736ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Compiled successfully.
Но когда я иду в http://localhost:4200
Я вижу только название и логотип приложения на вкладке своего браузера, но пустую белую страницу на месте содержимого. Я могу запускать другие приложения по этому адресу, но это новое приложение не работает и ничего не показывает.
Вы можете найти файлы проекта здесь: https://github.com/rajishpajish/test
РЕДАКТИРОВАТЬ: я проверил консоль разработчика в качестве предложенного ответа и нашел это сообщение об ошибке:
Uncaught Error: Template parse errors:
Can't bind to 'dividerColor' since it isn't a known property of 'mat-form-field'.
1. If 'mat-form-field' is an Angular component and it has 'dividerColor' input, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p>
<mat-form-field class="full-width"
[ERROR ->]dividerColor="{{(formErrors.author) ? 'warn' : 'primary'}}">
<input matInput formControlNa"): ng:///AppModule/DishDetailComponent.html@62:9
Can't bind to 'dividerColor' since it isn't a known property of 'mat-form-field'.
1. If 'mat-form-field' is an Angular component and it has 'dividerColor' input, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p>
<mat-form-field class="full-width"
[ERROR ->]dividerColor="{{(formErrors.comment) ? 'warn' : 'primary'}}">
<textarea matInput formContr"): ng:///AppModule/DishDetailComponent.html@75:9
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11188)
at JitCompiler._parseTemplate (compiler.js:25721)
at JitCompiler._compileTemplate (compiler.js:25709)
at compiler.js:25653
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25653)
at compiler.js:25566
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25565)
Поскольку я новичок в Angular, я не знаю, устарел ли этот модуль и как заменить его новым?
2 ответа
Если вы откроете консоль разработчика, вы увидите ошибку в одном из шаблонов (DishDetailComponent.html@75:9):
Как видите, он жалуется на то, что нет dividerColor
собственность в mat-form-field
составная часть. Возможно, это устаревшее свойство, потому что я не вижу его в его API: https://material.angular.io/components/form-field/api
Я нашел здесь журнал изменений: https://www.reddit.com/r/Angular2/comments/86ta8k/angular_material_600beta5_changelog/ и заменил всеdividerColor
s с color
в моем проекте и это сработало!
Спасибо за помощь @Fel.