我有一个简单的应用程序,初始化angular-cli.

它显示相对于3条路线的一些页面.我有3个组件.在这个页面的一个上,我使用lodash和Angular2 Http模块来获取一些数据(使用Rxjs Observables,map和subscribe).我使用简单的ngFor显示这些元素.

但是,尽管我的应用程序非常简单,但我得到了一个巨大的(在我看来)捆绑包和地图.我没有谈论gzip版本,但在gzipping之前的大小.这个问题只是一般性的建议问题.

一些测试结果:

建立

哈希:8efac7d6208adb8641c1时间:10129ms chunk {0} main.bundle.js,main.bundle.map(main)18.7 kB {3} [initial] [rendered]

chunk {1} styles.bundle.css,styles.bundle.map,styles.bundle.map(styles)155 kB {4} [initial] [rendered]

chunk {2} scripts.bundle.js,scripts.bundle.map(scripts)128 kB {4} [initial] [rendered]

chunk {3} vendor.bundle.js,vendor.bundle.map(vendor)3.96 MB [initial] [rendered]

chunk {4} inline.bundle.js,inline.bundle.map(inline)0 bytes [entry] [rendered]

等待:10Mb供应商捆绑包用于这样一个简单的应用程序？

ng build --prod

哈希:09a5f095e33b2980e7cc时间:23455ms chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js,main.6273b0f04a07a1c2ad6c.bundle.map(main)18.3 kB {3} [initial] [rendered]

chunk {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css,styles.bfdaa4d8a4eb2d0cb019.bundle.map,styles.bfdaa4d8a4eb2d0cb019.bundle.map(styles)154 kB {4} [initial] [rendered]

chunk {2} scripts.c5b720a078e5464ec211.bundle.js,scripts.c5b720a078e5464ec211.bundle.map(scripts)128 kB {4} [initial] [rendered]

chunk {3} vendor.07af2467307e17d85438.bundle.js,vendor.07af2467307e17d85438.bundle.map(vendor)3.96 MB [initial] [rendered]

chunk {4} inline.a345391d459797f81820.bundle.js,inline.a345391d459797f81820.bundle.map(inline)0 bytes …

好吧,作为一个新的.net开发生态系统,我有点迷失在Core工具,版本等等.

有人可以解释我之间的区别

• 核心工具预览x for VS 2015 - 请参见此处
• 是否支持.NET Core/SDK(1.0,1.0.1,1.1) - 请参见此处
• 核心CLI SDK预览2,3,4,5 - 请参见此处

什么是预览以及它们与主版本编号有何关联？

对于新手来说,Core本身的版本似乎很奇怪

• 当您进入下载页面时:https://www.microsoft.com/net/download/core#/current/sdk
• 您可以看到下载.NET Core 1.1 SDK - 安装程序为您提供了dotnet-dev-win-x64.1.0.0-preview2-1-003177.exe:
  • 1.0.0 ?? ??
• 在同一页面上,您可以下载*Visual Studio 2015工具(预览2)*,它可以为您提供DotNetCore.1.0.1-VS2015Tools.Preview2.0.3:
  • 1.0.1？

在dotnet核心github存储库中,我们可以看到各种版本中提供了一些工具:

1.0.3于2016年12月13日发布

1.1 2016年11月16日发布

1.1.0预览1发布于2016年10月24日

1.0.2发布于2016年10月17日

1.0.1发布于2016年9月13日

2016年6月27日发布的RC2发布2015年5月16日RC1发布2015年11月18日

在DOTNET CLI回购(？我也已了解大厦工具),我们可以看到他们在谈论preview4,但在下载链接,一切都标志着预览5. 与他们谈论下载.NET核心SDK安装程序:是那里的SDK核心安装程序,所以另一个版本,或者它命名错误,它实际上只是CLI？或者SDK是否包含CLI,那么哪个版本？

它为您提供了一个dotnet-win-x64.latest.exe,似乎安装了.NET Core 1.0.1 Preview 5 ...

最后在Azure上,Web应用程序控制台将为您提供:

dotnet --version
D:\home\site\wwwroot
1.0.0-preview3-004056

WAOOOW:有点失落......

什么是正确的工具,以什么正确的版本启动新项目并在Azure上正确部署？

我正在测试订阅路由器参数的组件.每个测试通过,一切正常.但如果我查看控制台,我会看到一个错误:

清理组件ApplicationViewComponent localConsole时出错.(匿名函数)@ context.js:232

你知道为什么会这样吗？

我尝试删除unsubscribe()from ngOnDestroy()方法,错误消失.

karma/jasmine会unsubscribe()自动支持吗？

这是组件和测试

零件

import { Component, OnInit } from '@angular/core';   
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx'

import { AppService } from 'app.service';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private routeSubscription: Subscription;

  // Main ID
  public applicationId: string;


  constructor(
    private route: ActivatedRoute,
    private _service: AppService
  ) { }

  ngOnInit() {
    this.routeSubscription = this.route.params.subscribe(params => { …

我有一个基本路由的简单API.它是使用默认的Visual Studio 2015 ASP.NET Core API模板设置的.

我有这个控制器和动作:

[Route("api/[controller]")]
public class DocumentController : Controller
{
    [HttpGet("info/{Id}")]
    public async Task<Data> Get(string Id)
    {
        //Logic
    }
}

所以要达到这个方法,我必须打电话GET /api/document/info/some-id-here.

是否可以使用.NET Core,在该方法中,以字符串形式检索完整路径？

所以我可以这样做:

var myRoute = retrieveRoute();

// myRoute = "/api/document/info/some-id-here"

上下文

我有一个组件.在其中,ngOnInit函数调用组件的另一个函数来检索用户List.我想制作两个系列的小说:

• 首先测试ngOnInit是否正确触发并填充用户列表
• 我想第二次测试我的刷新函数,它也调用getUserList()

第一个测试,使用ngOnInit触发器,当我调用fixture.detectChanges()时可以正常工作.

问题

我的问题是在测试刷新功能时:只要我调用fixture.detectChanges(),就会触发ngOnInit,然后我无法知道结果的来源以及我的refresh()函数是否会被正确测试.

在我对refresh()方法进行第二系列测试之前,有没有办法"删除"或"阻止" ngOnInit() 所以它没有被调用fixture.detectChanges()？

我试着看,overrideComponent但它似乎不允许删除ngOnInit().

或者除了fixture.detectChanges在我的情况下使用之外,有没有办法检测更改？

码

这是组件,存根服务和我的spec文件的代码.

零件

import { Component, OnInit, ViewContainerRef } from '@angular/core';

import { UserManagementService } from '../../shared/services/global.api';
import { UserListItemComponent } from './user-list-item.component';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  public userList = [];

  constructor(
    private _userManagementService: UserManagementService,    
  ) { }

  ngOnInit() {
    this.getUserList();
  }

  onRefreshUserList() {
    this.getUserList();
  }

  getUserList(notifyWhenComplete = false) { …

在我们的Angular应用程序(使用Angular CLI制作)中,我们使用了几个console语句.是否有全局方法来检测环境,然后console.log仅在开发中显示我们的组件和服务？

我的意思是全球方式 - 我知道我们可以使用类似的东西:

if (!environment.production) {
  console.log(this.reviewTasksList);
}

但是每次我们必须使用这个代码console.log(以及必要的导入来获取environment变量),我们的代码将变得冗长.

我想知道是否有办法可能:

• 以更快的方式访问环境
• 也许在prod构建时删除所有控制台日志

或者更好的解决方案是创建一个记录器服务并在其中进行所有环境检查？

我不希望我的包大小受到调试语句和服务的影响.

我们有一个Angular CLI项目.我们的spec.ts文件位于不同的位置,通过Karma进行测试,没有任何具体内容.

我们希望使用官方Angular文档中描述的一些辅助类来帮助我们跨应用程序测试各种事物.例如,官方文档位于testing/index.ts文件中,用于模拟单击处理.然后它可用于所有测试.

问题是doc中的项目使用SystemJS,我想在Angular CLI项目结构中重用这些帮助器.

在Angular CLI项目结构中,有没有办法加载这种文件并在我们的spec.ts文件中提供它们的功能？

Karma.conf提到了该src/test.ts文件,但我不知道它是否适合这些存根和辅助函数.

文件示例

以下是doc和Angular CLI生成的karma.conf.js中的文件.

Angular.io doc testing/index.ts文件:

import { DebugElement }           from '@angular/core';
import { tick, ComponentFixture } from '@angular/core/testing';

export * from './jasmine-matchers';
export * from './router-stubs';

///// Short utilities /////

/** Wait a tick, then detect changes */
export function advance(f: ComponentFixture<any>): void {
  tick();
  f.detectChanges();
}

/**
 * Create custom DOM event the old fashioned way
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
 * Although …

我们有一个vue-cli 3项目.它工作得很好,编译没有问题.

事实上,我们必须支持仅支持ES5代码的旧浏览器.

在项目中,我们集成了一些用ES6编写的外部库(reconnecting-websocket就是一个例子).

问题

在使用这些外部代码编译我们的项目之后,vue-cli生成的代码具有ES6代码.

例如,我们chunk-vendors.js有这个代码:

/*!
 * Reconnecting WebSocket
 * by Pedro Ladaria <pedro.ladaria@gmail.com>
 * https://github.com/pladaria/reconnecting-websocket
 * License MIT
 */const o=()=>{if("undefined"!==typeof WebSocket)return 
WebSocket},a=t=>"function"===typeof t&&

具有ES6胖箭头功能const o=()=>{.所以在旧浏览器中运行此代码会中断.

这是我们的.browserlistrc文件,因为它似乎是在Vue CLI 3中添加浏览器支持的推荐方法:

> 1%
last 2 versions
not ie <= 8
Android >= 4

似乎vue CLI正确地在ES5中转换应用程序代码.但它并没有对供应商进行另一次传递.

是否有任何方法可以使用CLI v3配置vue项目,以便在构建之后进行最终的传输,以确保文件与ES5兼容？

我们认为嵌入式babel和webpack会自动执行,但似乎并非如此.

我们尝试使用该transpileDependencies选项,vue.config.js但它没有改变任何东西,并且胖箭头仍然存在于供应商块中.

我们在此处提供了儿童路线定义,其中我们使用警卫来检查用户在使用我们的服务之前是否接受了条款.

帐户/秘密/ secret.routes.ts:

import { Routes } from '@angular/router';
import { SecretFormComponent } from './secret-form.component';
import { SecretTermsComponent } from './secret-terms.component';
import { TermsGuard } from './services/terms-guard.service';

export const secretRoutes: Routes = [
  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form',
    component: SecretFormComponent,
    canActivate: [TermsGuard]
  },
  { path: 'terms', component: SecretTermsComponent }

  // otherwise redirect to form
  { path: '**',  redirectTo: 'form' }
];

在我们的术语守护中,我们定义了以下代码:

this.router.navigate(['/account/secret/terms']);
return false;

有没有办法在"路由组"中使用相对路由导航重定向？因为如果有一天我们的帐户网站仪表板被重命名为my-account等其他任何东西,那么定义绝对路径可能会中断.我们希望我们的秘密模块可以重复使用.

我希望能够['./terms']在我的后卫中导航,但它不起作用,就像守卫不知道"从哪里"开始相对导航.

在组件中,我们使用ngrx选择器来检索状态的不同部分.

public isListLoading$ = this.store.select(fromStore.getLoading);
public users$ = this.store.select(fromStore.getUsers);

的fromStore.method是使用NGRX创建createSelector方法.例如:

export const getState = createFeatureSelector<UsersState>('users');
export const getLoading = createSelector(
  getState,
  (state: UsersState) => state.loading
);

我在模板中使用这些observable:

<div class="loader" *ngIf="isLoading$ | async"></div>
<ul class="userList">
    <li class="userItem" *ngFor="let user of $users | async">{{user.name}}</li>
</div>

我想写一个测试,我可以做以下事情:

store.select.and.returnValue(someSubject)

能够更改主题值并再次测试组件的模板这些值.

事实上,我们很难找到一种合适的方法来测试它.如何编写我的"andReturn"方法,因为该select方法在我的组件中被调用两次,有两个不同的方法(MemoizedSelector)作为参数？

我们不想使用真正的选择器,所以模拟一个状态,然后使用真正的选择器似乎不是一个合适的单元测试方式(测试不会被隔离,并将使用真实的方法来测试组件行为).