小编Gan*_*Gan的帖子

如何在Angular2中添加ngModule路由作为另一个ngModule的子路由?

我正在遵循本教程,以获得我的应用程序的体系结构.

为了提供更多信息,我们可以将其A视为appModule,并且B是另一个主要模块.现在我想NgModule在B里面加载其他模块(有许多其他路由)<router-outlet>.

有什么更好的方法来做到这一点?

这就是我想要实现的目标

这就是我到目前为止所做的

-mainBoard (Folder next to app.Module)
    --mainBoard Routes
    --mainBoard Component
    --mainHeader Component
    --mainFooter Component
    --mainSidenav Component

    -Users  (Folder inside mainBoard)
    --User Module
    --User Routes
    --UserList Component
    --UserDetail Component
    --UserSetting Component

    -Departments (Folder inside mainBoard)
    --Department Module
    --Department Routes
    --DepartmentList Component
    --DepartmentDetail Component

-Auth (Folder next to mainBoard folder)
    --Auth Module
    --Auth Component
    --Auth Routes
    -Sign-in (Folder)
    --Sign-in Component
    -Sign-up (Folder)
    --Sign-up Component

-App Module
Run Code Online (Sandbox Code Playgroud)

我有2个主要模块,mainBoard和Auth.MainBoard有一个标题,sidenav,footer,在中心我想加载用户和部门<router-outlet>. …

angular

20
推荐指数
1
解决办法
4887
查看次数

如何在angular-cli中生成dist文件夹中的延迟加载组件?

angular-cli用于开发,我使用以下命令和代码来构建我的项目.

npm install angular-cli (angular-cli:1.0.0-beta.10)

ng new my-app

ng g component lazy-me

然后添加一个app.router.ts包含以下脚本的文件

import { provideRouter, RouterConfig } from '@angular/router';
import { AppComponent } from './app.component';
// import { LazyMeComponent } from './+lazy-me/lazy-me.component';

const appRoutes : RouterConfig = [
  {path: '', component: AppComponent},
//   {path: 'lazyme', component: LazyMeComponent}
  {path: 'lazyme', component: 'app/+lazy-me#LazyMeComponent'}
];

export const APP_ROUTER_PROVIDER = [
    provideRouter(appRoutes)
];
Run Code Online (Sandbox Code Playgroud)

并改变了我的主要内容如下

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode,
    SystemJsComponentResolver, 
    ComponentResolver } from '@angular/core';
import …
Run Code Online (Sandbox Code Playgroud)

systemjs angular-cli angular

14
推荐指数
1
解决办法
694
查看次数

使用angular-cli@1.0.0-beta.21进行ng build -prod时找不到模块css-loader

我有以下package.json配置

"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"@angular2-material/button": "^2.0.0-alpha.8-2",
"@angular2-material/button-toggle": "^2.0.0-alpha.8-2",
"@angular2-material/card": "^2.0.0-alpha.8-2",
"@angular2-material/checkbox": "^2.0.0-alpha.8-2",
"@angular2-material/core": "^2.0.0-alpha.8-2",
"@angular2-material/grid-list": "^2.0.0-alpha.8-2",
"@angular2-material/icon": "^2.0.0-alpha.8-2",
"@angular2-material/input": "^2.0.0-alpha.8-2",
"@angular2-material/list": "^2.0.0-alpha.8-2",
"@angular2-material/menu": "^2.0.0-alpha.8-2",
"@angular2-material/progress-bar": "^2.0.0-alpha.8-2",
"@angular2-material/progress-circle": "^2.0.0-alpha.8-2",
"@angular2-material/radio": "^2.0.0-alpha.8-2",
"@angular2-material/sidenav": "^2.0.0-alpha.8-2",
"@angular2-material/slide-toggle": "^2.0.0-alpha.8-2",
"@angular2-material/slider": "^2.0.0-alpha.8-2",
"@angular2-material/tabs": "^2.0.0-alpha.8-2",
"@angular2-material/toolbar": "^2.0.0-alpha.8-2",
"@angular2-material/tooltip": "^2.0.0-alpha.8-2",
"ng2-material-dropdown":"0.5.4",
"ng2-toasty": "^2.2.2",
"@types/hammerjs": "^2.0.30",
"angular2-cookie": "1.2.3",
"angular2-material-datepicker": "^0.5.0",
"angulartics2": "^1.1.9",
"core-js": "^2.4.1",
"d3": "^4.3.0",
"es6-shim": "0.35.1",
"ng2-datetime-picker": "^0.11.3",
"ng2-tag-input": "0.6.0",
"ng2-auto-complete":"0.8.2",
"reflect-metadata": …
Run Code Online (Sandbox Code Playgroud)

npm css-loader angular-cli angular

12
推荐指数
1
解决办法
2257
查看次数

如何检测照片/视频是从相机拍摄还是从iphone Safari中的相机胶卷导入

在我的网站上,我有一个file input标签来上传照片/视频.当网站在移动Safari浏览器打开,而当我们点击文件输入,动作片开辟了3个选项take photo or Video,choose Existingcancel.无论如何在js中确定文件是从camera(take photo or video)中获取的,还是choose existing从相机卷中导入的()?

html javascript mobile-safari

9
推荐指数
1
解决办法
703
查看次数

如何在ng build之前运行ng测试 - 当ng测试失败时,使用jenkins作业失败?

之前我使用了angular-cli的systemJS版本,每当我从jenkins开始构建时,如果有任何测试用例失败,那么构建过去就会失败.

我只是ng build --prod命令建立我的项目.

现在使用angular-cli的webpack版本,我们必须明确地运行ng test.

如何检查jenkins是否ng test 已成功并继续使用ng build --prod或者构建失败?

jenkins angular-cli angular

8
推荐指数
1
解决办法
2915
查看次数

为什么用 Angular2 构建的应用程序如此沉重?

最近我们计划改造我们现有的内置于JMVC. 我们决定使用 Angular-2。

为了测试负载大小,我执行了以下操作:

ng new test123
cd test123
ng build -prod
Run Code Online (Sandbox Code Playgroud)

dist在 apache 上部署文件夹内容并显示1.0MB transferred.

在浏览器中加载时,我的整个 JMVC 应用程序以及所有业务逻辑几乎不到 1.2MB。

部署后如何减小 Angular-2 应用程序的大小?

在此处输入图片说明

angular

6
推荐指数
1
解决办法
1591
查看次数

如何在 angular4 中读取 APP_INITIALIZER 服务中的查询参数?

ConfigService在 angular 应用程序引导之前,我写了一篇文章来获取配置详细信息。

下面的代码写在app.module.ts这个代码工作正常,我能够在应用程序加载之前加载配置。

...
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: configServiceFactory,
        deps: [ConfigService],
        multi: true
    }
]
...
Run Code Online (Sandbox Code Playgroud)

但是,现在我想将有效负载传递给我必须从查询参数中读取的配置 API。

我尝试了以下但它抛出

...
@Injectable()
export class ConfigService {

    private _configData: any;

    constructor(
        private _http: Http,
        private _activatedRoute: ActivatedRoute
) {
}
...
Run Code Online (Sandbox Code Playgroud)

如何读取 APP_INITIALIZER 服务中的查询参数?

angular2-routing angular2-services angular angular-router

3
推荐指数
1
解决办法
4278
查看次数