Angular4升级到Angular11项目记录

焦糖古董
1,444 阅读4分钟

Angular 从4.4 升级到11记录

版本记录 Typescript 2.9.2=>4.1.5 rxjs:5.5.5=> 6.6.7

rxjs升级引入rxjs的包rxjs、rxjs-compat

报错记录

1. Initializers are not allowed in ambient contexts

解决方法
Typescript版本问题，升级到更高的版本

2. Metadata collected contains an error that will be reported at runtime: Expression form not supported.

解决方法
Typescript新版本里面，变量声明的时候不能直接在变量后面写{xxx:string,yyy:number}这种方式去类型定义，把类型定义的内容定义一个interface。

pointArr: {id?: number,name?: string}[]=[];
=>
export type Point = {
    id?:number,
    name?:string
}
...
pointArr: Point[]=[];
3. ERROR: Angular structure loaded both synchronously and asynchronously

解决方法
tsconfig.json文件中"angularCompilerOptions"添加"enableIvy": false。

参考：stackoverflow.com/questions/6… 第一次遇到时，使用这个方法解决了；但是编译别的包的时候，使用同样的设置不起作用。

4. Dependency @angular-builders/custom-webpack must be explicitly allowed using the "allowedNonPeerDependencies" option.

解决方案
ng-packagr打包文件中遇到的问题，在ng-package.json文件的allowedNonPeerDependencies 中添加 "@angular-builders/custom-webpack" 参考 stackoverflow.com/questions/5…

5. Error: Could not load rxjs-compat/_esm5/add/operator/first (imported by out\index.sw.js): ENOENT: no such file or directory, open 'D:......\packages\modules\messages\rxjs-compat_esm5\add\operator\first'

解决方案
删除node_modules，重新npm install

6. error encountered in metadata generated for exported symbol 'CaxxxxxCommonComponent':Metadata collected contains an error that will be reported at runtime: Unsupported import syntax.

解决方案
代码中原来有这样的一段写法import IDashBoard = DashboardModel.IDashBoard;去掉。在需要使用的地方直接使用DashboardModel.IDashBoard。

7. Metadata collected contains an error that will be reported at runtime: Lambda not supported

解决方案
方法定义里面直接返回了匿名函数

export function ActionComponent(name: string, w?: number, h?: number) {
  return function (target) {
    registerActionComponent(target, name, w, h);
  }
}

改为赋值给变量再返回即可。

export function ActionComponent(name: string, w?: number, h?: number) {
  const res = function (target) {
    registerActionComponent(target, name, w, h);
  }
  return res;
}
8. Unsupported private class ObjTypeSelectorComponent. This class is visible to consumers via SimpleFormsModule -> ObjTypeSelectorComponent, but is not exported from the top-level library entrypoint.

解决方案 未在index.ts中导出， 在组件所在目录index.ts文件中添加export即可

...
export * from "./objtype-selector/objtype-selector.component";
...
9. Class is using Angular features but is not decorated. Please add an explicit Angular decorator.

解决方案
给Class加上装饰器

@Component({
    template:''
})
或者
@Injectable()
10. No suitable injection token for parameter 'window' of class 'FileUploadComponent'.

解决方案

export const NG2_GADGET_PARAMS = new OpaqueToken('NG2_GADGET_PARAMS');

改为

export const NG2_GADGET_PARAMS = new InjectToken('NG2_GADGET_PARAMS');
11. × Compiling TypeScript sources through NGC.ERROR: Internal error: failed to get symbol for entrypoint An unhandled exception occurred: Internal error: failed to get symbol for entrypoint. See "C:\Users\ADMINI~1\AppData\Local\Temp\ng-8thmDr\angular-errors.log" for further details.

@frcloud/messages 编译时找不到入口文件
解决方案
添加public-api.ts文件，将目录中的文件export出来。

12. Error occurs in the template of component CellFilePickerComponent.

原因： XXX.component.html 里面有错。 解决方法：找出html文件里面的错误即可，比如标签未关闭、未引入使用的插件等

13. [Type 'HTMLCollectionOf' must have a 'Symbol.iterator' method that returns an iterator]

解决方法

  1. tsconfig.json中的lib添加配置
lib:[
    ...
    "DOM",
    "DOM.Iterable"
]

参考链接 (stackoverflow.com/questions/5…)

  1. 使用最基础for循环
const navList = document.getElementByClassName('nav-list');
for(const i=0; i <navList.length ; i++){
    console.log(navList[i]);
}
  1. 使用 Object.keys()
const navList = document.getElementByClassName('nav-list');
for(const listKey of Object.keys(navList)){
    console.log(navList[listKey]);
}
14. 引入jQuery时，报如下错误
../../node_modules/@types/jquery/JQuery.d.ts:505:90 - error TS2344: Type 'Node' does not satisfy the constraint 'HTMLElement'.
  Type 'Element' is not assignable to type 'HTMLElement'.
505     after(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
~~~~~~~~~~~
../../node_modules/@types/jquery/JQuery.d.ts:521:144 - error TS2344: Type 'Node' does not satisfy the constraint 'HTMLElement'.
  Type 'Element' is not assignable to type 'HTMLElement'.

521     after(function_functionｰhtml: (this: TElement, index: number, html: string) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>): this;                                                    ~~~~~~~~~~~
../../node_modules/@types/jquery/JQuery.d.ts:991:91 - error TS2344: Type 'Node' does not satisfy the constraint 'HTMLElement'.
  Type 'Element' is not assignable to type 'HTMLElement'.
991 append(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
~~~~~~~~~~~
../../node_modules/@types/jquery/JQuery.d.ts:1001:131 - error TS2344: Type 'Node' does not satisfy the constraint 'HTMLElement'.
  Type 'Element' is not assignable to type 'HTMLElement'.

1001 append(funсtion: (this: TElement, index: number, html: string) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>): this;
~~~~~~~~~~~
../../node_modules/@types/jquery/JQuery.d.ts:1315:91 - error TS2344: Type 'Node' does not satisfy the constraint 'HTMLElement'.
  Type 'Element' is not assignable to type 'HTMLElement'.

1315 before(...contents: Array<JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>>): this;
~~~~~~~~~~~
../../node_modules/@types/jquery/JQuery.d.ts:1331:145 - error TS2344: Type 'Node' does not satisfy the constraint 'HTMLElement'.
  Type 'Element' is not assignable to type 'HTMLElement'.
1331 before(function_functionｰhtml: (this: TElement, index: number, html: string) => JQuery.htmlString | JQuery.TypeOrArray<JQuery.Node | JQuery<JQuery.Node>>): this;

解决方法 @types/jQuery 版本固定为3.3.35

"@types/jquery": "3.3.35",

custom-typings.ts文件里面申明jQuery修改

interface JQuery<TElement extends Node = HTMLElement> {
    ...
}
改为
interface JQuery<TElement = HTMLElement> extends Iterable<TElement> {
    ...
}
15. Module '"../../../@types/lodash"' has no exported member 'Cancelable'.

解决办法 @types/lodash 版本固定

"@types/lodash": "4.14.160",
16. 安装自己开发的library时，报如下错误
npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path D:\workspace\frontend\modules\ng-modeling\node_modules\.staging\tslib-2f5bf991
npm ERR! dest D:\workspace\frontend\dist\core\node_modules\tslib
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, rename 'D:\workspace\frontend\modules\ng-modeling\node_modules\.staging\tslib-2f5bf991' -> 'D:\workspace\frontend\dist\core\node_modules\tslib'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-09-29T09_05_05_593Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 4294963238
npm ERR! frcloud-workspace@1.0.0 build:ng2-modeling: `cd ./modules/ng-modeling && npm install && ng build @frcloud/ng2-modeling`
npm ERR! Exit status 4294963238
npm ERR!
npm ERR! Failed at the frcloud-workspace@1.0.0 build:ng2-modeling script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-09-29T09_05_05_623Z-debug.log

解决办法
删除package-lock.json，重新npm install

17.需要锁定版本的情况

项目使用的版本和依赖包需要的版本指定为同一版本。 resolutions 允许你覆盖特定嵌套依赖项的版本

{
  "resolutions": {
    "transitive-package-1": "0.0.29",
    "transitive-package-2": "file:./local-forks/transitive-package-2",
    "dependencies-package-1/transitive-package-3": "^2.1.1"
  }
}
18. rxjs版本升级引起的报错
import {Observable} from 'rxjs';
...
Observable.of(data);
改为
import {of} from 'rxjs';
of(data).map(res=>{...});

Observable.map(res=>{ ... })
改为
import {map,takeWhile,switchMap} from "rxjs/operators";
Observable.pipe(map(item=>{
    ...
})).pipe(takeWhile(()=>{
    ...
})
)
avatar
文章
阅读
粉丝