小编Han*_*Che的帖子

如何使用angular2 + webpack设置karma-coverage？

我从棱角分明的快速启动webpack指南.但覆盖工具是空白的,不显示我的测试.谢谢!

我的文件夹结构是

project
|--src (project files)
|--tests (all my testfiles)

我的webpack.test.js看起来像这样

var helpers = require('./helpers');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts']
            },
            {
                test: /\.html$/,
                loader: 'null'

            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'null'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: 'null'
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'null'
            }
        ]
    }
}

我的Karma.conf.js

var webpackConfig = require('./webpack.test');

module.exports = …

我遵循了角度的官方指南并成功安装了初始服务工作者.接下来我想尝试更新行为并得到一个

TypeError:无法读取未定义的属性"id"

其中id指的是ngsw-worker.js中方法中的client.id

async updateClient(client) {
        // Figure out which version the client is on. If it's not on the latest,
        // it needs to be moved.
        const existing = this.clientVersionMap.get(client.id);
....
}

我做的步骤是

1. 注册SW,脱机并重新加载(工作),关闭选项卡但保持窗口打开
2. 更新了app.cmp.html中的代码
3. 重建项目(ng build --prod)
4. 打开新标签和应用程序(可以观察软件更新)
5. 重新加载应用
6. 错误

我正在使用angular-cli 1.7.4,包括service-worker在内的所有角度库都在5.2.10上.

编辑1 08.05.2018

在angular-cli上的github上发布了一个问题6 https://github.com/angular/angular/issues/23742

编辑2 08.05.2018

到目前为止我能找到的东西:

ng build --prod不会创建新版本的ngsw-worker.js(在重新加载新的构建时,chrome不会显示"等待激活").当我重新加载或不加之前关闭选项卡时,会出现错误.

当我手动向ngsw-worker.js添加内容(如console.log)时,通常生命周期开始,旧服务工作者正在被"新"服务工作者替换.

当我在激活完成之前重新加载时,会出现相同的错误.否则它有效......

此外,尝试使用angular的故障安全(删除或重命名ngsw-config)删除服务工作程序会导致构建错误.

预计在/ Users/hanche/Desktop/Development/playground/toggl2文件夹中找到一个ngsw-config.json配置文件.在angular.json配置文件中提供一个或禁用Service Worker.

编辑3&'解决方案 '09.05.2018

如果接受2018年5月1日的拉动请求,则该问题应该得到解决.

同时,您可以通过从dist /文件夹中删除ngsw.json而不是ngsw-config.json来自动取消注册serviceworker,如故障安全部分所述.看到我在这里的回复.

此外,它也可能是一个铬虫

假设我在固定导航栏中有2个路由组件和两个Routerlink来路由它们.当我点击Routerlinks时,我希望它们从右侧滑入.

我不想用css来偏移组件,并使用超时函数来更改css类以让它滑入(例如使用ngStyle或ngClass).

在Angular 2中有没有更优雅的方法来实现这一目标？

谢谢!

当我尝试加载我的角度2.0应用程序时,我收到以下错误:(索引):21错误:错误:模块'AppModule'导入的意外值'[object Object]'

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { searchComponent }      from './search.Component'; 
import { landingComponent }     from './landing.Component'; 

export const routes: Routes = [
{
    path: '',
    component: searchComponent
},
{
    path: 'search',
    component: searchComponent
}];
export const routedComponents = [searchComponent, landingComponent];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

的AppModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule } …

我想为所有测试套件导入某些模块，例如 ngrx Store、ngx translate 或 httpClientModule 在 angular-cli@1.50 项目中使用 angular 5。

在生成的 test.ts 我添加了一个 test.configureTestingModule

const testBed: TestBed = getTestBed();

testBed.initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

testBed.configureTestingModule({
    imports: [
        HttpClientModule,
        StoreModule.forRoot(reducers, { metaReducers }),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        }),
    ]
}

仍然在 user.servive.spec.ts 中，它说 Store 没有提供者。

用户服务规范

describe('UserService', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [UserService]
        });
    });

    it('should be created', inject([UserService], (service: UserService) => {
        expect(service).toBeTruthy();
    }));
});

user.service.spec 中的 Test.configureTestingModule 是否“覆盖”了 test.ts 中的那个？ …

我已经使用prettier了将近2年来格式化我的angular代码.上周起prettier开始插入所有后面的新线angular与像装饰陈述@Input(),@Output(),@ViewChild(),...

导致像

@Input()
property1

@Output()
emitter

它使行数加倍并且不会增加可读性.

我的prettier设置是:

  "editor.tabSize": 2,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.printWidth": 120,
  "prettier.eslintIntegration": true,

当我重置为默认设置时,这个新行仍然会发生.有人有建议吗？谢谢.

更新 11.07.2020

Github 上的问题https://github.com/angular/components/issues/19401

原帖

在列表中向下或向上拖动项目时，是否可以调整滚动速度？在 macOS 上的 Firefox 中，它的行为符合预期，我拖动项目越往下滚动越快。在 Chrome 和 Safari 中，似乎只有一种速度。

对我来说，Chrome 中的行为是最重要的，因为我计划在 ionic 项目中使用拖放。

有人知道滚动是 CDK 中的自定义 javascript 实现还是某些本机浏览器功能？

闪电战

我想创建两个具有下面描述的背景白色形状的div.正如你所看到的,它基本上是一个矩形和椭圆形切割.它应该能够产生一个盒子阴影.

有没有办法用css实现这个目的？

如何以新页面从右侧而不是从底部进入的方式修改navPush？(应该有一些参数,但我没有在离子文档中找到它们

谢谢!

在我的Todo Cmp中,我有这个代码

this.todoListGroup$ = this.ngrx.select(fromRoot.getTodos)
    .flatMap((todos: Todo[]) => {
        console.log(todos)
        this.todos = todos
        this.ngrx.select(fromRoot.getLastChangedTodo);
    })
    .map(lastTodo =>{{
        console.log(lastTodo)
        doSomething(this.todos, lastTodo)
    })

当我订阅它时,每次todo更改时我都会再获得一个console.log(lastTodo).我认为使用flatmap和ngrx.select,我每次订阅一个新的Observable？

哪个运营商可以链接两个商店切片？

编辑:

只要视图在DOM中,我想继续订阅todoListGroup $,因为它应该不断更新我的视图.

到目前为止,我的解决方案是在reducer中定义一个新切片,它返回两个所需的属性.但是,我仍然对哪个运算符可以有效链接ngrx单个属性切片感兴趣.

谢谢!