Ngx-admin: upgrade to angular 2.0 final release

[maimake]

1. upgrade to angular 2.0 final release
2. could you publish amcharts3 ammap3 to https://www.npmjs.com/

[melkir]

Hello maimake,
I'm actually trying to adapt the project from scratch with angular-cli which generate an angular 2.0 project.
Please take a look at https://github.com/melkir/ng2-admin
Futher updates are coming

[BraydenGirard]

Any estimate on a timeline for 2.0 final release ?

[michaeljota]

This release will take time as almost everything have to be reestructured. Angular RC6 dropped support for directives and pipes declarations in @Component decoratives. This template make HEAVILY use of this.

I think now everything have to be a module in their own, and be imported as a Module dependency, instead of a component dependency. This will have the advantage of reduce the amount of code that the team have to make, but it is still a lot of changes.

FYI: I do not work as part as this team, I'm just trying to update this for myself and I'm facing the very issues I'm describing.

[supermarcos]

Yes, @michaeljota it takes quite a lot of time to shake things around until you get it right. I based time ago a project on this template and I am now on the Final version with no issues, but I had to mover around a lot of parts to make it as the RC6-7 and Final releases work. However, I believe it worths the time since the code is much more understandable and modularized.

PS: a template should be used as a simple guide, not as your project per se, to the people that keep asking for features and upgrades I would say, friendly: please understand that this is a FREE project, there is NOTHING that forces the team to keep up with everything people is asking again and again, they are professionals, if you feel like having your project done, pay for it, they are for hire.

Disclaimer: I have nothing to do with them, but, like them, I am software developer and I like someone to pay for my time, my knowledge and my work, so, please, be friendly with them and don't be pushy, they probably have paid projects much more important than this one they give away.

[BraydenGirard]

It is an awesome project and I was looking forward to using it in a large corporate project. Would love to be able to give back and contribute once I fully understand the framework but not sure if we are able to use it unless it is final release. Playing with different versions and getting things to work has never been my strong suit. Sounds like this is a big job so for now we will stick with our own framework, look forward to using this in the future. Keep up the great work guys.

[mallim]

If the issue is too enormous to be done by one person, perhaps we can list the things to do for the upgrade, and each of us can pick up an issue and do it ?

[michaeljota]

@supermarcos I'm upgrading right now. I can make a pull request when I'm done, but you would have to add amchart and ammaps again, as I'm doing this for a close source project.

However, I'm testing how to re-import the components, and directives. I try first with entryComponents to all, but it fails. I'm trying now with a more apropiate aproach, entryComponents from components, viewProviders for directives and providers for services. I'll let you know.

[supermarcos]

@michaeljota good on you, mate! Great job!

[michaeljota]

@supermarcos any advices about what to do with the pipes? 😆

EDIT3: Time to go and get some sleep.

[supermarcos]

Sure: your pipes have to be declared on your modules. If you have a different module for different "chuncks" of your app and in that chunk you have components that use that pipe, then you need to declare (in "declarations") that pipe there.
Watch out for duplicated declarations, think that modules will merge/bundle all of the declarations everywhere in one common spot, if you have a pipe you want to use application wide, I'd suggest to create a "common" module where you have all your common stuff and export those bits from there and then import that module on your appModule and declare there whatever you want to use all around.
Hopefully it makes some sense... :)

[michaeljota]

Hey! Thanks! Yeah. I did that. I upload the changes, you can check it here.

I does compile well with webpack, but I get this issue.

main.27d2568….bundle.js:16 Error: Template parse errors:
Can't bind to 'menuItem' since it isn't a known property of 'ba-menu-item'.
1. If 'ba-menu-item' is an Angular component and it has 'menuItem' input, then verify that it is part of this module.
2. If 'ba-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
    <ba-menu-item
      [ERROR ->][menuItem]="item"
      (itemHover)="hoverItem($event)"
      (toggleSubMenu)="toggleSubMenu($event)""): BaMenu@3:6
'ba-menu-item' is not a known element:
1. If 'ba-menu-item' is an Angular component, then verify that it is part of this module.
2. If 'ba-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("idebar-list" class="al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
    [ERROR ->]<ba-menu-item
      [menuItem]="item"
      (itemHover)="hoverItem($event)"
"): BaMenu@2:4
    at TemplateParser.parse 

I check the ba-menu-item an its references, and it seems ok to me. Can you give it a look? Thanks you.

PS: About the pipes, I just removed the property pipes of all @components cause they are all included in the nga module.

[supermarcos]

I can see that on your baMenu.component.ts file you're still using directives and including BaMenuItem...
Unfortunately that needs to be declared at the module level from now on since RC6.
That'd be my guess...
Hopefully it helps.

The same theory that applies for pipes...

[nnixaa]

Hi All, we are on it, hopefully we will upgrade the ng2-admin in upcoming days. Thank you all for your support.

[michaeljota]

@supermarcos I'm using the entryComponents property. I don't know if that was avaliable in

But, maybe you're right, maybe they need to be declared as a module, exported inside the module and being letter reimported as a module and in the component you want to include?

[nnixaa]

Just pushed a couple of commits updating ng2-admin to RC.6, you could take a look at the amount of changes you need to make to migrate (you could treat this as a first step to migrate to the release version) https://github.com/akveo/ng2-admin/commits/development.

[jeffmccommas]

im getting many errors running the app?
ERROR in [default] /Volumes/G Drive/WebDev/ng2Apps/ng2-cli admin/src/app/theme/components/baMenu/baMenu.component.ts:10:11
Cannot find name 'require'.

[geneeblack]

FYI, I was able to take the development branch (rc6) to 2.0.0 release by simply upgrading ng2-bootstrap to 1.5 (as well as the @angular references in package.json) . So far everything looks good.

[michaeljota]

@geneeblack do you mind to share your package.json?

I'm not really upgrading to any RC, just trying to get it to the stable release.

[nnixaa]

Hey guys, just pushed updated ng2-admin version (updated to 2.0 release) to the development branch, please take a look here https://github.com/akveo/ng2-admin/tree/development
If there is any issue - let us know we will look into.
Will merge this into master tomorrow if everything works fine for you.

Thanks for your patience.

[geneeblack]

There was also this niggly little config/webpack.common.js change to remove some annoying warnings from @angular

 new webpack.ContextReplacementPlugin(
  /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
  __dirname
)

added to
plugins: []

[geneeblack]

here is my package.json, I've a few more entries in here [angularfire2, angular2-jsonapi] because I've already started integrating locally.

{
"name": "ng2-admin",
"version": "0.6.0",
"description": "Angular 2 and Bootstrap 4 Admin Template.",
"author": "akveo",
"homepage": "http://akveo.github.io/ng2-admin/",
"license": "MIT",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/router": "3.0.0",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/request-idle-callback": "^1.0.7",
"@angularclass/webpack-toolkit": "^1.3.3",
"amcharts3": "github:amcharts/amcharts3",
"ammap3": "github:amcharts/ammap3",
"angular2-jsonapi": "^3.0.0",
"angularfire2": "^2.0.0-beta.5",
"animate.css": "^3.5.1",
"bootstrap": "4.0.0-alpha.2",
"bootstrap-loader": "1.1.2",
"chart.js": "^1.1.1",
"chartist": "^0.9.7",
"ckeditor": "^4.5.9",
"core-js": "^2.4.0",
"easy-pie-chart": "^2.1.7",
"extract-text-webpack-plugin": "2.0.0-beta.3",
"font-awesome": "^4.6.1",
"font-awesome-sass-loader": "^1.0.2",
"fullcalendar": "^2.7.2",
"google-maps": "^3.2.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"ionicons": "^2.0.1",
"jquery": "^2.2.3",
"jquery-slimscroll": "^1.3.6",
"leaflet": "^0.7.7",
"leaflet-map": "^0.2.1",
"lodash": "^4.12.0",
"ng2-bootstrap": "1.1.5",
"ng2-ckeditor": "1.0.7",
"ng2-smart-table": "^0.3.1",
"ng2-tree": "^0.0.2-7",
"ng2-uploader": "0.5.14",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.12",
"tether": "^1.2.4",
"zone.js": "~0.6.17"
},
"devDependencies": {
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^1.0.1",
"angular2-template-loader": "^0.5.0",
"@types/core-js": "^0.9.28",
"@types/hammerjs": "^2.0.28",
"@types/node": "^6.0.38",
"@types/source-map": "^0.1.26",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "1.12.34",
"@types/lodash": "0.0.28",
"angular2-hmr": "~0.8.0",
"gh-pages": "^0.11.0",
"parse5": "^1.3.2",
"rimraf": "^2.5.2",
"codelyzer": "~0.0.21",
"tslint": "^3.15.1",
"ts-helpers": "1.1.1",
"ts-node": "^1.3.0",
"typedoc": "^0.4.4",
"typescript": "2.0.0",
"awesome-typescript-loader": "^2.2.1",
"tslint-loader": "^2.1.3",
"url-loader": "^0.5.7",
"style-loader": "^0.13.1",
"raw-loader": "0.5.1",
"source-map-loader": "^0.1.5",
"string-replace-loader": "^1.0.3",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.4",
"css-loader": "^0.24.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"to-string-loader": "^1.1.4",
"sass-loader": "^3.2.0",
"resolve-url-loader": "^1.4.3",
"node-sass": "^3.5.3",
"html-webpack-plugin": "^2.21.0",
"copy-webpack-plugin": "^3.0.1",
"webpack": "^2.1.0-beta.21",
"webpack-dashboard": "^0.1.8",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.1.0-beta.0",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.0",
"compression-webpack-plugin": "^0.3.1",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0"
},
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:dev",
"watch:dev": "npm run build:dev -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:dev",
"prebuild:dev": "npm run clean:dist",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile",
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --bail",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint \"src//.ts\"",
"pree2e": "npm run webdriver:update -- --standalone",
"pretest": "npm run lint",
"docs": "npm run typedoc -- --options typedoc.json --exclude '/.spec.ts' ./src/",
"gh-pages": "wintersmith build -C docs && gh-pages -d docs/build",
"start": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"version": "npm run build",
"postversion": "git push && git push --tags"
},
"repository": {
"type": "git",
"url": "https://github.com/akveo/ng2-admin.git"
},
"bugs": {
"url": "https://github.com/akveo/ng2-admin/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}

[nnixaa]

Hey everyone, just merged the upgrade changes to master, now ng2-admin is officially updated to angular 2.0 🎉 . Will keep the issue opened for now, let us know if there any issue.

[abnersouzarocket]

@nnixaa Thank you and the team for the effort, so far after the merge no issues for me. Good stuff.