ng-alain / ng-alain

NG-ZORRO admin panel front-end framework (surge mirror https://ng-alain-doc.surge.sh)

NG-ALAIN

Out-of-box UI solution for enterprise applications, Let developers focus on business.

English | 简体中文

Quickstart

• Getting Started

Links

• Document (Surge Mirror)
• @delon Source
• DEMO (国内镜像)

Features

• ng-zorro-antd based
• Responsive Layout
• I18n
• @delon
• Lazy load Assets
• UI Router States
• Customize Theme
• Less preprocessor
• RTL
• Well organized & commented code
• Simple upgrade
• Support Docker deploy

Architecture

delon is a production-ready solution for admin business components packages, Built on the design principles developed by Ant Design.

App Shots

Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way (This guide does not provide actual support services for this project!), How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Donation

ng-alain is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. You can support us in any of the following ways:

• patreon
• opencollective
• paypal
• 支付宝或微信

Or purchasing our business theme.

Backers

Thank you to all our backers! 🙏

License

The MIT License (see the LICENSE file for the full text)

ng-alain's Issues

Can not integrate with angular2-schema-form

ERROR in Error: Error encountered resolving symbol values statically. Calling function 'SchemaFormModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /Users/xxxxx/projects/ng-alain/src/app/app.module.ts, resolving symbol AppModule in /Users/xxxxx/projects/ng-alain/src/app/app.module.ts
    at syntaxError (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
    at simplifyInContext (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler/bundles/compiler.umd.js:24979:23)
    at StaticReflector.simplify (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler/bundles/compiler.umd.js:24991:13)
    at StaticReflector.annotations (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:41)
    at _getNgModuleMetadata (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler-cli/src/ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
    at Object.listLazyRoutesOfModule (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/xxxxx/projects/ng-alain/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (/Users/xxxxx/projects/ng-alain/node_modules/@ngtools/webpack/src/plugin.js:212:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (/Users/xxxxx/projects/ng-alain/node_modules/@ngtools/webpack/src/plugin.js:448:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

How to change the theme?

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

How to change the theme?

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

Analysis page script error

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

G2PieComponent.html:10 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'.
at viewDebugError (core.es5.js:8433)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8411)
at checkBindingNoChanges (core.es5.js:8575)
at checkNoChangesNodeInline (core.es5.js:12416)
at checkNoChangesNode (core.es5.js:12390)
at debugCheckNoChangesNode (core.es5.js:13183)
at debugCheckDirectivesFn (core.es5.js:13085)
at Object.eval [as updateDirectives] (G2PieComponent.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
at checkNoChangesView (core.es5.js:12230)

Versions.

0.1.2-rc.3

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

在IE11下切换页面后，之前页面还存在

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

0.1.2

如：
点击进入/pro/form/advanced-form， 然后按一下F5刷新页面，然后再通过菜单点击进入如/elements/buttons页面，这个时候“高级表单”页面还继续在页面的下方。

为什么angular版本有一个回退？

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

为什么angular版本有一个回退？注释中没看到具体的说明。另外，有很多beta版本没有出现在release中。请问您对发布版是怎样计划的？

Feature request: Migrate to NX for multiple applications structure

Hi,

Thank you for the excellent work.

I found out that NX has been open-sourced recently, and we can manage multiple apps within one place.
Do you think it's a good idea to migrate the current structure to a shared convenience way?
I've done some works and try to migrate some from your code base, but I really want to know your opinion.

For example, currently many shared codes are from app core, utils and shared.
We can try move this to a core app in nx, or even global lib, so we can reuse it later in many apps.

Thanks.

ng build --prod --aot 编译出来 vendor.js 太大

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

ng-alain 使用 ng build --prod --aot 编译出来的 js 还是有3M+。

是因为使用了 ng-zorro-antd ？

bug:启动时，依赖包出错

`ERROR in Unexpected value 'PlatformModule in F:/pool/git-program/ng-alain/node_modules/@angular/cdk/cdk.d.ts' imported by the module 'ScrollDispatchModule in F:/pool/git-program/ng-alain/node_modules/ng-zorro-antd/src/release/core/overlay/scroll/index.d.ts'.
Please add a @NgModule annotation.

node v6.9.5
npm v3.10.10`

请教下core module 和 shared module 是如何界定的

如题，想请教下这两个module是如何界定放置的内容的。
感觉两个模块中放置的都是通用性的组件、样式或服务。
谢谢。

思路请教：TokenInterceptor 如何弹窗错误提示窗口？

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ x ] feature request

我想在 TokenInterceptor 捕捉到错误时，弹出错误提示窗口。import NzModalService 后，报错：
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

请问，您在实际项目中是否在 TokenInterceptor 中统一处理错误呢？该如何实现？

Versions.

0.1.2-beta.1

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

我在login页面的submit()方法中增加了
this.http.get("http://localhost:8099/api/Values/get").subscribe((res: any) =>{
console.log(res);
});

我本地IIS的一个方法，支持跨域，但是报错误
ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

请求帮助

IE无法进入主页，一直停留再loading

IE无法进入主页，一直停留再loading

How to get latest version?

The demo is different than the master branch, how do I get the latest version?

关于menu菜单的ExpressionChangedAfterItHasBeenCheckedError问题

首先感谢ng-alain的实例哦，可以学到以及借鉴不少东西。

关于菜单，目前是配置在app-data.json中获取，但是当调整了比如：

{
        "text": "主导航",
        "translate": "main_navigation",
        "group": true,
        "children": [
            {
            "text": "小部件",
        },
            {
            "text": "仪表盘"
        } ]
    }

调整了小部件和仪表盘的菜单顺序后，再次加载后console中就会出现一些报错:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: '24'.
    at viewDebugError (core.es5.js:8434)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412)
    at checkBindingNoChanges (core.es5.js:8576)
    at checkNoChangesNodeInline (core.es5.js:12456)
    at checkNoChangesNode (core.es5.js:12422)
    at debugCheckNoChangesNode (core.es5.js:13202)
    at debugCheckRenderNodeFn (core.es5.js:13142)
    at Object.eval [as updateRenderer] (SidebarComponent.html:38)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13124)
    at checkNoChangesView (core.es5.js:12244)

登录页出现滚动条

登录页出现滚动条

Demo Bug

Open address：https://cipchk.github.io/ng-alain/

Environment：Chrome 62、liebao 6.5、Firefox 56

请教下还有什么手段可以减小bundle.js大小么，除了gzip

请教下还有什么手段可以减小bundle.js大小么，除了gzip

Questions about tabular pagination.

1, after switching theme, move the mouse into the currently selected pagination button:
color:#FFF ???

2, after switching the theme, use your browser to refresh the page in the current:

扩展菜单下的『博客』中的 列表、评论、新建 页面打不开

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

0.1.0-beta.1

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

对于控制台应用，更常见的是把左侧菜单设置为深色，比如阿里云的控制台。能否在主题中增加深色菜单选项？

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

对于控制台应用，更常见的是把左侧菜单设置为深色，比如阿里云的控制台。能否在主题中增加深色菜单选项？

Mention any other details that might be useful.

TODO: improves performance plans

• remove third libraries except g2
• remove invalid dependencies
• priority using ng-zorro-antd-extra components
• adjust style when preserveWhitespaces: false
• theme style move to styles file
• ng-alain chart for using g2
  • chart-card
  • mini-bar
  • mini-area
  • mini-progress
  • bar
  • pie
  • timeline
  • gauge
  • tag-cloud
  • water-wave
  • radar
• implement more Ant Design Pro pages
• support mock server

在IE11下的advanced-form中的成员管理使用日期控件无法选择日期

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

0.1.2

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

每个模块或者组件的service应该放在哪个文件夹？

这种文件结构，每个模块或者组件的service应该放在哪个文件夹，都放在core文件里吗？

About loadChildren

@cipchk
First of all , Ths for share this.
我克隆你的代码到本地 执行ng serve 启动app，但是点击左侧菜单请切换目录时无法切换一直在加载中，特别是涉及loadChildren的菜单。
在你的在线例子中也偶有出现，请教不知道这个问题需要怎么处理？
附;我用的浏览器是 chrome 61.0.****版本

[perf] adjust style when `preserveWhitespaces: false`

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

关于Layout变动

在upgrade.md中关于layout中的描叙：

页面整体布局结构，包括：头部、左边菜单，除非在更新日志中明确提醒否则该目录不太会变动。

但是实际上header.component中的Notifications中都是测试数据，肯定要调整的，这样是不是和不太会变动有矛盾

怎么样才能调整默认字号大小呢？

翻开node_module里面的zorro源码，默认字体貌似被限制了，都是12px，我感觉还是挺小的，那么ng-alain能否实现默认字体更改为14px？谢谢

$table-header-bg:red;

variables-antd.scss文件中的
$table-header-bg:red;

改了这个值，表头的颜色没有改变。

项目npm install后无法启动

Versions.

Angular CLI: 1.5.0
Node: 8.2.1
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.8
@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.3.4
webpack-bundle-analyzer: 2.9.0
webpack: 3.8.1

Repro steps.

新下载项目后npm install， ng serve --open --port 0 报编译失败。

The log given by the failure.

preloader动画模块加载完成之后要如何移除？

加载动画在模块加载完成之后依然存在，请问如何移除？

The menu will be selected duplicately.

I'm submitting a menu selected bug

[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

First， sorry for my bad English.
Sometimes the menu will be selected duplicately like image1.

In order to describe the error more clear，I append the item.selected after the (item.translate | translate) || item.text . Then, click the menu , the menu item.selected will be changed to true.

At this time , click a menu which will leave the page like 'Login' under the 'Pages'

The browser will href to Login page , then click the 'go back' button of the browser to back, now all of the 'item.selected == true' menus will be selected like image1.

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Browser:
- [x] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

can you support IE11

卡色，提供一个ngx-vedio吧？

当前只有angularjs的播放器版本，写一套样式出来也是极好的！

File Upload without any action when click Single upload button

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

0.1.2-beta.2

Repro steps.

Without any action when click Single button of upload page under IE9 browser.
Need multiple click under chrome browser after F5 refresh the page.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

打包报错

vendor.8f0aeb983122b56bcd0a.bundle.js:1 Uncaught TypeError: Xe.Observable.throw is not a function
at t.selector (main.95035915ababa27f2366.bundle.js:1)
at t.error (vendor.8f0aeb983122b56bcd0a.bundle.js:1)
at t.T14+.t._error (vendor.8f0aeb983122b56bcd0a.bundle.js:1)
at t.T14+.t.error (vendor.8f0aeb983122b56bcd0a.bundle.js:1)
at XMLHttpRequest.p (vendor.8f0aeb983122b56bcd0a.bundle.js:1)
at t.invokeTask (polyfills.e4761bff8bd6a8151d1c.bundle.js:1)
at Object.onInvokeTask (vendor.8f0aeb983122b56bcd0a.bundle.js:1)
at t.invokeTask (polyfills.e4761bff8bd6a8151d1c.bundle.js:1)
at r.runTask (polyfills.e4761bff8bd6a8151d1c.bundle.js:1)
at e.invokeTask [as invoke] (polyfills.e4761bff8bd6a8151d1c.bundle.js:1)

Project not friendly with VSCode 'Angular Language Service' plugin.

A lot of error message like those:
file: 'file:///xxxxxxxx/src/app/routes/dashboard/v1/v1.component.html'
severity: 'Error'
message: 'Can't bind to 'sparkline' since it isn't a known property of 'div'.'
at: '29,42'
source: 'Angular';

[建议]啥时候给整上登录功能

在 NG-ZORRO issue 上看到这个项目，我自己最近也在跟着 NG-ZORRO 框架在做一个后管系统，要是早知道有你这个还瞎整啥，重复造轮子多累。

能补一个菜单快速查找吗

菜单这块是否能添加一个快速查找阿

当 _HttpClient.post() 返回的状态码为200时，如何能使 HttpInterceptor 不报错？

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Repro steps.

当调用 _HttpClient.post() 返回的状态码为200时，HttpInterceptor 会在 .catch((res: HttpResponse) => {} 段落处捕捉到错误。
如何修改才能将200视为正常值，不返回错误？

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

Full Tables Paging component is not i18N supported

使用TokenInterceptor后，连续 post() 或 get()后，无法捕捉到函数完成

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Repro steps.

//函数定义
login(): Observable<UserData> {
        return this.http.post('/token', params.toString()).map((res: any) => {
            this.tokenServ.data = res;
        }).mergeMap(() => {
            return this.http.get('/api/Account/GetUserAuthorization').map(result => {
                this.userData = result;
                return this.userData;
            });
        });
  }

//函数调用
login().subscribe((data) => {
         // 此行无法运行
         console.log(data);
         this.router.navigate(['dashboard']);
}, () => {
});

将上述语句替换成 Promise 依然无法运行。
经多次测试，将 TokenInterceptor 中的一段语句注销掉之后，恢复正常。

return next
            .handle(newReq)
            // 此段注销掉，上述语句正常运行
            // .mergeMap((event: any) => {
            //     // 允许统一对请求错误处理，这是因为一个请求若是业务上错误的情况下其HTTP请求的状态是200的情况下需要
            //     if (event instanceof HttpResponse && event.status !== 200) {
            //         // observer.error 会跳转至后面的 `catch`
            //         // return Observable.create(observer => observer.error(event));
            //         console.log(event);
            //     }
            //     // 若一切都正常，则后续操作
            //     console.log('正常完成');
            //     return Observable.create(observer => observer.next(event));
            // })
            .catch((res: HttpResponse<any>) => {

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

用户邮箱地址过长时，sidebar.component.html 中的nz-avatar元素的宽度会被挤占，导致无法显示头像

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

0.0.1-alpha.4

Repro steps.

用户邮箱地址过长时，sidebar.component.html 中的nz-avatar元素的宽度会被挤占，导致无法显示头像

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

我想请问下 npm run build vendor.****.bundle.js 太大

@cipchk
我自己通过npm run build发现vendor..bundle.js有2M+太大，但我看了DEMO链接过去的网页
通过network发现main..bundle.js只有几百k，想请教下是如何做到的？
多谢了

新加的ant design pro的页面有些组件颜色不会跟着主题变化

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

0.1.2-rc.2

新加的ant design pro的页面有些组件颜色不会跟着主题变化

可以考虑加上左侧菜单收起的功能

可以考虑加上左侧菜单收起的功能

瀑布流样式插件能改成由每个col控制宽度吗？

瀑布流样式插件能改成由每个col控制宽度吗？不是由row控制每行的col个数？

你好请问一下，可以加一个就是我选择菜单中的一条，右侧内容栏是tab页么，这样子我可以选很多的内容然后来回切换tab页就好

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

路由守卫做成全局的吧？

看了这个demo，非常值得学习，作为后台，涉及权限这块的时候，因为你这边的菜单都是初始化循环读取menu.ts的，根据用户的权限动态展示菜单比较麻烦，可否把路由卫士做成全局实例？其他的token验证和权限验证我们只需要改为自己的业务代码即可！

我目前是在menu.ts里面加了一个role来限制拥有这个权限的才能够显示这个菜单，然后在html界面多加了一个条件，总觉得不妥，菜单过多时，加载首页很慢
menu.ts:

sidebar.comment.html:

关于webstorm编译错误提示问题

我使用的是webtormIDE，编写HTML代码时候，凡是使用ng-zorro组件，编译器都没有代码智能提示，而且会会报一堆编译错误，但实际运行没问题，这要怎么解决呢？

ng build --prod --aot error "Property 'quickMenu' does not exist on type 'DashboardV1Component'"

ng build --prod --aot failed because of lack of property "quickMenu" in DashboardV1Component.