小编Vik*_*son的帖子

我们正在努力在公司建立自己的表格 - 组件.我们试图像这样包装材料设计的组件:

领域:

<mat-form-field>
    <ng-content></ng-content>
    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    <mat-error>This field is required</mat-error>
</mat-form-field>

文本框:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

用法:

<textbox value="test" hint="my hint"></textbox>

这导致大致如下:

    <textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
       <field>
          <mat-form-field class="mat-input-container mat-form-field>
             <div class="mat-input-wrapper mat-form-field-wrapper">
                <div class="mat-input-flex mat-form-field-flex">
                   <div class="mat-input-infix mat-form-field-infix">
                      <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
                      <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
                   </div>
                </div>
                <div class="mat-input-underline mat-form-field-underline">
                   <span class="mat-input-ripple mat-form-field-ripple"></span>
                </div>
                <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
             </div>
          </mat-form-field> …

在 angularjs 中开发两个本地项目（其中一个导入另一个）时，我只需在模块 B 的文件夹中运行“npm link”，然后在主模块的文件夹中运行“npm link module-B”，每当我更改模块 BI 中的文件时会直接在我的浏览器服务模块 A 中看到它。

但是使用 angular(4) 似乎并不容易。

我使用 ng-packagr 生成一个 dist 文件夹。
我在 dist 文件夹中运行 npm link 。
我在主模块的文件夹中运行 npm link module-B 。
然后我运行 ng serve --preserve-symlinks。

到目前为止一切顺利，它可以理解模块 B 的组件。但是如果我尝试更改模块 B 中的某些内容，重新运行 ng-packagr，我的主模块的“ng serve”无法编译，我必须停止并启动 ng serve .

我认为 ng-packagr 首先删除了 dist 文件夹，这会触发 ng serve 中的重建，该重建失败并且没有注意到删除 dist 文件夹后新创建的文件。

我们是否必须使用 ng-packagr 或者是否有其他方法可以进行多项目本地开发。

更新：

如果我们在 ng-packagr.js 中注释掉这一部分，它不会删除文件夹，并且浏览器会在文件更改和 ngpackagr 运行时更新：

return Promise.all([ /*rimraf_1.rimraf(p.dest),*/ rimraf_1.rimraf(p.workingDirectory) ]);

但是运行 ng-packagr 需要一些时间，具体取决于库的大小。因为它构建了整个事物，而不仅仅是被更改的文件。