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 9 通用 + Firebase
如何从另一个组件调用一个函数，同时保持另一个组件在 Angular 中的通用性？
Angular - 在 OnInit 上进行不同 API 调用的通用组件