Angular Npm 包开发之踩坑小记2 | 更文挑战第21天

这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战

5. 注释不需要注明参数类型

因为我们用的是ts，已经对参数和返回的值做了类型限定，所以不需要再注明类型。

错误写法

/**
 *@param {string} b
 */
a(b:string){
  ... 
}

规范写法： 去除类型注释

/**
 *@param b
 */
a(b:string){
  ... 
}

6. 打包之后新抛出的服务或者组件提示未找到

这是因为编辑器缓存的原因，需要重启下编辑器即可。

7. rxjs打包出错

打包之后成了$urlChange: import("rxjs/internal/Observable").Observable<{}>; 具体代码如下

打包前：

public urlChange = new Subject();
urlChange$ = this.urlChange.asObservable();

打包后：

urlChange: Subject<{}>;
urlChange$: import("rxjs/internal/Observable").Observable<{}>;
constructor();

}

需要将urlChange$ = this.urlChange.asObservable();写到构造器里面初始化

public urlChange = new Subject();
urlChange$: any;

constructor() {
  this.urlChange$ = this.urlChange.asObservable();
}

即可成功打包。

subject方法写法如下：

错误写法：

public urlChange = new Subject();
urlChange$ = this.urlChange.asObservable();

// 有个推送的语句
this.urlChange.next(data);

正确写法

urlChange$ = new Subject<>();
// 有个推送的语句
this.$urlChange.next(data);

8. 在module.ts中报错symbols are not supported in decorators but....

具体信息

core\src\lib\core.module.ts(25,7): Error during template compile of 'CoreModule'
  Reference to a local (non-exported) symbols are not supported in decorators but 'PROVIDERS' was referenced
    Consider exporting 'PROVIDERS'.

如果你的module中有函数的话需要把这个函数抛出即可。

错误写法

function a(){
    ...
}
@ngModule({
 ...
})

正确写法

export function a(){
    ...
}
@ngModule({
 ...
})

9. 打包报引用的npm抛出来的未定义

错误1

: Unexpected value 'undefined' exported by the module 'IThinkDTSharedModule in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d.ts'
: Unexpected value 'undefined' declared by the module 'IThinkDTSharedModule in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d.ts'
: Cannot determine the module for class TheadFixedDirective in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d.ts! Add TheadFixedDire                        ctive to the NgModule to fix it.
Cannot determine the module for class PermissionDirective in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d.ts! Add PermissionDirect                        ive to the NgModule to fix it.

Error: : Unexpected value 'undefined' exported by the module 'IThinkDTSharedModule in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d                        .ts'
: Unexpected value 'undefined' declared by the module 'IThinkDTSharedModule in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d.ts'
: Cannot determine the module for class TheadFixedDirective in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d.ts! Add TheadFixedDire                        ctive to the NgModule to fix it.
Cannot determine the module for class PermissionDirective in F:/v3-npm-package/iThinkDT-front/node_modules/@ithinkdt/shared/ithinkdt-shared.d.ts! Add PermissionDirect                        ive to the NgModule to fix it.

错误2

Cannot read property 'module' of undefined
TypeError: Cannot read property 'module' of undefined

解决办法

9.1. 问题
之前写法是在auth模块的文件夹中建立了一个index.ts把组件抛出来了，然后在module中直接引用的，这样会报这个错误。

组件文件夹里的index.ts

export * from './login/login.component';
export * from './register/register.component';

module中的写法

import { LoginComponent, RegisterComponent } from './auth';

9.2. 错误1解决办法： 加上index

module中的写法

import { LoginComponent, RegisterComponent } from './auth/index';

但是这样的话之前错误不会报了，会报错误2

Cannot read property 'module' of undefined
TypeError: Cannot read property 'module' of undefined

9.3. 错误2解决办法： 一个一个引用
把你的组件等从它定义的地方一个一个引用过来即可解决问题。

module中的写法

import { LoginComponent } from './login/login.component.ts';
import { RegisterComponent } from './register/register.component.ts';

更多用法更新于 github