Angular Ivy 兼容性问题

Posted 2023-03-24

【中文标题】Angular Ivy 兼容性问题

【英文标题】：Angular Ivy compatibility issue

【发布时间】：2021-01-16 21:00:31

【问题描述】：

尝试在 Angular 10 中使用 ngx-print 或 ngx-printer 但出现错误似乎是由于 Ivy

https://stackblitz.com/edit/angular-ivy-r4vmjn?file=src/app/app.module.ts

package.json

  "name": "app",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~10.1.2",
    "@angular/common": "~10.1.2",
    "@angular/compiler": "~10.1.2",
    "@angular/core": "~10.1.2",
    "@angular/forms": "~10.1.2",
    "@angular/platform-browser": "~10.1.2",
    "@angular/platform-browser-dynamic": "~10.1.2",
    "@angular/router": "~10.1.2",
    "ngx-print": "^1.2.0-beta.5",
    "ngx-printer": "^0.8.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.1001.2",
    "@angular/cli": "~10.1.2",
    "@angular/compiler-cli": "~10.1.2",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  

tsconfig.app.json

  "extends": "./tsconfig.json",
  "compilerOptions": 
    "outDir": "./out-tsc/app",
    "types": []
  ,
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions":  "enableIvy": false 

angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "app": 
      "projectType": "application",
      "schematics": 
        "@schematics/angular:component": 
          "style": "scss"
        
      ,
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          ,
          "configurations": 
            "production": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                ,
                
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                
              ]
            
          
        ,
        "serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "app:build"
          ,
          "configurations": 
            "production": 
              "browserTarget": "app:build:production"
            
          
        ,
        "extract-i18n": 
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": 
            "browserTarget": "app:build"
          
        ,
        "test": 
          "builder": "@angular-devkit/build-angular:karma",
          "options": 
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          
        ,
        "e2e": 
          "builder": "@angular-devkit/build-angular:protractor",
          "options": 
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          ,
          "configurations": 
            "production": 
              "devServerTarget": "app:serve:production"
            
          
        
      
    
  ,
  "defaultProject": "app",
  "cli": 
    "analytics": false
  

app.module

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';

import  AppComponent  from './app.component';
import  NgxPrinterModule  from 'ngx-printer/lib/ngx-printer.module';
import  NgxPrintModule  from 'ngx-print/lib/ngx-print.module';

@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxPrinterModule.forRoot(printOpenWindow: true),
    NgxPrintModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

错误

./src/app/app.module.ts 中的错误 未找到模块：错误：无法解析 'D:\angular print\app\src\app' 中的 'ngx-print/lib/ngx-print.module'

./src/app/app.module.ts 中的错误 未找到模块：错误：无法解析 'D:\angular print\app\src\app' 中的 'ngx-printer/lib/ngx-printer.module'

【参考方案1】：

你需要从ngx-printer和ngx-print导入：

import  NgxPrinterModule  from 'ngx-printer';
import  NgxPrintModule  from 'ngx-print';

stack

【讨论】：

我有类似的错误。我有两个库，地图和共享。在地图服务中，我像这样import entity from 'shared'; 导入共享，当我构建地图时返回此错误Could not resolve '../../../../../dist/shared/public-api'。但是正如您向@Mubeen 建议的那样，我的导入是正确的。你知道为什么吗？注意：我需要使用 enableIvy false 构建的库，并且仅当 Ivy 为 false 时才会出现此错误。如果我把 enableIvy: true 错误消失并且构建成功。