Colorpicker crashes the building process

[imichelakos]

After running ng build --prod the following error occurs

...src/$$_gendir/node_modules/md2/colorpicker/colorpicker.ngfactory.ts (1170,9): Type 'QueryList' is not assignable to type 'Portal'.
Property '_attachedHost' is missing in type 'QueryList'.

I don't even use colorpicker in my app. How i can remove it?

[dahaupt]

@imichelakos Which version do you use? You should probably update to the latest version of md2.

[imichelakos]

@dahaupt I m using "md2": "0.0.16".

Isn't that the latest one?

[dahaupt]

@imichelakos The newest one (especially for Angular4) is 0.0.18 as you can see in the Changelog.

[imichelakos]

@dahaupt Which is the latest for Angular 2? I have just finished my project and i don't want to get into migration.

Or else could you please tell me how to remove the unused components of md2

[dahaupt]

@imichelakos You should use 0.0.18 as well, it's just compatible to Angular4 but fixed several other bugs.

[imichelakos]

@dahaupt New error : ".../md2/core/overlay/scroll/scroll-dispatcher.d.ts (9,42): Initializers are not allowed in ambient contexts."

[dahaupt]

@imichelakos Which version of TypeScript do you use?

[imichelakos]

"typescript": "~2.0.3"

[imichelakos]

also i had the error
npm install

├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└── [email protected]

[dahaupt]

Those npm peer dependency warnings are most likely not the reason for those errors. You could try a more recent Typescript version like ~2.2.1 and do a clean install for that test. I never got that issue but I've read about it here: angular/angular-cli#5693

[imichelakos]

@dahaupt No lack at all... How can i remove this colorpicker...i don't even use it in my app

[dahaupt]

I'm not sure if you are able to do that because we can just import the whole md2module, can I clone your project to get a look into it? Otherwise it's really difficult to debug it.

[imichelakos]

@dahaupt unfortunately i can't share this project because it is a private one.
can share my package.json
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"chart.js": "2.1.3",
"core-js": "^2.4.1",
"fullcalendar": "^3.1.0",
"jquery": "^3.1.1",
"mailgun.js": "^2.0.1",
"md2": "0.0.18",
"moment": "^2.17.1",
"nanoscroller": "0.8.7",
"primeng": "2.0.0",
"quill": "^1.1.8",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^2.3.1",
"@angular/language-service": "^2.4.8",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.2.1"
}
when i type ng build nothing crashes.....but when i type ng build --prod the latest errors are:
colorpicker.ngfactory.ts (249,41): Property 'inputFocused' does not exist on type 'Md2Colorpicker'.
/colorpicker.ngfactory.ts (1301,41): Property 'isInputValidColor' is private and only accessible within class 'Md2Colorpicker'.
/colorpicker.ngfactory.ts (1340,9): Type 'QueryList' is not assignable to type 'Portal'.
Property '_attachedHost' is missing in type 'QueryList'.

[dharmeshpipariya-zz]

@imichelakos which components you have used of MD2? also you can inject individual components in your project as per your requirement.

[imichelakos]

@dharmeshpipariya I only use date-picker. How can i inject it individual to my project?

[dharmeshpipariya-zz]

@imichelakos you can import separately component as following code:
import this module to your application:

import { Md2DatepickerModule } from 'md2'
@NgModule({
imports: [
Md2DatepickerModule.forRoot()
]
bootstrap: [AppComponent]
})

[imichelakos]

@dharmeshpipariya After importing separately the date-picker the problem persists (version 0.17 - Typescript 2.2.1)... Version 0.18 prompts Angular 4 as required

ERROR in .../src/$$_gendir/node_modules/md2/colorpicker/colorpicker.ngfactory.ts (249,41): Property 'inputFocused' does not exist on type 'Md2Colorpicker'.
.../src/$$_gendir/node_modules/md2/colorpicker/colorpicker.ngfactory.ts (1301,41): Property 'isInputValidColor' is private and only accessible within class 'Md2Colorpicker'.
.../src/$$_gendir/node_modules/md2/colorpicker/colorpicker.ngfactory.ts (1340,9): Type 'QueryList' is not assignable to type 'Portal'.
Property '_attachedHost' is missing in type 'QueryList'.

Why it stills give me that error?

[dharmeshpipariya-zz]

@imichelakos you have to update it with Angular4 and MD2 - 0.0.18

[imichelakos]

Just migrated to Angular4 and MD2 - 0.0.18. Building process completes but now date-picker doesn't pop up which is probably an other issue

[dharmeshpipariya-zz]

we have provided 'cntainer' property for 'inline' or 'popup' view please refer API doc of datepicker

[imichelakos]

I also added [openOnFocus] = "true". I think this feature should be the default value

[dharmeshpipariya-zz]

@imichelakos No, I am telling about 'container' property of it, you can see it in our demo too with change bottom select dropdown and see the design changes.