Angular 9 通用错误:组件“HeaderComponent”未解决:

Posted

技术标签:

【中文标题】Angular 9 通用错误:组件“HeaderComponent”未解决:【英文标题】:Angular 9 universal Error: Component 'HeaderComponent' is not resolved: 【发布时间】:2020-07-16 11:11:56 【问题描述】:

更新到 Angular 9 和 Universal 9 后,运行 npm run build:s-s-r && npm run serve:s-s-r 时出错

Error: Component 'HeaderComponent' is not resolved:
 - templateUrl: ./header.component.html
 - styleUrls: ["./header.component.scss"]
Did you run and wait for 'resolveComponentResources()'?
    at Function.get (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26828:31)
    at getComponentDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:2021:20)
    at verifyDeclarationsHaveDefinitions (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26519:23)
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26494:22)
    at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
    at Array.forEach (<anonymous>)
    at verifySemanticsOfNgModuleDef (D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26489:64)
    at D:\projects\my-app\node_modules\@angular\core\bundles\core.umd.js:26491:13
    at Array.forEach (<anonymous>)

package.json

"scripts": 
    "ng": "ng",
    "start": "npm-run-all -p client server",
    "client": "ng serve --proxy-config server.conf.json",
    "server": "nodemon --watch server.ts --exec ts-node server.ts",
    "build": "ng build",
    "test": "ng test --source-map=false",
    "tests-coverage": "ng test --source-map=false --code-coverage",
    "lint": "ng lint ng-universal-demo",
    "build:client-and-server-bundles": "ng build --prod && ng run ng-universal-demo:server:production",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:s-s-r": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:s-s-r": "node dist/server",
    "s-s-r": "npm run build:s-s-r && npm run serve:s-s-r",
    "e2e": "start-server-and-test s-s-r http://localhost:4100 wdio",
    "allure": "allure generate --clean",
  ,
  "pre-commit": [],
  "private": true,
  "dependencies": 
    "@angular-builders/custom-webpack": "8.4.1",
    "@angular/animations": "9.1.0",
    "@angular/cdk": "9.2.0",
    "@angular/common": "9.1.0",
    "@angular/compiler": "9.1.0",
    "@angular/core": "9.1.0",
    "@angular/forms": "9.1.0",
    "@angular/http": "7.2.15",
    "@angular/material": "9.2.0",
    "@angular/material-moment-adapter": "9.2.0",
    "@angular/platform-browser": "9.1.0",
    "@angular/platform-browser-dynamic": "9.1.0",
    "@angular/platform-server": "9.1.0",
    "@angular/router": "9.0.7",
    "@fullcalendar/core": "^4.4.0",
    "@gfx/zopfli": "1.0.14",
    "@nguniversal/express-engine": "9.1.0",
    "@ngx-translate/core": "11.0.1",
    "@types/es6-promise": "3.3.0",
    "@wdio/dot-reporter": "^5.18.6",
    "accept-language-parser": "^1.5.0",
    "arraybuffer-concat": "0.0.1",
    "aws-sdk": "2.518.0",
    "axios": "0.19.0",
    "basic-auth-connect": "1.0.0",
    "body-parser": "1.19.0",
    "chart.js": "^2.8.0",
    "classlist.js": "1.1.20150312",
    "compression-webpack-plugin": "3.0.1",
    "core-js": "3.2.1",
    "detect-browser": "^4.6.0",
    "dot-object": "^1.9.0",
    "ecstatic": "4.1.2",
    "express-enforces-ssl": "1.1.0",
    "express-http-proxy": "^1.5.1",
    "express-static-gzip": "2.0.3",
    "file-saver": "2.0.2",
    "hammerjs": "2.0.8",
    "helmet": "3.21.2",
    "html2canvas": "1.0.0-rc.3",
    "iframe-resizer": "^4.1.1",
    "jsonwebtoken": "8.5.1",
    "jwks-rsa": "1.6.0",
    "lodash": "4.17.15",
    "moment": "2.24.0",
    "ng4-click-outside": "1.0.1",
    "ngx-device-detector": "^1.3.20",
    "ngx-img-cropper": "9.0.1",
    "ngx-infinite-scroll": "8.0.0",
    "ngx-perfect-scrollbar": "8.0.0",
    "ngx-web-worker": "8.0.0",
    "node-fetch": "2.6.0",
    "normalize.css": "8.0.1",
    "npm-run-all": "^4.1.5",
    "pdfmake": "0.1.58",
    "primeicons": "2.0.0",
    "primeng": "9.0.5",
    "quill": "^1.3.6",
    "rxjs": "^6.5.4",
    "spdy": "4.0.1",
    "text-encoding": "^0.7.0",
    "tslib": "^1.10.0",
    "unorm": "^1.6.0",
    "uuid": "3.3.3",
    "web-animations-js": "2.3.2",
    "webpack-cli": "3.3.11",
    "webpack-node-externals": "^1.7.2",
    "whatwg-fetch": "3.0.0",
    "xhr2": "^0.2.0",
    "zone.js": "0.10.3"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "^0.900.7",
    "@angular/cli": "9.1.0",
    "@angular/compiler-cli": "9.1.0",
    "@angular/language-service": "9.1.0",
    "@babel/cli": "^7.8.0",
    "@babel/core": "^7.8.0",
    "@babel/preset-env": "^7.8.2",
    "@babel/register": "^7.8.0",
    "@biesbjerg/ngx-translate-extract": "3.0.4",
    "@types/iframe-resizer": "3.5.7",
    "@types/jasmine": "3.5.0",
    "@types/lodash": "4.14.144",
    "@types/node": "12.11.1",
    "@wdio/allure-reporter": "^5.18.6",
    "@wdio/cli": "^5.18.4",
    "@wdio/firefox-profile-service": "^5.16.11",
    "@wdio/local-runner": "^5.18.6",
    "@wdio/mocha-framework": "^5.18.6",
    "@wdio/selenium-standalone-service": "^5.16.10",
    "@wdio/spec-reporter": "^5.18.6",
    "@wdio/sync": "^5.18.6",
    "agent": "0.2.1",
    "allure-commandline": "^2.13.0",
    "chromedriver": "^79.0.3",
    "codelyzer": "5.1.0",
    "cors-anywhere": "0.4.1",
    "cpy-cli": "2.0.0",
    "express": "4.17.1",
    "form-data": "2.5.0",
    "googledrive-i18n": "^1.2.4",
    "http-server": "0.11.1",
    "jasmine-core": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.3.0",
    "karma-chrome-launcher": "3.1.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "2.1.0",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.2",
    "karma-parallel": "^0.3.1",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-remap-istanbul": "0.6.0",
    "nodemon": "^2.0.2",
    "pre-commit": "1.2.2",
    "prettier": "1.18.2",
    "protractor": "5.4.2",
    "puppeteer": "1.19.0",
    "reflect-metadata": "0.1.13",
    "request": "2.88.0",
    "start-server-and-test": "^1.10.8",
    "superagent": "5.1.0",
    "terser": "4.2.1",
    "ts-loader": "6.0.4",
    "ts-node": "8.3.0",
    "tslint": "5.19.0",
    "tslint-microsoft-contrib": "^6.2.0",
    "typescript": "3.7.5",
    "wdio-chromedriver-service": "^5.0.2",
    "ws": "^7.2.3",
    "xmlhttprequest": "^1.8.0"
  ,

server.ts

import 'reflect-metadata';
import  enableProdMode  from '@angular/core';
import AWS = require('aws-sdk');
import * as express from 'express';
import EES = require('express-enforces-ssl');
import ESG = require('express-static-gzip');
import fs = require('fs');
import helmet = require('helmet');
import https = require('https');
import fetch from 'node-fetch/lib/index.js';
import  join  from 'path';
import spdy = require('spdy');
import 'zone.js/dist/zone-node';

import  AppServerModule, ngExpressEngine  from './src/main.server';
import  environment  from './src/environments/environment';

const token = 
  dev:
    'blala1',
  prod:
    'blala2',
;
const patient_info_token = 
  dev: 'blala1',
  prod: 'blala2',
;

const PATIENT_INFO_SERVER = 
  dev: 'blala2',
  prod: 'blala2',
;

const bodyParser = require('body-parser');

// Browser detection
const  detect  = require('detect-browser');

// Accept-language-parser
const parser = require('accept-language-parser');

global['navigator'] =  onLine: true ;

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const server = express();
const proxy = require('express-http-proxy');

const SNS_TOPIC = `blala2`;

const AUTH_TYPE = environment.AUTH_TYPE;

// const request = require('request');
const PORT = process.env.PORT || 4100;
const HTTPS_PORT = process.env.HTTPS_PORT || 4200;
const DIST_FOLDER = join(process.cwd(), 'dist');
const PROJECT_FOLDER = join(process.cwd(), 'src');

const basicAuth = require('basic-auth-connect');

let privateKey;
let certificate;

try 
  privateKey = fs.readFileSync('/blala2.pem').toString();
  certificate = fs.readFileSync('/blala2.pem').toString();

  server.enable('trust proxy');

  server.use(helmet());
  server.use(EES());
 catch (e) 

// const agent = require('superagent');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine(
  'html',
  ngExpressEngine(
    bootstrap: AppServerModule,
  ),
);

const session = ;


server.set('view engine', 'html');

server.set('views', join(DIST_FOLDER, 'browser'));


const credentials = blala2;
// const credentials = blala2;
AWS.config.credentials = credentials;

AWS.config.update( region: process.env.AWS_REGION || 'eu-central-1' );

const SNS = new AWS.SNS();


server.post('/api/token', (req, res) => 
  ///
);

server.post('/api/token/refresh', bodyParser.json(), (req, res) => 
 //
);

const auth = AUTH_TYPE === 'none' ? [] : [AUTH_TYPE === 'basic' ? basicAuthInited : formHandler];

// Server static files from /browser
server.get(
  '*.*',

  auth.concat([
    checkUnsupportedBrowser,
    ESG(join(DIST_FOLDER, 'browser'), undefined),
    express.static(join(DIST_FOLDER, 'browser'), 
      maxAge: '1y',
    ),
  ]),
);

const unless = function(path) 
  return function(req, res, next) 
    const browser = detect(req.headers['user-agent']);

    console.log('unless==>', req.headers['user-agent']);
    if (path === req.path) 
      return next();
     else if (browser && browser.name) 
      switch (browser.name) 
        case 'edge':
        case 'edge-chromium':
        case 'chromium-webview':
        case 'chrome':
        case 'firefox':
        case 'safari':
        case 'ios':
        case 'ios-webview':
        case 'fxios':
        case 'crios':
          // tslint:disable
          const render = () => 
            res.render('index',  req );
          ;

          return AUTH_TYPE === 'none'
            ? render()
            : AUTH_TYPE === 'basic'
            ? basicAuthInited(req, res, render)
            : formHandler(req, res, render);
          console.log(JSON.stringify(browser, undefined, 2));
          console.log('default case');
          next();
          break;
        default:
          callUnsupportedBrowserHTML(req, res);
          console.log(JSON.stringify(browser, undefined, 2));
          console.log('ie case');
      
     else 
      // tslint:disable
      const render = () => 
        res.render('index',  req );
      ;

      return AUTH_TYPE === 'none'
        ? render()
        : AUTH_TYPE === 'basic'
        ? basicAuthInited(req, res, render)
        : formHandler(req, res, render);
    
  ;
;

// All regular routes use the Universal engine

server.use(unless('/favicon.ico'));

// Start up the Node server
if (privateKey && certificate) 
  server.listen(PORT, () => 
    console.log(`Node Express server listening on http://localhost:$PORT`);
  );

  // Start up the Node server
  spdy.createServer( key: privateKey, cert: certificate , server).listen(HTTPS_PORT, () => 
    console.log(`Node Express secure server listening on http://localhost:$HTTPS_PORT`);
  );
 else 
  // Start up when keys is not defined
  server.listen(PORT, () => 
    console.log(`Node Express server listening on http://localhost:$PORT`);
  );


【问题讨论】:

【参考方案1】:

经过 2 天的修复后,我得到了答案。 带有 pror architect 的 angular.json 的一部分必须是下一个:

"architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/test-s-s-r/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "aot": true,

在我的情况下 builder 是错误的"builder": "@angular-devkit/custom-webpack:browser", 我也在使用 customWebpackConfig

"options": 
            "customWebpackConfig": 
              "path": "./config/custom.webpack.config.js",
              "mergeStrategies":  "plugins": "append" 
            ,

这对"builder": "@angular-devkit/build-angular:browser",没用

同样在 packege.json 版本中,这个 devDependencies 必须是下一个:

"devDependencies": 
    "@angular-devkit/build-angular": "0.900.7",
    "@angular-devkit/build-optimizer": "0.900.7",

最初,我安装了 0.901.0 版本,但它不起作用。 Link to issue

我希望我能帮助别人。

【讨论】:

请同时提供 custom.webpack.config.js。

以上是关于Angular 9 通用错误:组件“HeaderComponent”未解决:的主要内容,如果未能解决你的问题,请参考以下文章

Angular 组件不采用字符串数组作为样式

路由时超时。 Angular 9 通用 + Firebase

如何从另一个组件调用一个函数,同时保持另一个组件在 Angular 中的通用性?

Angular - 在 OnInit 上进行不同 API 调用的通用组件

如何使用 Firebase 功能部署 Angular 9 通用应用程序

Angular 9在不在app(默认)文件夹中的特定文件夹中创建组件